DIV CSS 佈局教程網

這篇文章主要介紹了CSS利用偽元素實現導航欄斜線分隔的相關資料

先看看效果：

開始切第一張圖了，第一個遇到的問題是頂部導航欄這裡，用斜線分割。想到的思路是用偽類:before或者:after實現

先寫Html結構。

XML/Html Code復制內容到剪貼板

1. <!-- 導航欄begin -->
2. <div class="header_right fr">
3. <a href="#" class="link">Home</a>
4. <a href="#" class="link">About</a>
5. <a href="#" class="link">Features</a>
6. <a href="#" class="link">Blog</a>
7. <a href="#" class="link">Shop</a>
8. <div class="alarm fr">
9. <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
10. </div>
11. </div>
12. <!-- 導航欄end -->

再是樣式

CSS Code復制內容到剪貼板

1. .link:before{content: "/";margin:0 24px;color: grey;}
2. .link:first-child:before{display:none;}

先用：bofore，設定內容是"/"，前後margin，顏色。再用first-child將第一個元素之前的偽類去掉。

效果是這樣的

似乎沒有設計圖裡的斜線傾斜角度大呢，留給大家思考。

以上就是本文的全部內容，希望對大家的學習有所幫助。