techweb导航栏代码
演示地址:/codedemo/techdemo.html
CSS代码
<style type="text/css">
<!--
#siteNav {
clear: both;
float:left;
width:750px;
padding-left: 1px;
background: #fff;
font-size:12px;
font-weight: bold;
line-height:normal;
border-bottom:2px solid #84B0C7;
voice-family: "\"}\"";
voice-family: inherit;
width: 749px;
}
#siteNav ul {
margin:0;
padding:0;
list-style:none;
}
#siteNav li {
display:inline;
margin:0;
padding:0;
}
#siteNav a {
float:left;
background:url(tableft.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#siteNav a span {
float:left;
display:block;
background:url(tabright.gif) no-repeat rightright top;
padding:5px 11px 4px 5px;
color:#036;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#siteNav a span {
float:none
}
/* End IE5-Mac hack */
#siteNav a:hover span {
color:#036;
}
#siteNav a:hover {
background-position:0% -42px;
}
#siteNav a:hover span {
background-position:100% -42px;
}
#siteNav #sel a {
background-position:0% -42px;
}
#siteNav #sel a span {
background-position:100% -42px;
}
-->
</style>
XHTML部分:
<div id="siteNav">
<ul>
<li id="sel"><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>资讯</span></a></li>
<li><a href="#"><span>人物</span></a></li>
<li><a href="#"><span>管理</span></a></li>
<li><a href="#"><span>经营</span></a></li>
<li><a href="#"><span>财经</span></a></li>
<li><a href="#"><span>技术</span></a></li>
<li><a href="#"><span>产品</span></a></li>
<li><a href="#"><span>网络</span></a></li>
<li><a href="#"><span>电信</span></a></li>
<li><a href="#"><span>评论</span></a></li>
<li><a href="#"><span>博客</span></a></li>
<li><a href="#"><span>老友记</span></a></li>
<li><a href="#"><span>滚动</span></a></li>
<li><a href="#"><span>搜索</span></a></li>
<li><a href="#"><span>WAP</span></a></li>
</ul>
</div>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。