快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-23

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

<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; }

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号