CSS模拟制作的techweb网站导航特效代码
用CSS代码，模拟制作techweb网站导航，你需要吗？效果还和真的差不多呢！[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">k"e3c+} `x4T@-P
<html xmlns="http://www.w3.org/1999/xhtml">#G*SR7Ai#H-o U r
<head> M2O&|7I j ^
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />@7| caK3Co
<style type="text/css">} i&zrW$sD
<!--r MF SE
#siteNav {7s,|H@@N(fN
clear: both;|Z i9K!ee8} Z.A
float:left;
width:750px;
padding-left: 1px;'{ H*lC c o w&YL9U
background: #fff;
font-size:12px;!z/i ],f eo h*a
font-weight: bold;
line-height:normal;
border-bottom:2px solid #84B0C7;
voice-family: "\"}\""; ~3D#L R2G,|\M
voice-family: inherit;4d X/E+}1` Z)|
width: 749px;
} _&B(D ] G9fH
#siteNav ul {
margin:0;
padding:0;
list-style:none;
}
#siteNav li {
display:inline;;VR K Py-u@2[kN
margin:0;
padding:0;
}
#siteNav a {2e)dG,S1|~9x-z
float:left;
background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;P%B Q4KLD
text-decoration:none;D|1])R's)^
}H Rz[@ V j
#siteNav a span {m(@h y[$Z3rb
float:left; ~k:KTW P6^F Jw4S
display:block;R2d4f'd}
background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;
padding:5px 11px 4px 5px;
color:#036;)T/m)j O E,~6X
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#siteNav a span {!]5~+i-x6f7J N[(i$l
float:none
}
/* End IE5-Mac hack */
#siteNav a:hover span {] F m6WG%[
color:#036;
}2?VJ7l+@ x9D @
#siteNav a:hover {
background-position:0% -42px;
}
#siteNav a:hover span {5X!G vSLH Z
background-position:100% -42px;
}
#siteNav #sel a {
background-position:0% -42px;
}\j _ du.W
#siteNav #sel a span {*KU!CNL O?%a
background-position:100% -42px;'U@"OZ#b)@%f/m
}&q|7y _$\
-->*j6l P#v)v%{
</style>Jg7D%|7m
<title>·网络之都·官方论坛‖css预览</title>
</head>
<body>
<div id="siteNav">-eO py'DCfO1U0\!P]5Z
<ul>{!]:j'F9K&{$~
<li id="sel"><a href="#"><span>首页</span></a></li>4w?P pJ S nk
<li><a href="#"><span>资讯</span></a></li>#] P)Ru a R.x
<li><a href="#"><span>人物</span></a></li>v cSW6Op EzCd
<li><a href="#"><span>管理</span></a></li> p][zh},dX~p
<li><a href="#"><span>经营</span></a></li>4Lg%x'qq4x
<li><a href="#"><span>财经</span></a></li>M2q j3F$o} ]*` n7G
<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>:],Zb j(\_ M
<li><a href="#"><span>评论</span></a></li>6p&b3]{)r4E P(b
<li><a href="#"><span>博客</span></a></li>
<li><a href="#"><span>老友记</span></a></li>9g$F9T!Jf q@!d
<li><a href="#"><span>滚动</span></a></li>
<li><a href="#"><span>搜索</span></a></li>
<li><a href="#"><span>WAP</span></a></li>
</ul>#\9@V1]9R zgH
</div>
</body>
</html>[/code]效果预览：[color=#0000ff][url=http://webclub.net.cn/data/071008/css.htm]http://webclub.net.cn/data/071008/css.htm[/url][/color] 网页打不开- -
看不到效果 还在匈牙利主机上,忘了转过来了Ct;E|D Oj \n
现在已经好了
页:
[1]