CSS网页设计实例:商旅网首页的标签切换_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; }

欢迎大家阅读《CSS网页设计实例:商旅网首页的标签切换…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)