CSS运用伪元素完成导航栏栏斜线隔开

日期:2020-10-18 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

先看看实际效果:

刚开始切第1张图了,第1个遇到的难题是顶部导航栏栏这里,用斜线切分。想起的思路是用伪类: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将第1个元素以前的伪类去掉。

实际效果是这样的

好像沒有设计方案图里的斜线歪斜角度大呢,留给大伙儿思索。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

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