解決初學者的小問題;

　　我們平時在寫網頁的時候經常看到兩個超鏈接中間會存在一個小豎線，如下圖：

　　問：如何實現

　　可以給你講三種方法;

　　第一種：邊框實現法

　　css樣式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

font-size: 12px;

border-right: 1px solid #000;

margin-top: 10px;

}

.last {

border-right: none;

}

</style>

　　html結構

<div>

<a href="#">首頁</a>

<a href="#" class="last">首頁</a>

</div>

　　這個方法有點小難搞，得控制margin，padding，還得計算距離上面的距離，難搞奧!!!那這個怎么辦呢?莫慌我來告訴你怎么搞定!

　　第二種：背景圖片實現法

　　css樣式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

background: url(line.jpg) no-repeat right center;

}

.last {

background: none;

}

</style>

　　html結構：

<div>

<a href="#">首頁</a>

<a href="#" class="last">首頁</a>

</div>

　　這種方法就沒有那么多margin，padding 了，只需要一個padding就搞定了是不是很厲害的亞子

　　如果你覺得這種方法已經很好了，那么我告訴你還有哦。

　　第三種：手寫實現法

　　css樣式：

<style>

* {

margin: 0;

padding: 0;

}

div {

height: 40px;

background: #999;

font-size: 12px;

line-height: 40px;

}

a {

text-decoration: none;

color: #000;

float: left;

padding: 0 10px;

}

span {

float: left;

}

</style>

　　html結構：

<div>

<a href="#">首頁</a>

<span>|</span>

<a href="#">首頁</a>

</div>

　　且慢，請聽我說，自己手寫 “|” 相對于前兩種方式來說更方便一些，前兩種方式最后一個元素的 “|” 都需要單獨去掉的，自己手寫不需要就可以不寫，前兩種方式還會涉及到選擇器的權重問題，如果你的權重不夠可能導致最后一個沒有的去不掉噢。

　　更多關于web前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。