上一篇
下一篇
您的位置

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

酷酷
20
评论:0
2017/7/20

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

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

本文地址
更多>>网友评论
发表评论
网站首页  | 关于本站  | 联系我们  | 积分说明  | 问题建议