解決初學(xué)者的小問題;
我們平時(shí)在寫網(wǎng)頁的時(shí)候經(jīng)常看到兩個(gè)超鏈接中間會(huì)存在一個(gè)小豎線,如下圖:
問:如何實(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="#">首頁</a>
<a href="#" class="last">首頁</a>
</div>
這個(gè)方法有點(diǎn)小難搞,得控制margin,padding,還得計(jì)算距離上面的距離,難搞奧!!!那這個(gè)怎么辦呢?莫慌我來告訴你怎么搞定!
第二種:背景圖片實(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="#">首頁</a>
<a href="#" class="last">首頁</a>
</div>
這種方法就沒有那么多margin,padding 了,只需要一個(gè)padding就搞定了是不是很厲害的亞子
如果你覺得這種方法已經(jīng)很好了,那么我告訴你還有哦。
第三種:手寫實(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="#">首頁</a>
<span>|</span>
<a href="#">首頁</a>
</div>
且慢,請(qǐng)聽我說,自己手寫 “|” 相對(duì)于前兩種方式來說更方便一些,前兩種方式最后一個(gè)元素的 “|” 都需要單獨(dú)去掉的,自己手寫不需要就可以不寫,前兩種方式還會(huì)涉及到選擇器的權(quán)重問題,如果你的權(quán)重不夠可能導(dǎo)致最后一個(gè)沒有的去不掉噢。
更多關(guān)于web前端培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。