捌玖网络工作室's Archiver

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

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

用CSS代码,模拟制作techweb网站导航,你需要吗?效果还和真的差不多呢![code] &w6ke6aYrf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
H$P C]$U d <html xmlns="http://www.w3.org/1999/xhtml">
w] OU)w9RM T.|ji <head>4vV_ ?*y},T\
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />o-U,T(B U7H!L7WI
<style type="text/css">+A+U0c7o'ck
<!--
F#aF ?*eI3T #siteNav {3]+F|!Y@4ZN3as
clear: both;
Q7p9e0J)^l1} float:left;
oN]U9L width:750px;pI(@%`/\8V_
padding-left: 1px;
UB:M&Fc+hi4V background: #fff;JgqqY/u
font-size:12px;+`'bSg ds1NRJ
font-weight: bold;
'?%t[?w line-height:normal;xY+P$_m)c.|sd,q+i
border-bottom:2px solid #84B0C7;
t3^WT\6P"y voice-family: "\"}\"";X4|5[ ][ss@v
voice-family: inherit; D8G9M Y'f mMU |+e
width: 749px;&[N:X8^1B ZD/y+l
}2u2rv/x ?:r
#siteNav ul {VY_.r;j5l
margin:0;v(y_9J Y3A
padding:0; z o"H%d|/Zn$b6m |-]
list-style:none;
n_'S:@"\?7tN }
(_*d G{7}c~ #siteNav li {0X7qpa7`0e
display:inline;yEg)oX\_$`
margin:0;
"DtvY$oL3} padding:0;
q0k*Qr4]-cP }8I5{wB#V.bk
#siteNav a {
Nq(iv8E;xl})Y float:left;
o!UIK)|2f background:url(http://webclub.net.cn/data/071008/cssbg1.gif) no-repeat left top;
I5e v,`lu margin:0;5b)M?,EEh&n6G
padding:0 0 0 4px;)[m'Q|/h4G~Q
text-decoration:none;U4g1y[\,jBg
}
(y$J;`L tA[w #siteNav a span {
A6w3\E"u}5_$q+H float:left;
@"l U e H&?!Rw2Re display:block;
,?jm$O9`:~ eS background:url(http://webclub.net.cn/data/071008/cssbg2.gif) no-repeat right top;6K |Z9l$Pg }3|0{
padding:5px 11px 4px 5px;2rA9w,aL
color:#036;S M~%?)l:Y
}Mp&|g@M@:yN
/* Commented Backslash Hack hides rule from IE5-Mac \*/os N,K'G"zo"WW']
#siteNav a span {
[`~+W6u0M float:noneij C/xp%p4U|!id3xb
}b![pC+c:iEY
/* End IE5-Mac hack */pp.^|!m/w;d4Ktw:t
#siteNav a:hover span {
"utX@m#w/I A1U&k color:#036;k'[+n(z0KT K8p"o6\
}U(Jua0aT3wG$F
#siteNav a:hover {
w%]f(ix background-position:0% -42px;yONO;z&yvgv.j0~3vf:z
}
2H?-{[ {B8Y0uG(V #siteNav a:hover span {
T8vLEM*h d1b@q background-position:100% -42px;
5Z_"cn nE6_ }
j@~ ZS6k*g(z2Q)@| #siteNav #sel a { a Z}Jp-s
background-position:0% -42px;3M$n+|V!NS'K+c J
}%@1{M8D^a;TB:Z V
#siteNav #sel a span {e r W7J-\3]9l
background-position:100% -42px;$@1c f;P)Y,_dvP[
} [xz7X/La e?
-->Iy+Y7?4j'ET
</style>}s3R }d} Y)t.V ]!W
<title>·网络之都·官方论坛‖css预览</title> mt*M*Juq{T-w
</head>
/[SU6KaL)XvX&z!] <body>
DjHI6bK%u#R%? t <div id="siteNav">D&_MPW'D*{ Lb
<ul>V y&R)IPMH XNh
  <li id="sel"><a href="#"><span>首页</span></a></li>W:p IM^2mZ
  <li><a href="#"><span>资讯</span></a></li>7R(s%w9qM
  <li><a href="#"><span>人物</span></a></li>.YmQP|*j n7\
  <li><a href="#"><span>管理</span></a></li>pK$ufj6i
  <li><a href="#"><span>经营</span></a></li>;v*m{ k+V_;`!B.V
  <li><a href="#"><span>财经</span></a></li>:t~IET!E5Bh
  <li><a href="#"><span>技术</span></a></li>
dG'UT1R-po+A v Wq Rs y   <li><a href="#"><span>产品</span></a></li>
j6e B9uoD   <li><a href="#"><span>网络</span></a></li>
)TA0t(B0`Ci7G,O   <li><a href="#"><span>电信</span></a></li>4l$M1ith3f
  <li><a href="#"><span>评论</span></a></li>
y/W1bm9u8U!u(mM8lF   <li><a href="#"><span>博客</span></a></li>B-a:b ^?(|5{I-t
  <li><a href="#"><span>老友记</span></a></li>GW*DIcM2E
  <li><a href="#"><span>滚动</span></a></li>5[H#I6BN
  <li><a href="#"><span>搜索</span></a></li>
5CKrFyW!S.`U[   <li><a href="#"><span>WAP</span></a></li>X5H]&Z%L"Z.a2y
</ul>_Jv _/m'Q(d
</div>
} o{(m3e </body>,roYWaE$e?gD
</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

网页打不开- -
X I~H,DXX4x 看不到效果

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

还在匈牙利主机上,忘了转过来了0Ke0}M5i A
现在已经好了

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


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