1、CSS引用文件字体
准备工作：将字体文件解压放于fonts文件夹中，字体文件通常有eot、svg、ttf、woff四种格式
CSS声明字体引用：
@font-face { font-family: test; src: url('../fonts/test.eot') format('embedded-opentype'), url('../fonts/test.svg') format('svg'), url('../fonts/test.ttf') format('truetype'), url('../fonts/test.woff') format('woff'); }
CSS设置字体为文件字体：
.example{ font-family: test; font-style: normal; }
假如使用的是字体图标，字体图标会有自己的编码，如果把字体图标放在伪元素中，则代码如下：
.example::before{ content: 'e958'; //字体图标编码作为伪元素的内容 font-size: 13px; }
2、CSS选择器巧用
2.1、使用兄弟选择器
假如ul中并排的n个块级元素li，要设置相邻元素的间隔线，可使用以下代码：
//相邻兄弟选择器选择紧接在另一个元素后的元素，而且二者有相同的父元素，会循环查找 ul>li+li{ border-left:1px solid #ccc; } //通用兄弟选择器选择指定元素的后面的所有兄弟结点，该情景下相邻兄弟选择器性能较好
ul>li~li{ border-left:1px solid #ccc; }
2.1、使用属性选择器
假如要匹配使用了test-开头的类，如class="test-1"、class=" test-2"、class="start test-3"...使用以下代码以匹配多种情况
[class^="test-"],[class*=" test-"]{ ··· }
3、jQuery和html数据交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div data-name="张三" data-age="18"></div> <button id="btn1">获取数据</button> <button id="btn2">设置数据</button> <script src="jquery/jquery.js"></script> <script> $(function () { // 获取数据 $("#btn1").on("click", function () { console.log($("div").data("name")); console.log($("div").data("age")); }); // 设置数据 $("#btn2").on("click", function () { $('div').data("name", "李四"); $('div').data({"age": "40"}); }); }); </script> </body> </html>