捌玖网络工作室's Archiver

admin 发表于 2007-10-8 21:56

CSS模拟制作的techweb网站导航特效代码

用CSS代码,模拟制作techweb网站导航,你需要吗?效果还和真的差不多呢![code] A4TtE`7mu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">+` _AX6s8aQ:T8a:Xpf-?6G
<html xmlns="http://www.w3.org/1999/xhtml">t0lP9f1NB\XAB
<head>#A Q{+f$@P0B
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
0kMuSx-j8H <style type="text/css">
m+V{-K*] ? <!--[4b K3|b*R4\*KH*\
#siteNav {
8G6E F'x(_VT clear: both;
Acoxo4b+g float:left;
'VH;[ S [+x3^ width:750px; }`RQ C6PZC
padding-left: 1px;
o.~*k k0F5D.d OF*}x0\W background: #fff;'|!|gk6M*R ?0N
font-size:12px;
{~sA2eeX` U font-weight: bold;mR$[s`6|1s
line-height:normal;
#c6[!c+W9F border-bottom:2px solid #84B0C7;-\7YA+mW vg e
voice-family: "\"}\"";&Vn0RT5KGXL8Y
voice-family: inherit;
0h?(h CU(KG wa width: 749px;)D4T@l)z:P
}
-k'Z X)KH.r;` #siteNav ul {
h#im7e~ j&I4a margin:0;2Qu,D'|'~
padding:0;
q(f:` b^)yv list-style:none;x~Z\IH1A0w k
}
2?|5T,oF%h)a #siteNav li {Nj @zL%d^ S)Rf
display:inline;
rWW'X`6x"{ DV margin:0;qD)l7xj'M(|
padding:0;"k2r,KJ%K-EI~(O
}%NrRi Kk
#siteNav a {)gK`,\F2f3u0T
float:left;$F(W)N*U]U5Q)q T t
background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;
xc x8A3B*_"^U margin:0;
\!r5|:y2@ `y%{3I:D padding:0 0 0 4px;
en(b;] CFE c text-decoration:none;
an} U @x#]Q[*O }
5p*a!O/T-Fv!PKm #siteNav a span {
7RM4A*As^8yQ-}c%@ float:left;G7f!Z*bBh'X%c8Z
display:block;I,K*F%?%]v#aF
background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;9y8?&c b#qGW
padding:5px 11px 4px 5px;
f3qi!~!W9Z1YF color:#036;
k'Y$n.J9@yq r(H*v2B)s };Q\;`U x]of
/* Commented Backslash Hack hides rule from IE5-Mac \*/F%D,H)~Fw}0?-|
#siteNav a span {W }0OV5Z B;W
float:none
b4qx5?0rwbV3t*{0HW }%c,L F5m3xw
/* End IE5-Mac hack */Z v] CZbA
#siteNav a:hover span {5V0bZ H#?x
color:#036;RT Z@a!q
}S?4~S TL4{-^
#siteNav a:hover {x6c3ouw~S f]
background-position:0% -42px;
I0s'kAXV$q:_y7Sa }
u(Ef E-f mv #siteNav a:hover span {
t&`1e_v B2C;G,| K\ background-position:100% -42px;
l"D*zM9F+L0B }
+o}7X6R0Ph #siteNav #sel a {
EVS8D6[\%F!pK0f background-position:0% -42px;
Qx9A9k$` } xq1H0~ LoX wi
#siteNav #sel a span {hLEGOp
background-position:100% -42px; r)M'J }'lh\H[
}?|F*K:e/w2f%B)G7rS
-->
k+bb%[*^.GWfX </style>
mOg,|/acB <title>·网络之都·官方论坛‖css预览</title>
d\K"c-K)\f3d!D%z+J </head> lYD.}y_3sL@~
<body>
.O^}-W?RMX <div id="siteNav">
~:\7QbjVL <ul>M#II9}#Fb'Z*[ out
  <li id="sel"><a href="#"><span>首页</span></a></li>2pk;zd9Y"y `
  <li><a href="#"><span>资讯</span></a></li>3d4hX5z1I!? J-t
  <li><a href="#"><span>人物</span></a></li>5xIBc!T{/gu
  <li><a href="#"><span>管理</span></a></li>s)db(r/[0S m9|z!~,T D
  <li><a href="#"><span>经营</span></a></li>Lm5Q? Xq0q{
  <li><a href="#"><span>财经</span></a></li>
G#u'?/o(JJ/w   <li><a href="#"><span>技术</span></a></li>wMNh N
  <li><a href="#"><span>产品</span></a></li>0u?i4`9G/Y$m5R;dY0Ci
  <li><a href="#"><span>网络</span></a></li>8f9t@7hJ.oH C3R6]5S-d
  <li><a href="#"><span>电信</span></a></li>Q\I%Q8k?'^)D
  <li><a href="#"><span>评论</span></a></li>v2TSo1}N)XB4er
  <li><a href="#"><span>博客</span></a></li>(]/p2k3eo[
  <li><a href="#"><span>老友记</span></a></li>J6])|*K O2^G|
  <li><a href="#"><span>滚动</span></a></li>
1Zp] i(n1_%D.RX   <li><a href="#"><span>搜索</span></a></li>
?;[2].ln }$_3QO   <li><a href="#"><span>WAP</span></a></li>
qj1FdJ </ul>
JS'{ xi(d.UR </div>M(x-lH6{T\
</body>
&S.I nt P@ U$w+{` </html>[/code]效果预览:[color=#0000ff][url=http://webclub.net.cn/data/071008/css.htm]http://webclub.net.cn/data/071008/css.htm[/url][/color]

xibaobaoa 发表于 2007-11-12 14:11

网页打不开- -
:C:UZM+I;M 看不到效果

admin 发表于 2007-11-12 14:50

还在匈牙利主机上,忘了转过来了
2v5| Q'e!] Y)Z 现在已经好了

页: [1]
【捌玖网络】已经运行:


Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.