時(shí)間：2023-07-25 00:48:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-25 00:48:01 來源：網(wǎng)站運(yùn)營(yíng)
web前端導(dǎo)航欄小豎線三種實(shí)現(xiàn)方法：相信很多初學(xué)web前端的小伙伴在做導(dǎo)航欄的時(shí)候都有看到過下面圖中的效果，在不同的選項(xiàng)之間有一個(gè)小豎線分隔，那么你知道應(yīng)該如何才能夠?qū)崿F(xiàn)這種效果嗎？
在線咨詢
<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ì)算距離上面的距離，難搞奧?。?！<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就搞定了是不是很厲害的亞子<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)鍵詞：實(shí)現(xiàn),方法,導(dǎo)航
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
