今天在写博客的时候，做了一个封面图，然后hexo cl && hexo g && gulp && hexo s一键生成，点开后却发现这个标题的字体颜色亮瞎我的眼睛： image.png 于是试了很多帖子
，可以加载出不同图标库的所有可用图标，方便直接选择使用，完整代码在文末提供。...本文续Icon组件篇继续对其中的 图标选择器 进行详细介绍。 我们的Icon和Icon选择器组件，实现了以下常用图标库的支持，如果还有其它你喜欢的图标库，可以参考我们的实现方式，自行加上即可。...Iconfont（阿里巴巴矢量图标库），实现了自动载入Font clas(css链接,载入后即可通过class来使用对应的字体图标)，实现Icon组件的语法兼容性，然后自动解析出Font class内的所有图标名称...，以供图标选择器使用。...FontAwesome，这是一款很常用的图标库，包含了675个图标，Icon组件实现了自动加载，语法兼容；并且自动解析所有图标名称，以供图标选择器使用。
网页截图 截取网页为图片，支持窗口截图，区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页，新版引进自动截图保存功能。...Page Ruler也是一个不错的选择。...JQuery 扩展 jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。...WhatFont 用于查看当前页面使用了哪些字体，Firebug和Webkit Inspector也可以查看字体，但是远没有WebFont方便，WebFont可以通过把鼠标悬停在元素上来查看字体。...IE Tab 在Chrome中打开IE浏览器标签页，你可以打开一个标签来运行Internet Explorer，让你看到的网页在IE浏览器看起来如何。
学会使用jQuery并不难，因为它简单易学，并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶，编写一个属于自己的插件是个不错的选择。...根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery...UI的部件工厂方式创建 通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。...但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。...这样做倒也是种选择。但会让我们实际跟插件定义有关的代码变得臃肿，而在$.fn.myPlugin里面我们其实应该更专注于插件的调用，以及如何与jQuery互动。
3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript...④：XML格式数据处理 练习3：select完成省级联动 1) XStream的使用 问题：服务器端如何将java对象，生成XML格式数据？...最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-...选中 表单选中元素 配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用...如过没有参数的传递，采用GET方式传递，否则采用POST方式 练习一：校验用户名是否存在 此练习在第五章的第三小节有实现代码，这里使用jQuery的方式进行简要的列出核心代码： $(function(
其具有以下特性：完整的基础CSS插件；丰富的预定义样式表；基于jQuery的js插件集；非常灵活的响应式栅格系统，而且崇尚移动先行的思想。...CSS基本回顾 优先级：（过去有一些误区）如何确定CSS的优先级，需要引入一个机制，分别用数字(a,b,c,d)表示优先组合，a表示style属性（行内样式），优先级最高，但由于一般使用class样式，...[att$=value] 属性值以什么结束 [att*=value] 属性值包含特定值 子选择器：用>表示，例如table>thread>tr>th 兄弟选择器：临近兄弟用+,普通兄弟用~ 伪类：bootstrap...Html布局规则：基于元素自定义属性的布局规则，比如使用类似于data-target的自定义属性 javascript实现步骤：所有插件都遵循jQuery插件开发的标准步骤，所有的事件保持统一IDE标准...通用技术 禁用插件默认行为： $(document).off('.alert.data-api') 可编程性: $('.btn.btn-danger').button('toggle').addClass
在很多应用场景中，我们需要在日历上标识出假日，以提醒用户。本文将介绍如何结合jQuery日历控件和假日数据，实现假日在日历上的显示。...准备工作首先，我们需要引入jQuery库和jQuery日历控件的相关文件。你可以通过CDN方式引入这些文件，也可以下载到本地进行引入。htmlCopy code以特殊的样式标识出来，方便用户选择。以下是示例代码：HTML结构htmlCopy code如何结合jQuery日历控件和假日显示实现实际应用场景中的功能。jQuery日历控件虽然在实现日期选择功能方面非常方便和实用，但也存在一些缺点。...不支持移动端适配：一些传统的jQuery插件并不支持移动端适配，使用在移动端上可能会出现样式错乱或交互问题。 类似的前端日期选择库中，Flatpickr 是一个优秀的选择。
如何添加中文字体？ CKEditor安装后默认的情况下只有英文字体的选择，如果想添加中文字体，则找到ckeditor下的配置文件config.js....如何设置默认选择的字体及大小？如何设置默认使用的字体及大小？ 前者，需要修改 ckeditor/contents.css 里的设置。...通过CSS的方式解决。打开选择的highlight.js样式表zenburn.css，修改如下， .hljs { ... white-space: pre-wrap !...六.添加后的文章，在显示全文的时候，如何合理自动换行？ 七.Tab键的使用，默认按Tab会移出编辑框，如何解决？...九.前端页面显示的字体/大小和后端设置的不一样？ 前端页面CSS造成的，如何解决？ 十.使用七牛云存储，缩略图无法生成？
前端阶段课程介绍 1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery 00-知识点预习 1、...HTML基本结构 2、HTML的常用标签 3、HTML布局入门 4、CSS概述 5、CSS书写方式 6、CSS常用选择器 7、CSS常用属性 01-什么是HTML？.../css/main.css"> CSS书写方式小结 临时设置某一个标签的样式，或测试等可以选择行内式网站首页用嵌入式，优点加载快，网页显示快 工作中常用外链式，其他界面，...实现HTML和CSS的分离和复用 15-CSS常用选择器01 标签选择器类选择器 层级选择器 16-CSS常用属性 文本属性 font-size 字体大小 color 文字颜色 font-family...路径提示插件 插件提示路径时后缀也自动带上"path-autocomplete.extensionOnImport": true,open in browser 用快捷键的方式打浏览器打到.html文件
这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如Bootstrap、UIkit、Foundation等来代替这种大量的重复性极强的界面样式开发工作。...我们得同时安装jQuery、UIkit两个库： $ npm i jquery uikit -D 配置 我们需要将jQuery和UIkit的引用以及一些字体的引用配置添加到webpack中（UIkit内置引用了...' 这样写就违反了一个配置约定，我们不应该将“库”或“依赖包”以全路径方式引入到代码文件中，而应该用webpack的resolve配置项，用别名来代替全路径。...' import 'uikit' import "uikit-css" 制作UIkit的Vue插件 上述的写法还是不够DRY，为了使用一个包就得引入多个不同的依赖库，这种做法实在很难看，此时我们可以选择一个...Vue的最佳做法，就是用插件形式来包装这种零碎化的引入方式。
CSS 布局方式； 掌握常见网页布局技巧； 掌握企业级、电商级网页开发基本的流程、规范； 掌握语义化、模块化、兼容性的PC端网页开发； 掌握 Photoshop 切图以及插件切图； 熟练使用调试工具进行页面调试...1、代码组织原则 2、项目开发实战流程 3、 电商类复杂页面布局规范 4、CSS初始化技术选择（Normalize.css使用）5、 CSS字体图标使用 6、CSS 属性书写顺序规范7、完整的多页面开发...； 熟练使用jQuery操作DOM； 熟练使用和编写jQuery插件； 独立完成电商网站的页面搭建（包括HTML结构、CSS样式、JavaScript特效）； 掌握应对业务编程的能力； 掌握JavaScript...5、tabs6、JSON7、其它常用网页特效jQuery快速开发1、jQuery的优势2、jQuery选择器3、jQuery中的动画4、jQuery中的DOM操作5、链式编程和隐式迭代6、插件使用和制作...JavaScript异步编程模型； 能够掌握JavaScript模块化编程方式； 能够使用Node.js操作MySQL数据库； 能够理解HTTP协议； 熟悉原生Ajax请求流程与细节，并掌握常见跨域技巧
Bootstrap是一个功能强大的、以移动端为优先的响应式前端框架，它是用CSS、HTML和JavaScript构建的。与从零开始编程，甚至许多其他框架相比，Bootstrap都有许多优势。...你可以将特定的bootstrap元素和已有的CSS代码一起使用。 如何选择和安装Boostrap？ 下载Boostrap主要有两种版本: 编译版本或源码版本。...编译版本可以在任何项目中直接使用，里面包含已编译的CSS和JavaScript，以及各自的编译和压缩版本。它还包含了数百个Glyphicon字体图标，以及Boostrap主题可供你自由选择。...Bootstrap Form Helpers 是一组jQuery插件，用于更好地构建表单。你可以从中选择单个表单进行使用，也可以根据需要选择多个一起使用。 8....Bootstrap Multiselect是一个用于UI的jQuery插件，它使用具有多个属性的选择输入，并使其以带复选框的下拉框形式出现。 37.
使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。 ?...下载图标的时候我们还可以选择颜色、大小、格式，根据自己的需要下载就好了。 ?...08.png 三、插件类网站 http://www.jq22.com/ 这个网站分享jQuery插件和提供各种jQuery特效的详细使用方法,在线预览,jQuery插件下载及教程 ?...10.png http://www.htmleaf.com/ 这个网站与上一个网站类似，也提供了大量的jQuery插件 ?...20.png http://www.psjia.com/pssc/fontxz/list_18_3.html PS字体库，包含了几乎所有类型的字体，下载好安装，PS中就可以使用了。 ? 22.png
实现列表隔行换色效果 利用Webpack中jQuery插件来实现列表隔行换色的页面效果。...安装jQuery插件 npm install jquery -S 使用$.css()方法实现页面效果 打包index.js 新建index.html文件 查看列表隔行换色效果 // index.js...// 使用ES6模块化语法导入jquery插件 import $ from 'jquery'; $(function() { $('li:odd').css('backgroundColor'...gulp在编程方面较为复杂，但是可用的组件也会更多，手动编译的情况下耗时较长，同时此软件不适合初级入门者使用。...::placeholder{color: red;} 伪元素::placeholder选择器用来选择一个表单元素的占位文本 运行程序 Chome浏览器中的“搜索”字体颜色显示为红色 IE11
WhatFont — 识别网页所使用的字体。 Page Ruler —获取任意网页中元素大小、位置信息。...Web Developer —以工具栏形式提供一系列Web开发工具， 这是Web Developer官方为Chrome开发的版本，他们也为 Firefox、Opera开发了相应插件。...该插件能够模拟不同尺寸、装有不同浏览器的移动设备。 Palettab — 安装后，新开一页卡，就能看到5种颜色和字体搭配方案！每次点击新页卡，就能有新发现。...jQuery Audit — 在元素面板创建侧边栏，显示jQuery委托代理事件、内部数据、当前选中的DOM节点、函数和对象等信息。...HTML5 Outliner — 使用网页中的标题和分区信息，创建可点击的大纲视图。 PerfectPixel — 在页面上显示半透明的图像，便于逐像素对比调整前后的页面效果，以达到最佳水准。
，可是现在随着用户使用终端设备的多样化，平板手机已经很常见，所以如何制作适合手机使用的网页？...2.代码累赘，会出现隐藏无用的元素，加载时间长 1.3.1 媒体类型 方式1： @media 媒体类型 { 选择器{ /样式代码写在这里…/} } 方式2： 字体图标是在 Web 项目中使用的图标字体。...3.3 Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。...站点引用 Bootstrap 插件的方式有两种： 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。
它的优势是我们可以快速测试代码，轻松导入和测试库代码，并且能够修改界面、主题和字体以适应我们的偏好。...它允许我们轻松地为网站构建日期选择器组件，而无需使用任何其他库。.../rahuldkjain.github.io/gh-profile-readme-generator/ GitHub Profile README Generator 是一个在线网络工具，可帮助我们以最完整和最详细的方式在...它以响应方式显示在许多不同的设备屏幕上，并且易于与当今流行的 JS 框架（如 React、Angular、Aurelia、Vue 和 Svelte）一起使用。...46、Bit 地址：https://bit.dev/ 在编程中，我们通常会在使用它来解决问题后存储好的和有用的代码。主要目的是以后如果遇到类似的情况，可以重复使用，不用浪费时间去寻找和思考。
Mobile+AngularJS经验谈 有jQuery背景，该如何用AngularJS编程思想 AngularJS在线教程 angular学习笔记 8....一个风格多样的日历 弹出层式的全日历 jquery双日历 移动 大气实用jQuery手机移动端日历日期选择插件 jQuery Mobile 移动开发中的日期插件Mobiscroll Date library...取色插件 类似 Photoshop 的界面取色插件 jquery color 取色插件集合 farbtastic 圆环＋正方形 16....前端开发面试题 牛客网-笔试面经 十五. iconfont 中文字体 淘宝字库 字体 制作教程 zhangxinxu-icommon icommon 用字体在网页中画ICON图标(推荐教程) 字体压缩工具...Chrome神器Vimium快捷键学习记录 sass调试-w3cplus 如何更专业的使用Chrome开发者工具-w3cplus chrome调试canvas chrome profiles1 chrome
HTML 5 部分 ---- 深入理解HTML5标签 如何写出高效率的HTML HTML meta标签总结与属性使用介绍 戏说HTML5 编写高质量的 HTML 代码 如何解决 img 标签上下出现的间隙...Mobile+AngularJS经验谈 有jQuery背景，该如何用AngularJS编程思想 AngularJS在线教程 angular学习笔记 8....取色插件 ---- 类似 Photoshop 的界面取色插件 jquery color 取色插件集合 farbtastic 圆环＋正方形 49....git和github进行协同开发流程 动画方式练习git 74....Datepair.js 一个风格多样的日历 弹出层式的全日历 jquery双日历 大气实用jQuery手机移动端日历日期选择插件 jQuery Mobile 移动开发中的日期插件Mobiscroll
学会使用jQuery并不难，因为它简单易学，并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶，那么如何编写一个自己的插件呢？...jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。...你所见到或使用的插件也大多是通过此种方式开发。...在处理插件参数的接收上，通常使用jQuery的extend方法 同时指定颜色与字体大小： $.fn.myPlugin = function(options) { var defaults = {...若要编写一个复杂的插件，代码量会很大，如何组织代码就成了一个需要面临的问题，没有一个好的方式来组织这些代码，整体感觉会杂乱无章，同时也不好维护，所以将插件的所有方法属性包装到一个对象上，用面向对象的思维来进行开发
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
