一、基礎(chǔ)班學(xué)習(xí)路線

三、CSS高級(jí)技巧

1.精靈圖

為什么需要精靈圖sprites

精靈圖使用（原理）

精靈圖使用（代碼）

精靈圖案例-拼出自己名字

2.字體圖標(biāo)

字體圖標(biāo)產(chǎn)生和優(yōu)點(diǎn)

字體圖標(biāo)下載

字體圖標(biāo)的使用

字體圖標(biāo)的追加和加載原理

3.CSS三角

CSS三角的做法

CSS三角應(yīng)用-京東效果

4.CSS用戶界面樣式

鼠標(biāo)樣式cursor

取消表單輪廓和防止拖拽文本域

• 記得把textarea兩個(gè)標(biāo)簽寫在一行中，否則生成后會(huì)有空白區(qū)域
  

5.vertical-align屬性應(yīng)用

應(yīng)用：實(shí)現(xiàn)行內(nèi)塊元素和文字垂直對(duì)齊

• 由上圖可知，圖片和文字默認(rèn)是基線對(duì)齊
  
• 上圖為底線對(duì)齊

• 還可以實(shí)現(xiàn)文本域和文字的效果

圖片底側(cè)空白縫隙解決方案

• 如上二圖，這個(gè)div沒(méi)有加寬高，理應(yīng)圖片有多高就把div撐多高，但居然有空白縫隙
• 原因是圖片和文字默認(rèn)是基線對(duì)齊的，這個(gè)空隙是給文字留的，如下圖
  
• 如果不想要這個(gè)效果，
  

6.溢出的文字省略號(hào)顯示

單行溢出文字省略號(hào)顯示

多行溢出文字省略號(hào)顯示

7.常見(jiàn)布局技巧

margin負(fù)值運(yùn)用（一）

• 先浮動(dòng)然后再marginleft往左移，那么先浮動(dòng)產(chǎn)生的效果就是第二個(gè)盒子緊貼第一個(gè)盒子，然后再將重合邊界覆蓋

margin負(fù)值運(yùn)用（二）

文字圍繞浮動(dòng)元素巧妙運(yùn)用

行內(nèi)塊的巧妙運(yùn)用

CSS三角巧妙運(yùn)用（一）

• 這樣就做出了直角三角形的效果
  

• 注意不是把改成0px
  

CSS三角巧妙運(yùn)用（二）

CSS初始化

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。