斜角滑動門導航條(DIV+CSS)

2020-03-24 17:15:43

字體：大中小

來源：轉載

供稿：網友

斜角導航條看上去立體感比較強，但實現起來比較麻煩；這是前幾天寫的一個測試代碼，實現時，本來想用簡單的圖片加負數來實現；但GIF圖片對半透明的效果無法有很好的支持；所以一邊寫代碼，一邊在改圖，圖片改的比較亂，CSS也沒有優化；但效果出來了；寫出來和大家分享一下；首先說一下，要實現的目標：滑動門，要兼容每個TAB可能出現的寬度（字數）不統一的問題；
后臺程序實現起來簡單，主要是標記TAB是否被選中；
瀏覽器的兼容以及放在較粗糙的代碼環境中，有很好的表現；
始作了，我先用FW畫了一個有點立體感的導航條，基本就是要實現的目標從后向前寫布局 ul
li a href="index.php" span 城市首頁 /span /a /li
li a href="kAAE.php" span 房屋租售 /span /a /li
li a href="kAAI.php" span 招聘求職 /span /a /li
li a href="kAAk.php" span 同城活動 /span /a /li
li a href="kAAU.php" span 家政服務 /span /a /li
li a href="kAAt.php" span 同城尋緣 /span /a /li
li a href="kAAs.php" span 二手市場 /span /a /li
li a href="kAAh.php" span 車輛買賣 /span /a /li
li a href="kAAO.php" span 學習培訓 /span /a /li
/ul html' target='_blank'>class = one 部分作為第一個TAB的特殊處理；
class = on 作為選中狀態；開寫CSS部分：由于比較簡單，我就不寫注釋了； style
.tab{float:left; font-size:12px; line-height:1.8}
.tab li{display:inline;}
.tab li a{background:url(/articleimg/2008/07/5969/02.gif) no-repeat;float:left;text-decoration:none;}
.tab li a span{ display:block; background:url(/articleimg/2008/07/5969/02.gif) no-repeat; padding:5px 10px 5px 20px;}
.tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none}
.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;}
.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}
.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;}
.tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;}
.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}
/style 用到的圖片：本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：書寫高效的樣式表(CSS)的方法

下一篇：CSS 框模型概述