用CSS代码,模拟制作techweb网站导航,你需要吗?效果还和真的差不多呢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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(http://www.knowsky.com/upfiles/20071007/20071007102903_01.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#siteNav a span {
float:left;
display:block;
background:url(http://www.knowsky.com/upfiles/20071007/20071007102909_02.gif) no-repeat right 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>
<title>Demo</title>
</head>
<body>
<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>
</body>
</html>