<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"$ u9 b/ z# f7 C! M0 _# @
"http://www.w3.org/TR/html4/loose.dtd">
1 \- g/ v- S) d Z p! f0 {<html>
! }2 k7 _* j1 W0 V* o6 v<head>. }1 ]3 L4 a0 I4 m4 K! e
<meta http-equiv="Content-Type" c>1 P2 i# m" }' H3 N
<title>www.cy286.cn</title>
4 L, P+ N, h1 v6 V* u<style type="text/css">+ _6 y1 C1 M3 O! V; Y
<!--
/ B' k# |- L1 r( f f3 z$ [& N) F: x1 J
*{margin:0;padding:0;border:0;}
1 ~, x% \) M% q$ k' J* C1 ybody {
6 [% W- F: c. Gfont-family: arial, 細明體, serif;8 r7 L% e; F; \' Q
font-size:12px;
% L, f- D" s5 m! l! y) y}
3 {1 W/ e+ v+ N, J! j5 Q H/ ^, T& F/ a9 L" I) E" X, E
9 u8 A/ H& J# j* Z5 ]& ~) H; w#nav {# A8 S/ }' O9 f7 ~3 f. Y
line-height: 24px; list-style-type: none;
6 Q t5 ]# s+ X6 p5 D# h /*定義整個ul菜單的行高和背景色*/
- _1 I" h2 \! \' m8 |0 y}
+ {8 _$ c3 k/ ^9 j4 K2 O) j
! X6 Q& L0 J6 t) Z; j0 k#nav a {
9 a3 ]$ V' c; Q: W% xdisplay: block; width: 180px; text-align:center;0 _ x4 G( a* R0 Q" U8 d. h
/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/
/ o: E% R4 Y* Y- n d% m}1 K/ c$ E) i- T; e; D3 z6 {' H r
. s Q/ _# r8 Q# q ~8 {3 q#nav a:link {
; T1 p! j: }3 P3 c Ycolor:#666; text-decoration:none;% e/ f. c# t! \- p
}7 Q1 S' V& r$ C0 h* \) r
#nav a:visited {
: ?8 c+ J+ M5 _3 M: Rcolor:#666;text-decoration:none;
0 L. P( M: X% k2 r9 @$ l$ L0 j}, D q- o0 C% \4 }
#nav a:hover {4 p. ?/ u5 L L8 w7 y% W
color:#FFF;text-decoration:none;font-weight:bold;
) N X5 [5 |- Y) `' \+ g, \}
, Y* j' k/ K7 P, `0 d0 n) g! o) E/*上面三個定義了根鏈接的鏈接樣式,bold表示指向時加粗字體*/
9 E- q8 q- v# q' A M# l2 [. d& `
#nav li {
4 c! Q/ a% i" f, j mwidth: 80px;background:#CCC;. J/ x" a2 k% U2 T0 H, m
/*float:left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/
( b0 ?& U, p' h" [}$ A" i- S$ }5 r: t: @* J
#nav li a:hover{
3 ^8 }: C. ~# qbackground:#999;$ E4 d% C+ H4 F! T
/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/
9 I8 B9 `. F% J2 R) s$ f}! a( c" o8 L: O7 C
#nav li ul {4 L; t/ E+ Y- J9 H& V' N
line-height: 27px;
5 k$ ~3 ?5 O" d* }3 W" r$ a1 Qlist-style-type: none;. ?/ z* l# U1 ^: x& s2 r8 o
text-align:left;
( w/ K' n2 m4 T$ @1 }+ G4 Y9 Wleft: -999em;4 f- Z8 Q# x4 J" Q+ i# D3 k' k
width: 180px;
) Z: d* C, z# T& n9 K' Mposition: absolute;3 j) C; t$ B, M
margin-left:180px;4 }( d! L( E! j8 ?* X
margin-top:-25px8 P5 x: e, r9 P- V% Q- p T( z. U
/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來
% I% P/ C3 \) V g width=為ul塊的寬度,如果設置比li裡的寬度大,將出現二級鏈接橫排*/
7 z: O, n* o7 X3 \}
) p* \" V z3 h/ L) I#nav li ul li{% b$ L1 l! b5 Y5 R
float: left; width: 180px;# I9 [9 [* N2 z$ \! l
background: #F6F6F6; . x4 f" M# T+ |8 Y' y
/*這是定義li內的ul內的li屬性,即二級鏈接的li的屬性,bg是li的背景色*/
5 P/ Z; U( c7 a3 ~9 Z& O s}, p% E) ~6 U6 m3 u! F6 V! e% U
8 {; g" @* a! O! G7 y5 ?$ q9 e) F2 \4 n# \
#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/0 ~! G W5 q0 O- c
display: block; width:160px;text-align:left;padding-left:20px;( U3 C3 p1 ^4 D/ O6 I/ x* p
/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/
3 b, m# N& R! a}
9 } L1 i: g+ L" b+ B6 q3 E3 d' }% k3 R+ |
#nav li ul a:link {' A+ ~, d% U( _
color:#666; text-decoration:none;
s: N r' p# ~4 R( {2 O5 h8 r}
) o, ]) k# \2 H0 m0 y3 `#nav li ul a:visited {
4 b+ z6 n, z1 t/ y9 F, C |color:#666;text-decoration:none;
; A. F4 V s; W4 z* A}
. g @; |; m! x+ z2 |#nav li ul a:hover {
: R$ q! D$ r. v' I8 p+ xcolor:#F3F3F3;text-decoration:none;font-weight:normal;
0 G! e) o/ z: _5 b0 xbackground:#C00;. h l) p) L0 {, D9 N5 p: h% Y& u
/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/$ ? s; X/ X; e; i
}1 T$ q: ?( `6 F
/*上面三個是定義二級鏈接的樣式*/4 u1 R9 v' d7 i6 P1 x. X" x, N0 H
#nav li:hover ul {+ p1 d( {. |9 R/ o# q$ Z8 M6 K2 ]
left: auto;) c0 n5 [& ~" d
}. Z9 U; Y, h& h# \( ^7 p% D; V
#nav li.sfhover ul {$ L: a. l) Q7 K1 U" t+ w6 R
left: auto;
9 V! O6 @. h$ P0 c7 B- T5 c}
* P- X8 h6 P4 I3 y2 A, C! W4 X#content {
( f+ _6 c( g7 K" s+ |/ Nclear: left; ( v+ ~( S8 C5 j
}
( T* Y! ~ k* o/ ?% N4 O1 o& N: j3 T. _
. H5 H. A" Q$ Z3 i--> l1 R3 y, P, |, D+ }, A
</style>; C- _2 r; \5 C1 @
- ^, D4 f0 R9 N! c
<script type=text/javascript><!--7 ?5 {! t! h$ B0 L- n; v
function menuFix() {- C' e$ v6 n8 h! ^6 G, A/ f
var sfEls = document.getElementById("nav").getElementsByTagName("li");
7 T n; t0 R8 S( O8 o3 }for (var i=0; i<sfEls.length; i++) {$ V! Z! J6 X' \3 S# e
sfEls.onmouseover=function() {- w! S) c5 b; d( x
this.className+=(this.className.length>0? " ": "") + "sfhover";
2 H) n8 c( U/ v Y' C2 _ }! Q! E6 I: L; f4 B
sfEls.onMouseDown=function() {# x- M2 _8 U* \- y# S* A. u& H, ]+ i
this.className+=(this.className.length>0? " ": "") + "sfhover";
% o; f7 K8 H4 i1 X }& K* S7 t$ _" p- p* m$ Y
sfEls.onMouseUp=function() {
9 g6 i- A, M4 A P( C1 c' a* ~ this.className+=(this.className.length>0? " ": "") + "sfhover";
( U' V/ Y0 ]& `6 t) U2 h# \ }! y5 n7 p+ I! o- i9 g0 H8 b
sfEls.onmouseout=function() {$ m6 E# h7 K: ~ g
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), * V% R: d6 m4 g( `2 _5 ]- ?
8 A6 C& z9 B8 c: Y1 M, m
"");% H, M7 F9 @/ H' Y, {8 \
}4 M {7 c# b$ V& z7 i% ?1 w
}
' m+ O, O* F! w% k1 X. d* h" }% {) @; o}, b9 Y; F$ U+ ?1 W+ V
window.onload=menuFix;
3 R5 A0 l6 B j--></script>' w# q) h. c2 z
! |) ]! o$ I k</head>2 Y K& `' w5 j' \1 [' i' v
( [8 M8 ?8 K. w) o; T7 y9 C4 G<body>
% Q6 D9 ?' B% c/ J. k5 p<ul id="nav">3 U0 @* ?9 v& K
<li><a href="#">產品介紹</a>* G9 k8 X# [# K+ x
<ul>
: X! c5 t8 H, h* V& i% J# ^<li><a href="#">產品一</a></li>7 F+ M: f" y3 `$ y5 Z$ n* i4 @
<li><a href="#">產品一</a></li>8 S( ?( p6 r; r% B `
<li><a href="#">產品一</a></li>! ~# X" U+ i7 u6 } \5 _
<li><a href="#">產品一</a></li>+ j# O# q. e) ?7 v. w# k" D# O
<li><a href="#">產品一</a></li>
0 _0 W; A& u& e: l* n! u<li><a href="#">產品一</a></li>% S' w6 O7 G+ ~2 t/ L8 l' ~1 g$ j
</ul>
0 N. p; t% l" q3 b3 |* Q- {</li>
' e! \8 \* ^* [8 g4 X<li><a href="#">服務介紹</a>
; e# @; c( L6 b, I$ R0 L, |<ul>( j& s3 d% X4 i* Z9 o9 i( S. q
<li><a href="#">服務二</a></li>
7 g7 x& p: `7 L6 E9 x<li><a href="#">服務二</a></li> H8 [8 r& T( Y5 d1 {# F
<li><a href="#">服務二</a></li>
7 E( T( R n7 L1 |: F<li><a href="#">服務二服務二</a></li>' p+ }* Q, N* k3 [
<li><a href="#">服務二服務二服務二</a></li>' u' j2 ?: o, i1 s2 z
<li><a href="#">服務二</a></li>
) z' ?" U5 [7 `6 ~: @</ul>* }; {" i4 f" w
</li>
9 j- Z' a, G& c/ ?8 m# X1 j<li><a href="#">成功案例</a>
* w) u+ d/ G! ?$ M! H6 K* y" x<ul>2 k' f$ a% W( `$ {+ }
<li><a href="#">案例三</a></li>$ N3 C% A. P3 u8 w& ?
<li><a href="#">案例</a></li>
( {* T; n G( e+ l* j% W<li><a href="#">案例三案例三</a></li>5 h6 | u" f y; p1 c
<li><a href="#">案例三案例三案例三</a></li>& A. R6 ]" \* v, _
</ul>$ `- L" {9 N5 \! H+ j
</li>, q5 x7 V( B+ U5 Y% Q
<li><a href="#">關於我們</a>
' J" x# f9 c) Q5 m" ~' V<ul>8 P+ r3 `, L U
<li><a href="#">我們四</a></li>
3 i+ C1 q# H# |6 R% c<li><a href="#">我們四</a></li>
) ^6 D j& M3 o<li><a href="#">我們四</a></li> K# U- C3 P( g" Z0 r% _! p1 J# q2 G
<li><a href="#">我們四111</a></li>
$ m5 G T. |1 ? I T8 o; _1 c: J% i. I</ul>
' h& Z4 [( J: P5 M0 k</li>
2 ~% A5 a" Q- ], {
9 Q0 Y: Y7 S- g9 _: U% }<li><a href="#">在線演示</a>
5 s' H8 w& M3 O1 S7 H<ul>! l/ | t3 q" [3 d
<li><a href="#">演示</a></li>
/ P) N% m2 o# J1 U<li><a href="#">演示</a></li>
- s a8 N$ y$ ^) K3 ~ r9 o9 \7 |<li><a href="#">演示</a></li>
3 F7 x( B0 \. U- A3 o% ?<li><a href="#">演示演示演示</a></li>( Z8 A8 q0 K7 O/ M, P8 k
<li><a href="#">演示演示演示</a></li>: B, P4 E: y4 K9 T8 P* S2 M( K
<li><a href="#">演示演示</a></li>: g, j4 ~! _% {0 D( s
<li><a href="#">演示演示演示</a></li>
( Z8 l6 a9 f. j6 Z! ^. L6 s<li><a href="#">演示演示演示演示演示</a></li>3 _" q e' Z5 q1 O7 _
</ul>
- m$ F4 `# B0 ]$ `7 i: ]" d</li>" q7 o+ W. e3 \6 _$ I% T
<li><a href="#">聯繫我們</a>
6 O' I+ p+ I* @: J<ul>0 k7 M3 k; z$ ]! F
<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>- d5 F3 e0 r& [% I# M7 G$ H
<li><a href="#">聯繫聯繫聯繫</a></li>
. W% P' H# m6 q+ V6 y/ b<li><a href="#">聯繫</a></li>
6 W" |$ i( X) y<li><a href="#">聯繫聯繫</a></li>1 e% {" ?9 q2 C/ p+ ` p
<li><a href="#">聯繫聯繫</a></li>
- o7 ?1 U" _' }; t+ |<li><a href="#">聯繫聯繫聯繫</a></li>
" D% D+ J5 w3 `: K, j1 O& m<li><a href="#">聯繫聯繫聯繫</a></li>1 l' [! U: l l; u' F& N. s8 f
</ul>3 c& s; l8 ^# q/ m. w3 I/ D4 j
</li>) U W( `% t% s4 K$ i8 r
<li><a href="#">網站地圖</a></li># b) u0 T8 L9 `* b' T- i0 [
</ul>
' r- y" {/ m4 H7 z& n</body>; [' u% x( X& M# @6 t+ |
</html> |
|