前端導航欄標籤中間的小豎線 實現方法

此方法在可控性方面比較佔優點可是會增長一個豎線的節點

html部分：

<div class="top_page_l">
<ul>
<li><a href="#">小米商城</a><s>|</s></li>
<li><a href="#">MIUI</a><s>|</s></li>
<li><a href="#">LOT</a><s>|</s></li>
<li><a href="#">雲服務</a><s>|</s></li>
<li><a href="#">水滴</a><s>|</s></li>
<li><a href="#">金融</a><s>|</s></li>
<li><a href="#">有品</a><s>|</s></li>
<li><a href="#">政企服務</a><s>|</s></li>
<li><a href="#">select Region</a></li>
</ul>
</div>

CSS部分：

.top .top_page .top_page_l ul li{
float: left;
margin-right: 6px;//要計算好距離
}
.top .top_page .top_page_l ul li a{
display: inline-block;
margin-right: 6px;//計算好距離
}

 

方法二：

HTML：

       <div>

<a href="">註冊</a>

<span class="fenge"></span>

<a href="">登陸</a>

        </div>

CSS：

         .fenge{

padding:12px 6px 0px 6px;

margin-left: 6px;

border-left: 1px solid #000;

font-size: 0;

}

利用border和padding ，這裏使用padding主要是能夠調控豎線的高度。實現可控性。優勢：可控性高；缺點：多一個空白節點；

方法三（我通常不用 。由於ps很差）

HTML：

       <div>

<a href="" class="reg_img">註冊</a>

<a href="">登陸</a>

</div>

CSS：

       .reg_img{

               background: url(../images/line.gif) no-repeat right;

               padding-right: 6px;

               display: block;

               margin-right: 6px;

           }

利用背景圖片；優勢：可控性固然就是圖片的製做大小；缺點：要切圖；

以上。。。。