|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
破洛洛文章简介:CSS网页计划实例:商旅网首页的标签切换.
上个月的项目了。。。标签切换有良多办法能够完成,这里贴一段我团体很喜好用的代码:
<ulclass=“tabmenu”>
<liclass=“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:#c6d9f6url(“un_tabmenu.gif”)no-repeat00;}
.tabmenuli{float:left;display:inline;width:132px;height:0;overflow:hidden;padding-top:37px;cursor:pointer;}
.tabmenuli.menu_flt{background:url(“un_tabmenu.gif”)no-repeat0-37px;}
.tabmenuli.menu_hotel{background:url(“un_tabmenu.gif”)no-repeat-132px-37px;}
.tabmenuli.menu_pkg{background:url(“un_tabmenu.gif”)no-repeat-264px-37px;}</p>
当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。 |
|