一、基础班学习路线

三、CSS高级技巧

1.精灵图

为什么需要精灵图sprites

精灵图使用（原理）

精灵图使用（代码）

精灵图案例-拼出自己名字

2.字体图标

字体图标产生和优点

字体图标下载

字体图标的使用

字体图标的追加和加载原理

3.CSS三角

CSS三角的做法

CSS三角应用-京东效果

4.CSS用户界面样式

鼠标样式cursor

取消表单轮廓和防止拖拽文本域

• 记得把textarea两个标签写在一行中，否则生成后会有空白区域
  

5.vertical-align属性应用

应用：实现行内块元素和文字垂直对齐

• 由上图可知，图片和文字默认是基线对齐
  
• 上图为底线对齐

• 还可以实现文本域和文字的效果

图片底侧空白缝隙解决方案

• 如上二图，这个div没有加宽高，理应图片有多高就把div撑多高，但居然有空白缝隙
• 原因是图片和文字默认是基线对齐的，这个空隙是给文字留的，如下图
  
• 如果不想要这个效果，
  

6.溢出的文字省略号显示

单行溢出文字省略号显示

多行溢出文字省略号显示

7.常见布局技巧

margin负值运用（一）

• 先浮动然后再marginleft往左移，那么先浮动产生的效果就是第二个盒子紧贴第一个盒子，然后再将重合边界覆盖

margin负值运用（二）

文字围绕浮动元素巧妙运用

行内块的巧妙运用

CSS三角巧妙运用（一）

• 这样就做出了直角三角形的效果
  

• 注意不是把改成0px
  

CSS三角巧妙运用（二）

CSS初始化