<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" z9 T0 `) L( g; }; k; h
"http://www.w3.org/TR/html4/loose.dtd">- S. z( I" p4 S
<html>+ C& z8 j0 _. c7 `$ |9 G1 d
<head>. Q7 h. v/ U* a2 p/ `2 e3 i/ _
<meta http-equiv="Content-Type" c>9 w# P$ q, N1 d- A0 Q2 o3 X
<title>www.cy286.cn</title>
# h2 x& p- c; w; J2 r' q2 t<style type="text/css">
4 D( l' X& E" ^$ ^<!--8 b8 r$ S( e6 r) M/ u
3 A" H+ |7 T4 G9 j/ _0 V; f*{margin:0;padding:0;border:0;}
/ u0 F9 P+ h0 s* d8 S$ tbody {
9 v4 v1 m' U6 d! C; d2 U) afont-family: arial, 細明體, serif;
& h6 n* A4 t& G* z7 X4 A- U7 v& ^9 | font-size:12px;
, U, a% ^+ }& e( a+ Y: u; b}
2 R% _5 e# p/ ~& q3 Y& B% {
. a4 e) } A) T2 [) R, J
$ g6 f' X. Q! A6 H+ e* e+ q& p#nav {1 E- F8 y+ A) X: r5 ^/ W
line-height: 24px; list-style-type: none;
z/ `7 p& Z \/ z* a0 J /*定義整個ul菜單的行高和背景色*/
( f; c# { e% J F) s}
& d; U- }7 t6 E* S( b' Y# k" E7 I. K4 }
#nav a {6 H0 {5 s& X& j$ v" z* h: P
display: block; width: 180px; text-align:center;
0 P0 k3 H4 g. _1 T/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/
" X5 {# z: c, M2 z A}3 [; z# X! y7 d2 t
; O7 e6 R" y! |# }8 g
#nav a:link {
9 B2 p' n$ v1 L1 Acolor:#666; text-decoration:none;
& H3 u* Z) \% L( |2 v7 k}" W" N! u4 n& H9 v/ c2 Z
#nav a:visited {" y3 P% H+ B3 d5 U( u2 |
color:#666;text-decoration:none;
7 Q5 ~$ i; |5 M# U4 {' T+ l}: u3 ^' Q& M5 C
#nav a:hover {
% z6 K- C7 I( l$ n! ?color:#FFF;text-decoration:none;font-weight:bold;9 h. U7 c' |- \
} v6 L. _; M3 m/ |6 {
/*上面三個定義了根鏈接的鏈接樣式，bold表示指向時加粗字體*/) m* j8 R" G% C' `+ ]$ u; A# H" K
: `9 u) u; D% V& e$ P: B#nav li {7 m" k1 p2 Z: ]6 _+ _
width: 80px;background:#CCC;9 Y1 e# `: R/ R
/*float：left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/
, i, P( ~: G* M) v' y, B}
& z% q0 D0 s b5 |#nav li a:hover{
1 ?8 h) D5 K$ M2 i7 {background:#999; P( `+ o, L" x6 \+ \. k
/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/
- |6 S, Y5 F: y7 O5 {3 D+ Z" `9 ~$ ]; `}+ U/ Q7 q$ N2 Z y: m1 ]
#nav li ul {% ]0 s/ I9 X( F0 o
line-height: 27px;+ ]4 p* L9 `+ |( [/ ~; S4 }$ o) B
list-style-type: none;4 k4 ~1 p9 g: O
text-align:left;' I! V7 n# E2 ^& u2 z
left: -999em;
6 _" G; V: r, q7 x4 Rwidth: 180px;
8 T* P9 Q1 J8 i. jposition: absolute;
9 i5 n& ~& J2 h6 R2 Umargin-left:180px;& X) n# j1 z6 R- u* a: a
margin-top:-25px$ u% x2 u- l! v( O0 t
/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來
- X. L( S+ R- m' Q6 W width=為ul塊的寬度，如果設置比li裡的寬度大，將出現二級鏈接橫排*/
/ y3 O. Y* @& ~}
' N: D& Q# M. d5 J#nav li ul li{6 e% N8 `$ Y, h+ e
float: left; width: 180px;
. [4 |: [: v* u) s, abackground: #F6F6F6; 0 R1 U' I- B5 h+ H& f
/*這是定義li內的ul內的li屬性，即二級鏈接的li的屬性,bg是li的背景色*/$ h+ |% b" p) h6 w$ G0 s' S
}- G5 h4 F/ H2 \- e
$ ?* b" [2 H% l5 C
0 V$ u ?4 P8 |6 G# n' T' O: V" @#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/
, S/ z# Z" u4 B, u5 T/ Tdisplay: block; width:160px;text-align:left;padding-left:20px;
) y, X; U6 X: q: w( ^- d/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/
/ C/ v; S* ^. q* G, \}
4 Y7 u u0 Y) B) M( y3 G4 z0 J' t$ _! ~
#nav li ul a:link {; B- n7 t0 { @2 E1 D% U K
color:#666; text-decoration:none;7 K5 `( n4 @2 `4 s2 u
}- `9 A! i0 j6 K. Z V! o8 J
#nav li ul a:visited {8 }! L. h: C7 e5 k1 b' `
color:#666;text-decoration:none;, }" t; [2 }/ f/ c2 D) G
}
" v( u2 o3 W# Q0 K: [0 t% t#nav li ul a:hover {* i. X, Y4 S6 j/ c3 ?
color:#F3F3F3;text-decoration:none;font-weight:normal;
. P+ ^7 v: G3 W5 Pbackground:#C00;
8 h4 K7 F$ \' `/ l/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/5 ?2 \8 I3 ]7 R9 H3 {
}3 A. z; |& I! {. k- s/ a
/*上面三個是定義二級鏈接的樣式*/
1 \# C7 y7 V1 y3 G#nav li:hover ul {
7 f& ~7 H$ O( n3 Hleft: auto;# B2 M5 ~9 o; u! ]& g
}
2 |6 [; O' b/ A `" v# d#nav li.sfhover ul {
) f. @2 s3 |7 p p% wleft: auto;
) t/ ^% D4 x6 J7 k! {}
& I, H$ a- ~% _7 Q, p( u#content {4 w4 c2 s4 i5 |9 S2 `
clear: left;
+ J, U6 d% K4 c6 m}* }$ V' ]; H- _4 [- x. o. r
8 j* I! |7 ]0 h4 O- o
% S* | A' l! q8 K- a5 r* _, C$ n
-->2 y1 R1 J' V* S3 ~4 _/ M
</style>+ T6 Y- }6 a3 O5 O! u( T
+ i" P4 q; @/ B9 s0 k7 p$ I
<script type=text/javascript><!--
) c4 _; } e/ X( Zfunction menuFix() {/ f7 a( C0 h/ ^
var sfEls = document.getElementById("nav").getElementsByTagName("li");
/ Y2 r2 P6 B! H3 dfor (var i=0; i<sfEls.length; i++) {1 x- Q$ _6 X8 p- Q4 f8 u. H
sfEls.onmouseover=function() {
9 _1 _5 i: w; n8 }4 O% Y1 V, k this.className+=(this.className.length>0? " ": "") + "sfhover";
1 n8 u; Q* }0 G& r% R# E8 h }
5 \4 `4 v7 \& Y+ ~" u) m" j2 N sfEls.onMouseDown=function() {
4 z! [/ F: d+ _, P/ _4 G" N this.className+=(this.className.length>0? " ": "") + "sfhover";
' r( h# w" R$ V# ]& e }3 \ ]! c2 Q6 p. O2 {, q/ O
sfEls.onMouseUp=function() {1 _: Z& _& }; ?$ W
this.className+=(this.className.length>0? " ": "") + "sfhover";
: {( W% d0 q7 Q4 x }' }- n G5 Z2 ^- `6 S7 C
sfEls.onmouseout=function() {/ z h% J( L) V1 A6 ~
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), . i5 e2 S. {: T* X3 r
3 R) v) T0 i) }"");
' U( k4 j# z+ y0 s# z# I% l* K } V( l( R- x$ c# E6 ?" y5 ]
}
: i5 v" h! J0 @- s$ m}1 U8 L" h+ B. R [9 `/ @
window.onload=menuFix;
8 P+ i9 b* ?' a--></script>. v2 U1 f; j, A- h# S# }2 N s
! J6 ]* g% J1 N. V4 m9 G$ L
</head>
8 l8 A2 [$ y# ?/ f( @/ U4 n: @/ d. p5 s" f; c; @ D7 P
<body># T% [$ R, A2 T) C# e6 q% P
<ul id="nav">8 P E! X" t0 P o8 s
<li><a href="#">產品介紹</a>; `+ Q# u- a* g; F6 J
<ul>
, Q4 v: M$ d. |/ c2 S. ?, s. T# N<li><a href="#">產品一</a></li>
9 D) J$ C' ~* A# H4 I. A<li><a href="#">產品一</a></li>
/ X# q7 t( n. X0 K$ f8 E) M<li><a href="#">產品一</a></li>
4 V/ y+ c) a; c# i# I2 ~4 L& s<li><a href="#">產品一</a></li>4 d% X) N) }+ }# p
<li><a href="#">產品一</a></li>
4 K( e. q" J& }, j2 {2 U<li><a href="#">產品一</a></li>2 F3 K4 E( x; ]2 I9 f
</ul>- w8 H) Z) e6 j' b+ d
</li>+ y, x3 ^# p, |" [) Z% i
<li><a href="#">服務介紹</a>
7 b7 P1 C1 V& \9 T5 h4 r& F<ul>
4 j' y* u. `5 X, M<li><a href="#">服務二</a></li>
' B v' V. j+ G<li><a href="#">服務二</a></li>4 O6 n7 x6 j( v+ s
<li><a href="#">服務二</a></li>6 b! I/ F9 w/ ]" V# C" Z
<li><a href="#">服務二服務二</a></li>7 O4 G" K, [- _
<li><a href="#">服務二服務二服務二</a></li>
9 C4 g- Y$ L- \* N: R8 ^<li><a href="#">服務二</a></li>
2 ]9 b% q" t8 @ i" n2 I</ul>; i* M3 `: a$ s. x$ i
</li>
: l' q5 h! ~+ Z4 t' y: S ]1 k/ e<li><a href="#">成功案例</a>7 v, Y3 T/ E+ }3 e
<ul>5 T3 U% ]4 C% Z1 g2 m
<li><a href="#">案例三</a></li>' w( J* w$ U s$ x
<li><a href="#">案例</a></li>* J! | b( s9 `& n
<li><a href="#">案例三案例三</a></li>2 z+ g8 Z) Z K. O. U K
<li><a href="#">案例三案例三案例三</a></li>+ D5 ?( ~6 ^0 m& A' L
</ul>
) e4 `. [9 `+ Z) d- \7 Z6 \</li>) ?, O" S+ i- B5 I+ L- Q
<li><a href="#">關於我們</a>
+ G& v) t3 ?% V# l<ul># o3 r; N b' o
<li><a href="#">我們四</a></li>( [! g8 S, f+ T5 T7 P
<li><a href="#">我們四</a></li>* z6 g7 S3 r, g( c# g/ D
<li><a href="#">我們四</a></li>
! {; ^8 h) u& w<li><a href="#">我們四111</a></li>
: o. h$ i5 K5 @/ I s l</ul>
' }5 g' x7 u0 V</li>
# _3 _* s2 D% X i9 D
; A# L8 u4 I5 P7 L<li><a href="#">在線演示</a>, u: N; }$ X- D1 ]
<ul>" W* h; Q9 B# i* k' a, i
<li><a href="#">演示</a></li>
) I; Z1 E% ~( I1 F- r) Z& c<li><a href="#">演示</a></li>, s) `: K! H" t* G. s) p* g+ Z
<li><a href="#">演示</a></li>& a0 G4 ^8 X! x
<li><a href="#">演示演示演示</a></li>
% I7 W% a6 M, r% Q<li><a href="#">演示演示演示</a></li>
7 i$ m1 y: T G7 `- k* t$ `0 O/ E<li><a href="#">演示演示</a></li>
- ]' a% p# M" m. U! [7 t( P' ?4 Q<li><a href="#">演示演示演示</a></li>) U; z. p, l1 V8 g5 v
<li><a href="#">演示演示演示演示演示</a></li>
8 `8 {+ D% M5 n* N8 f# z</ul>) E d' W, @+ M8 z# I s$ Q0 c
</li>
$ {$ t7 W$ ^: L<li><a href="#">聯繫我們</a>
* q7 V! F! @: D& d. V* s8 C<ul>/ V# y0 F% y# ?+ z4 A* h
<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>9 y# J6 z7 J: T
<li><a href="#">聯繫聯繫聯繫</a></li>6 ~" L j( y0 Y+ o& b/ L. |
<li><a href="#">聯繫</a></li>
/ c4 \) v g! D. h/ q {4 m( \<li><a href="#">聯繫聯繫</a></li>
0 x* g \# x$ H/ g/ h<li><a href="#">聯繫聯繫</a></li>( I, R% z4 Q5 D8 a1 z, L1 K6 z
<li><a href="#">聯繫聯繫聯繫</a></li>3 }! N& ]' Y5 ]6 Z% N
<li><a href="#">聯繫聯繫聯繫</a></li>+ }6 H7 i: x" q6 Q5 z, \) X T
</ul>0 u- z& p3 _7 @: ]2 S7 j; t- Q
</li>
3 H9 i4 h. c: `1 V* i' `<li><a href="#">網站地圖</a></li>9 u1 z3 e6 V9 ], L9 u7 E& Y
</ul>
5 ^5 F" k& i, v</body>
+ o0 }6 c/ J3 m$ a</html> |
|
發表於 2007-8-24 14:38:54
提升卡
沉默卡
变色卡