CSS网页设计实例:商旅网首页的标签切换


上个月的项目了。。。标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码:

<ul class=“tabmenu”>
<li class=“menu_flt”>机票</li>
< li>酒店</li>
< li>旅游度假</li>
< /ul>

对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容,而且有利于SEO。背景图片分两块:on和off效果,合并到一起,如图所示:

其中整个模块的底部圆角也合并到了图片上,本段代码不包括,请自行忽略~~~

1.给<ul>加上面那条背景,默认都为off状态,再分别给每个<li>加对应的on样式。通过js判断哪个菜单高亮,省略<a>标签;
2.li的高度设为零,这样html中的文字就不会显示了,再padding-top,把高度补回来。个人不推荐text-indent: XXXXem,有<a>时会看到焦点框已经超出屏幕。

附样式:

.tabmenu { width: 396px; height: 37px; background: #c6d9f6 url(“un_tabmenu.gif”) no-repeat 0 0; }
.tabmenu li { float: left; display: inline; width: 132px; height: 0; overflow: hidden; padding-top: 37px; cursor: pointer; }
.tabmenu li.menu_flt { background: url(“un_tabmenu.gif”) no-repeat 0 -37px; }
.tabmenu li.menu_hotel { background: url(“un_tabmenu.gif”) no-repeat -132px -37px; }
.tabmenu li.menu_pkg { background: url(“un_tabmenu.gif”) no-repeat -264px -37px; }

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3