解決初學者的小問題;

　　我們平時在寫網(wǎng)頁的時候經(jīng)?？吹絻蓚€超鏈接中間會存在一個小豎線，如下圖：

　　問：如何實現(xiàn)

　　可以給你講三種方法;

　　第一種：邊框實現(xiàn)法

　　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，還得計算距離上面的距離，難搞奧!!!那這個怎么辦呢?莫慌我來告訴你怎么搞定!

　　第二種：背景圖片實現(xiàn)法

　　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就搞定了是不是很厲害的亞子

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

　　第三種：手寫實現(xiàn)法

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