CSS利用伪元素实现导航栏斜线分隔

时间：2021-05-08

先看看效果：

开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现

先写html结构。

XML/HTML Code复制内容到剪贴板
  • <!--导航栏begin-->
  • <divclass="header_rightfr">
  • <ahref="#"class="link">Home</a>
  • <ahref="#"class="link">About</a>
  • <ahref="#"class="link">Features</a>
  • <ahref="#"class="link">Blog</a>
  • <ahref="#"class="link">Shop</a>
  • <divclass="alarmfr">
  • <imgsrc="./images/alarm.png"alt="alarm"/></images><iclass="alarm_number">2</i>
  • </div>
  • </div>
  • <!--导航栏end-->

  • 再是样式

    CSS Code复制内容到剪贴板
  • .link:before{content:"/";margin:024px;color:grey;}
  • .link:first-child:before{display:none;}

    • 先用：bofore，设定内容是"/"，前后margin，颜色。再用first-child将第一个元素之前的伪类去掉。

    效果是这样的

    似乎没有设计图里的斜线倾斜角度大呢，留给大家思考。

    以上就是本文的全部内容，希望对大家的学习有所帮助。

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章