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 -->
13.
再是样式
CSS Code复制内容到剪贴板
1. .link:before{content: "/";margin:0 24px;color: grey;}
2. .link:first-child:before{display:none;}
先⽤：bofore，设定内容是"/"，前后margin，颜⾊。再⽤first-child将第⼀个元素之前的伪类去掉。
效果是这样的
似乎没有设计图⾥的斜线倾斜⾓度⼤呢，留给⼤家思考。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。
html滚动效果代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。