為了給HTML文檔優化，減少空標簽的使用，使布局看起來更加的完善，使用：before;：after等偽元素是非常有必要的，配合偽元素的content和background來寫效果，并使用css3進行修飾，能夠寫出許多非常精美的效果。

　　1、string

　　使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}

　　2.清除浮動

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

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

　　3、模擬float:center的效果

　　float沒有center這個取值，但是可以通過偽類來模擬實現。

　　這個效果實現很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。

　　4、給blockquote添加引號

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

　　在css3中能實現許多本來需要切圖的效果，鍛煉css3的技巧會顯得尤為重要。

　　接下來，就舉例來說明css3寫三角形(為了好區分姑且按方向區別)。

　　(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;

　　學習Web前端編程是一個漫長的過程，在千鋒哈爾濱前端培訓班學習到的知識能夠幫助我們高薪就業。但是，想要在這條路上走下去，想要走的更加高遠，還要繼續努力，保持熱情，保持對知識的渴求!

上一篇

千鋒哈爾濱Web前端培訓學員心得 學好JS前端編程便不難

下一篇

千鋒哈爾濱Web前端培訓學員心得 學編程雖辛苦但值得