一、基礎班學習路線

三、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初始化

總結

以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。