CSS利用偽元素實現(xiàn)導航欄斜線分隔
發(fā)布時間：2016-03-14 09:01:10 作者：五木十架 
我要評論
我要評論這篇文章主要介紹了CSS利用偽元素實現(xiàn)導航欄斜線分隔的相關(guān)資料
先看看效果：
開始切第一張圖了，第一個遇到的問題是頂部導航欄這里，用斜線分割。想到的思路是用偽類:before或者:after實現(xiàn)
先寫html結(jié)構(gòu)。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!-- 導航欄begin -->
- <div class="header_right fr">
- <a href="#" class="link">Home</a>
- <a href="#" class="link">About</a>
- <a href="#" class="link">Features</a>
- <a href="#" class="link">Blog</a>
- <a href="#" class="link">Shop</a>
- <div class="alarm fr">
- <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>
- </div>
- </div>
- <!-- 導航欄end -->
再是樣式
CSS Code復(fù)制內(nèi)容到剪貼板
- .link:before{content: "/";margin:0 24px;color: grey;}
- .link:first-child:before{display:none;}
先用：bofore，設(shè)定內(nèi)容是"/"，前后margin，顏色。再用first-child將第一個元素之前的偽類去掉。
效果是這樣的
似乎沒有設(shè)計圖里的斜線傾斜角度大呢，留給大家思考。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
原文：http://www.cnblogs.com/wzls/p/5259801.html
相關(guān)文章
這篇文章主要介紹了html+css+js實現(xiàn)導航欄滾動漸變效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-28
這篇文章主要介紹了純CSS實現(xiàn)導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧2019-12-09- 這篇文章主要介紹了基于html+css 實現(xiàn)簡易導航欄功能，主要就是css（級聯(lián)樣式表）對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧2021-04-07
這篇文章主要介紹了CSS中的導航欄和下拉菜單的實現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-18
這篇文章主要介紹了純CSS實現(xiàn)導航欄下劃線跟隨滑動效果,需要的朋友可以參考下2018-03-29
這篇文章主要介紹了使用CSS制作立體導航欄的相關(guān)資料,需要的朋友可以參考下2017-10-16- 本文主要介紹了制作漂亮美觀的帶箭頭的面包屑導航欄的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-06
- 本篇文章主要介紹了CSS導航欄及彈窗示例代碼，導航欄和彈窗是在web中應(yīng)用很廣泛的，非常具有實用價值，需要的朋友可以參考下。2017-01-10
- CSS 的強大之處有的時候超乎我們的想象，Tab 切換，常規(guī)而言確實需要用到一定的腳本才能實現(xiàn)。下面看看如何使用純CSS實現(xiàn)導航欄Tab切換效果2016-10-13
- 本篇文章給大家分享基于html和CSS3制作簡單側(cè)邊導航欄，效果簡單大方，需要的朋友可以從參考下2016-02-25
