<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
! t3 D5 p. g$ e9 V) G"http://www.w3.org/TR/html4/loose.dtd">
& j8 k2 o$ X/ s$ F0 T- k! U<html>
9 u$ y3 F- W4 l A s$ I<head>2 p! ~) g/ d. W6 \7 r' L
<meta http-equiv="Content-Type" c>7 ^( P3 c4 c0 u) @
<title>www.cy286.cn</title>; I, {' F1 a6 P0 y. s
<style type="text/css">. z% n3 }4 L# p- O: _: S$ z
<!--/ \, C6 V5 ]2 I* p U1 S
! n# r: U! E4 H8 f*{margin:0;padding:0;border:0;}
! e; ?+ L( N5 w8 u. H7 Ibody {' y& B# T; s; C
font-family: arial, 細明體, serif;1 d! u7 G( P/ X+ Q4 @+ e* G
font-size:12px;8 _0 I9 e6 `) `5 F
}
; O j3 y3 m3 i; }+ l- R/ a0 {9 j0 H" B( u3 L4 H: G! _
8 S$ p. ?0 I7 E, |+ U# c) I$ P# k
#nav {9 X/ r6 ?$ }& Y/ t$ H4 P
line-height: 24px; list-style-type: none;
7 i$ Z3 t8 L" l( }6 k7 U+ ^ /*定義整個ul菜單的行高和背景色*/
0 S3 O: q3 R" y1 Q/ K- @; }}
6 g4 g: v6 h) P5 ?) h0 n; w! L3 Q/ o2 r+ F( O2 G5 z
#nav a {
, e8 a7 }4 u# Rdisplay: block; width: 180px; text-align:center;+ @+ _( L8 |* J, `/ {0 z s
/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/
$ }' I! r; p7 F/ s& h}* _. u1 \/ w" B @& V2 _
! P9 j9 V; e2 y& c" g) p; T: {
#nav a:link {' t4 c5 L1 [/ `
color:#666; text-decoration:none;2 {# ^) b9 U3 W- D$ P0 ]& }
}
* p4 F. b0 I( }6 H; W- f/ K#nav a:visited {
- ?+ y( n4 K( A; _$ J' P: ^color:#666;text-decoration:none;
, M/ f7 i' U" ?+ c}
8 a6 q N6 Z, B E#nav a:hover {
) |5 O- z/ b: b$ ^% s8 D; ^color:#FFF;text-decoration:none;font-weight:bold;
/ o: r! f2 x' L; G2 D1 @' D! n}% d! ^6 O- {- l5 E
/*上面三個定義了根鏈接的鏈接樣式，bold表示指向時加粗字體*/: x y2 z" t( l( Q) [6 d
: z6 W3 M9 C; T#nav li {3 |' q. ] K' ~+ M
width: 80px;background:#CCC;
6 d. Y9 s% C% v/ l3 _$ ^( [/*float：left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/, p3 U+ Q( Y. N0 p
}+ k3 C( k$ v) K6 Y8 a( ?; K
#nav li a:hover{
- h( V& Q$ R4 G* t* Q2 _- Wbackground:#999; r1 \' z2 M/ _: P7 J$ C1 u# S7 M
/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/' ]( H, c- k2 Y9 `! d+ M% X; D ]
}
4 G- N7 Q( p6 j# q' _#nav li ul {4 _. ~ T3 {0 o3 I% c% ]. M: }7 v
line-height: 27px;4 D) a3 ]6 x$ U2 @( P a3 q+ |7 w: H2 K
list-style-type: none;
/ U- y, T9 b3 ytext-align:left;
0 L* t* P) V) l& S% j7 Mleft: -999em;' v/ V0 C) c' z
width: 180px;
* q0 K$ S* {; z) p8 Fposition: absolute;, ~/ g' `& t3 q% m: K. g8 \- ], Q
margin-left:180px;
' z, Z! H; T. U6 z1 o" pmargin-top:-25px2 V+ ~3 F, [% F' P! p
/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來
/ B7 D( @ g7 H) Z ~ width=為ul塊的寬度，如果設置比li裡的寬度大，將出現二級鏈接橫排*/- \: N. [: I! l8 t- g% [: ?. i
}# d' z2 ~( g$ |9 k
#nav li ul li{: j* n: r! @0 Q' y
float: left; width: 180px;& Y; Q" o0 I& c+ P" W
background: #F6F6F6; ( u- l( L9 X5 a( G
/*這是定義li內的ul內的li屬性，即二級鏈接的li的屬性,bg是li的背景色*/
: D- @ a0 v: e! ?/ Q3 N; s}
# ~. Z* d7 [& ]# B5 Z' b: u. `8 m3 |0 {( h3 {" q' [
) s/ K- L: {1 s+ V#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/
' ^2 v. Y- d' O' ]display: block; width:160px;text-align:left;padding-left:20px;; w" J% g6 i3 ]1 n8 M
/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/
9 }1 K% v/ F0 A7 H7 J}
, y! `, E% r+ o; k' ^
: ^" f+ x/ S0 |3 x0 D#nav li ul a:link {) d1 E# ?2 B( I4 X
color:#666; text-decoration:none;) k% j( E9 M+ I+ Y
}
. E* t. p& C1 b6 c- D#nav li ul a:visited {% U2 A8 K, M' D) X$ n
color:#666;text-decoration:none; [# B, A' A2 s* L7 P; }/ h
}
# r, j2 @+ |& j7 q! B4 Y; d#nav li ul a:hover {
9 P( K2 q( b" F. Z3 C$ Rcolor:#F3F3F3;text-decoration:none;font-weight:normal;
- c- L, M$ e8 E7 [+ l0 vbackground:#C00;) o6 `, l. i$ B) Q* H
/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/
- _% B# x) I( k+ c5 N& q! R; `; I}5 Y: n- E1 E4 g/ {/ l- i: e! e+ w
/*上面三個是定義二級鏈接的樣式*/
K' T! G) C6 F! B7 o* U6 k" b% M#nav li:hover ul {2 O3 S0 D0 r$ z4 E. a& Y {9 ?
left: auto;5 X% p- ? A, m* ~
}
' ?7 G* s J$ }5 r5 N* C& V, V#nav li.sfhover ul {
4 k( P3 n# H0 N9 uleft: auto;# I+ G: p1 t3 _
}3 H" W- s% E: b
#content {
2 `; `4 x* u+ w0 `" a, Dclear: left; . h8 A" F+ B6 u+ d
} L) `, ^" X0 \7 P6 W; |4 G
3 n. g V1 Z2 u' v! ~% F8 t# U
: B: K3 ^- q: W& ^7 ^--># D# |- t' J# E. n
</style>
4 X$ p! w5 e9 H- G2 ^) X3 `+ d& _6 |3 e0 ~
<script type=text/javascript><!--
2 H( z) g9 c: Y" Ifunction menuFix() {5 Y j+ g; S" p4 f1 i
var sfEls = document.getElementById("nav").getElementsByTagName("li");. @+ D$ t6 ` m: i+ q8 k
for (var i=0; i<sfEls.length; i++) {
8 u2 v6 e2 c: S sfEls.onmouseover=function() {
/ M z% h& r/ @8 ]1 f l3 K# n this.className+=(this.className.length>0? " ": "") + "sfhover";6 @. D* U3 H8 ?1 ~2 n* `
}# q9 b/ F6 I2 ^+ @( C0 }
sfEls.onMouseDown=function() {
1 x# S& p9 V+ t3 L this.className+=(this.className.length>0? " ": "") + "sfhover";
+ o8 l( h( C9 u( Q% {) v }4 m( D/ e; j! G, M. F& d/ B0 }
sfEls.onMouseUp=function() {0 n, l( b* U8 e7 `& S' d% D4 i
this.className+=(this.className.length>0? " ": "") + "sfhover";
4 I, y6 o; C- o9 j T/ K+ V }
, g) W3 |& D4 a sfEls.onmouseout=function() {) S. u( l# H0 O4 h* Q
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), " n6 c+ I* d* \: ?' Z
5 l j2 a0 _% X$ v7 |$ ^ f
"");, l# b( f* n: |8 t+ p
}
& K% f" O; t; s3 E9 c$ V# X}- H1 E$ }! T8 _6 f8 s N
}
- b m* Q- Q/ [! P( d3 lwindow.onload=menuFix;2 o2 R7 d* [3 P8 Y. U5 G
--></script>0 b8 m/ ~1 ?9 _1 o9 ?, B
5 \2 w0 i0 s4 H! t7 [$ M</head>
" P B8 [* L$ J9 l0 H& h; F6 {& E8 i) k6 X$ N7 }
<body>
) h: i) z# j R' @& x<ul id="nav">
% W6 q' o3 A5 q4 V; H<li><a href="#">產品介紹</a># `. K5 @1 o. p5 b
<ul>
9 ^4 j. u; [. y$ @<li><a href="#">產品一</a></li>) O; U5 O* @3 O5 ]1 P
<li><a href="#">產品一</a></li>
5 W! _" R& s9 D6 c<li><a href="#">產品一</a></li>. W* s% M1 N( _- Q- p; e& L
<li><a href="#">產品一</a></li>
5 M+ X L7 l, k; \, ?<li><a href="#">產品一</a></li>. t/ @+ x3 Y" v- A! L
<li><a href="#">產品一</a></li>
; ?# |" u" J+ w</ul>( T3 s2 k3 k1 h4 n$ m& E' u( F
</li>, W0 |$ ]8 l5 N) A- _) y
<li><a href="#">服務介紹</a>8 u5 Q' ]- r$ `1 n7 `; R
<ul> K5 L# ^/ }! h" T: U: ?1 j g6 t2 S
<li><a href="#">服務二</a></li>
1 a! m, K+ B4 k) J6 X" h0 g# A( R! Z<li><a href="#">服務二</a></li>
% D# D/ E' \+ F. o1 z0 ~: O+ a<li><a href="#">服務二</a></li>
+ K- R4 t9 k: d: f( o<li><a href="#">服務二服務二</a></li>
* O/ X" T/ q7 _& o' z<li><a href="#">服務二服務二服務二</a></li>
/ m. Q1 m x8 D0 q; c; ?" I9 N<li><a href="#">服務二</a></li>+ k% |# r+ t$ {8 D& H
</ul>4 P( x) H" D! B1 R: [
</li>/ o1 u" I! `& i. h1 _% k" P1 @
<li><a href="#">成功案例</a>; l. m3 v5 T" y/ c- ^, |
<ul>3 ]0 D5 n! z# c2 F8 G% Q2 f. O7 `5 G7 Q
<li><a href="#">案例三</a></li>
" ]4 d6 J5 t1 a+ K: h4 u<li><a href="#">案例</a></li>
: ?. z$ u, M3 x3 l* @<li><a href="#">案例三案例三</a></li>. a" F! [* b' M4 a) G. p
<li><a href="#">案例三案例三案例三</a></li>
8 W; [0 x: n9 \: W& Z0 Q- {% x</ul>( i- Y+ d- Y6 M( V: r5 U! z# z
</li>
( `! P. H: |1 m* X0 ^<li><a href="#">關於我們</a>
! L8 f0 h5 L+ q s* w<ul>
: p3 a7 S8 Q3 n1 }8 V, m$ w/ ?/ t<li><a href="#">我們四</a></li>: R x/ G' B" _! L3 A
<li><a href="#">我們四</a></li>! h* _) b0 w/ K
<li><a href="#">我們四</a></li>
6 N, q( B9 b, ~4 j% Q. A1 X<li><a href="#">我們四111</a></li>& `) \8 `' \, e5 X3 n
</ul>; _5 q; J0 H$ t3 E
</li>6 S6 ]* O9 }8 _6 P2 I1 F! q
. m2 [7 S1 L* U' f3 E% S/ `& Z<li><a href="#">在線演示</a>
$ ?6 K, l# T; Z I& U- a6 B- H! Z+ T# M<ul>
( t5 ?0 T; Q) E- n<li><a href="#">演示</a></li>6 A6 z. l/ w2 J, d! P
<li><a href="#">演示</a></li>1 v% I3 \1 S- F( I& X$ s d
<li><a href="#">演示</a></li>0 o& }! }5 l6 c2 Y9 X) `; w
<li><a href="#">演示演示演示</a></li>1 i+ V5 E& W: ^+ f
<li><a href="#">演示演示演示</a></li>. U. p5 p0 k2 F* ?' r% P9 E
<li><a href="#">演示演示</a></li>+ r3 I, ~1 C# \& m+ [
<li><a href="#">演示演示演示</a></li>
/ ` h3 Q1 q, m) g<li><a href="#">演示演示演示演示演示</a></li>
" S- H1 W8 f9 H- ~" |2 n</ul>! n/ }8 [+ N" J1 }
</li># K+ b" e; N A! B
<li><a href="#">聯繫我們</a>
) v; J0 M( T7 q<ul>- w$ S2 `( ^7 |7 }- {3 @; F' d
<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>3 a4 W: J: X p: ~! k
<li><a href="#">聯繫聯繫聯繫</a></li>
$ f& D5 B7 j8 w6 l O( q4 K- a<li><a href="#">聯繫</a></li>( k6 B5 K8 P4 i. `( |
<li><a href="#">聯繫聯繫</a></li>
7 P" c7 L2 q9 ?: t4 V4 B5 u<li><a href="#">聯繫聯繫</a></li>* c0 P+ M7 L! _. C9 \
<li><a href="#">聯繫聯繫聯繫</a></li>9 |2 P) {1 D7 ]; T. Z: B1 L% k; y
<li><a href="#">聯繫聯繫聯繫</a></li>
( z- K4 d G- U* ~2 o ~- a</ul>
4 d8 {( B1 L) J) Z3 u3 W& n</li>
9 s0 i' `' B3 t: S<li><a href="#">網站地圖</a></li>- Z3 n0 k5 l2 n- i: j
</ul>1 U$ ~; m8 V! T: a, a2 |1 E; r; `
</body>2 ~) K2 ~. N) L7 f5 E
</html> |
|
發表於 2007-8-24 14:38:54
提升卡
沉默卡
变色卡