困擾初學(xué)者的小豎線

　　解決初學(xué)者的小問(wèn)題;

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

　　問(wèn)：如何實(shí)現(xiàn)

　　可以給你講三種方法;

　　第一種：邊框?qū)崿F(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結(jié)構(gòu)

<div>

<a href="#">首頁(yè)</a>

<a href="#" class="last">首頁(yè)</a>

</div>

　　這個(gè)方法有點(diǎn)小難搞，得控制margin，padding，還得計(jì)算距離上面的距離，難搞奧!!!那這個(gè)怎么辦呢?莫慌我來(lái)告訴你怎么搞定!

　　第二種：背景圖片實(shí)現(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結(jié)構(gòu)：

<div>

<a href="#">首頁(yè)</a>

<a href="#" class="last">首頁(yè)</a>

</div>

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

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

　　第三種：手寫(xiě)實(shí)現(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結(jié)構(gòu)：

<div>

<a href="#">首頁(yè)</a>

<span>|</span>

<a href="#">首頁(yè)</a>

</div>

　　且慢，請(qǐng)聽(tīng)我說(shuō)，自己手寫(xiě) “|” 相對(duì)于前兩種方式來(lái)說(shuō)更方便一些，前兩種方式最后一個(gè)元素的 “|” 都需要單獨(dú)去掉的，自己手寫(xiě)不需要就可以不寫(xiě)，前兩種方式還會(huì)涉及到選擇器的權(quán)重問(wèn)題，如果你的權(quán)重不夠可能導(dǎo)致最后一個(gè)沒(méi)有的去不掉噢。

　　更多關(guān)于web前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。