為了給HTML文檔優(yōu)化，減少空標(biāo)簽的使用，使布局看起來(lái)更加的完善，使用：before;：after等偽元素是非常有必要的，配合偽元素的content和background來(lái)寫(xiě)效果，并使用css3進(jìn)行修飾，能夠?qū)懗鲈S多非常精美的效果。

　　1、string

　　使用引號(hào)包一段字符串，將會(huì)向元素內(nèi)容中添加字符串。如：a:after{content:""}

　　2.清除浮動(dòng)

　　清除浮動(dòng)方法有多種，現(xiàn)在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動(dòng)清除浮動(dòng)。

　　：after{content“”;display：block;clear：both;｝

　　3、模擬float:center的效果

　　float沒(méi)有center這個(gè)取值，但是可以通過(guò)偽類來(lái)模擬實(shí)現(xiàn)。

　　這個(gè)效果實(shí)現(xiàn)很有意思，左右通過(guò)::before float各自留出一半圖片的位置，再把圖片絕對(duì)定位上去。

　　4、給blockquote添加引號(hào)

　　經(jīng)常用到給blockquote 引用段添加巨大的引號(hào)作為背景，可以用 ：:before 來(lái)代替 background。好處是即可以給背景留下空間，還可以直接使用文字而非圖片。

　　在css3中能實(shí)現(xiàn)許多本來(lái)需要切圖的效果，鍛煉css3的技巧會(huì)顯得尤為重要。

　　接下來(lái)，就舉例來(lái)說(shuō)明css3寫(xiě)三角形(為了好區(qū)分姑且按方向區(qū)別)。

　　(1)上三角形：

　　border: 16px solid transparent;

　　border-bottom: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(2)下三角形：

　　border: 16px solid transparent;

　　border-top: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(3)右三角形：

　　border: 16px solid transparent;

　　border-left: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(4)左三角形：

　　border: 16px solid transparent;

　　border-right: 16px solid #f00;

　　width: 0;

　　height: 0;

　　學(xué)習(xí)Web前端編程是一個(gè)漫長(zhǎng)的過(guò)程，在千鋒哈爾濱前端培訓(xùn)班學(xué)習(xí)到的知識(shí)能夠幫助我們高薪就業(yè)。但是，想要在這條路上走下去，想要走的更加高遠(yuǎn)，還要繼續(xù)努力，保持熱情，保持對(duì)知識(shí)的渴求!

上一篇

千鋒哈爾濱Web前端培訓(xùn)學(xué)員心得 學(xué)好JS前端編程便不難

下一篇

千鋒哈爾濱Web前端培訓(xùn)學(xué)員心得 學(xué)編程雖辛苦但值得