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">f+|U i0}T(}6F
<html xmlns="http://www.w3.org/1999/xhtml">-IbvX[Q
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">wpQ R+r9g
<!--V*FN S8|Y j%F1o
#siteNav {7S)V{N W%Ur
clear: both;Kr#hw:r
float:left;Nbs*x6n'Y(b Q)y*m ^
width:750px;
padding-left: 1px;jk#c#\ F;DLuH V
background: #fff;
font-size:12px;
font-weight: bold;
line-height:normal;u { V/j]4e D9B
border-bottom:2px solid #84B0C7;E?"`G(T7WY k J
voice-family: "\"}\"";
voice-family: inherit;
width: 749px;
}
#siteNav ul {JB4h6}{I{ C O
margin:0;
padding:0;
list-style:none;;JU Y?!z}0}8B:m4\si v%v
}
#siteNav li { z Y+D2V6P0\.y*a;o't
display:inline; N D&m:C1mC
margin:0;
padding:0;7z ~3})ings4^
}
#siteNav a {#K:Kle9A'S HL
float:left;
background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;.u/mV(T X3y"a|
margin:0;/ex;R:E-] O t
padding:0 0 0 4px;a%J1?A qM L
text-decoration:none;
} G Vb%_d`9og
#siteNav a span {[,h$i$| El
float:left;
display:block;
background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;,k:^\\} j Z*^$m
padding:5px 11px 4px 5px;
color:#036;
} g9K!j i0~Ss0\+P
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#siteNav a span {
float:none
} g(NW]GrH
/* End IE5-Mac hack */4e1d dr/f ad
#siteNav a:hover span {
color:#036;
}8}p8w-m;\&C*Q/g;a
#siteNav a:hover {
background-position:0% -42px; f6\'h D?1k2|?A
}
#siteNav a:hover span {
background-position:100% -42px;
}9AI,B k2Z-v s d
#siteNav #sel a {
background-position:0% -42px;m,q'\)a1`H6A
}
#siteNav #sel a span {
background-position:100% -42px;*fs ekeX]Xf
}
-->
</style>
<title>·网络之都·官方论坛‖css预览</title>
</head>T.I*BF&l$G-]G
<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>+hE ~B:@
<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>7B4X/\(~enW6E,i
<li><a href="#"><span>产品</span></a></li>*gFZ4a` N
<li><a href="#"><span>网络</span></a></li>
<li><a href="#"><span>电信</span></a></li> `$b9~1kJ4y:s&Ep
<li><a href="#"><span>评论</span></a></li>+ia+A?vg `jl D
<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>6L6^.V vT G[2Z
<li><a href="#"><span>WAP</span></a></li>$g v)W%sh:Pt0kQ |
</ul>
</div>6h)b.F6?|8E!f#a
</body> cC1AnF @AVe
</html>[/code]效果预览：[color=#0000ff][url=http://webclub.net.cn/data/071008/css.htm]http://webclub.net.cn/data/071008/css.htm[/url][/color] 网页打不开- -
看不到效果 还在匈牙利主机上,忘了转过来了#B.`$i5Dq,ED;gD
现在已经好了
页:
[1]