国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS利用偽元素實現導航欄斜線分隔

2024-07-11 08:33:12
字體:
來源:轉載
供稿:網友

先看看效果:

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

先寫html結構。

XML/HTML Code復制內容到剪貼板
  1. <!-- 導航欄begin -->       <div class="header_right fr">  
  2.     <a href="#" class="link">Home</a>       <a href="#" class="link">About</a>  
  3.     <a href="#" class="link">Features</a>       <a href="#" class="link">Blog</a>  
  4.     <a href="#" class="link">Shop</a>       <div class="alarm fr">  
  5.     <img src="./images/alarm.png" alt="alarm" /></images><i class="alarm_number">2</i>       </div>  
  6.     </div>    <!-- 導航欄end -->  
  7.   

再是樣式

CSS Code復制內容到剪貼板
  1. .link:before{content: "/";margin:0 24px;color: grey;}    .link:first-child:before{display:none;}   

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

效果是這樣的

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

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

原文:http://www.cnblogs.com/wzls/p/5259801.html

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 阳西县| 右玉县| 甘洛县| 安徽省| 榆中县| 重庆市| 东乡| 焦作市| 新密市| 新闻| 衡南县| 元朗区| 酒泉市| 南和县| 建昌县| 虹口区| 昭觉县| 桑植县| 开江县| 开远市| 锦屏县| 德庆县| 平昌县| 广宗县| 江门市| 宜兴市| 皮山县| 镇平县| 磐石市| 莱芜市| 阆中市| 二连浩特市| 九龙县| 临西县| 临汾市| 穆棱市| 普陀区| 仙桃市| 景泰县| 新乐市| 双柏县|