从后向前写布局
ul class="tab"
li class="one"a href="index.php" class="on"span城市首页/span/a/li
lia href="kAAE.php"span房屋租售/span/a/li
lia href="kAAI.php"span招聘求职/span/a/li
lia href="kAAk.php"span同城活动/span/a/li
lia href="kAAU.php"span家政服务/span/a/li
lia href="kAAt.php"span同城寻缘/span/a/li
lia href="kAAs.php"span二手市场/span/a/li
lia href="kAAh.php"span车辆买卖/span/a/li
lia href="kAAO.php"span学习培训/span/a/li
/ul
class = one 部分作为第一个TAB的特殊处理;
class = on 作为选中状态;
开写CSS部分:
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)由于比较简单,我就不写注释了;
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
用到的图片:
效果:
(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]