<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN". ?6 Q9 H3 s3 Q4 ]/ `( b
"http://www.w3.org/TR/html4/loose.dtd">
; G+ w: V u7 E- H' p# n<html>9 S0 E* x- t/ N, d- B+ r
<head>
& h T! e$ y: w9 r$ B<meta http-equiv="Content-Type" c>
$ T. Z! ^, @9 G' M<title>www.cy286.cn</title># l- z4 y n4 }
<style type="text/css">
# [1 a7 B7 K* q8 f8 H- K7 {+ M<!--. ^: b! a! o! U) J' G1 Y
% j8 _6 s' P# K& O( Q/ e$ `*{margin:0;padding:0;border:0;}
1 s" e: r* r( \0 q. F# Lbody {8 l- o. t$ P* p' Y
font-family: arial, 細明體, serif;
; L" l8 ?+ D$ Q$ t+ u8 ] font-size:12px;0 t. ~; ~7 x7 s! K, s
}
0 x/ ?5 C: R: ]; B3 E( q
' W1 U g: ?, x/ S
4 K& [: Q0 u* W+ a1 C" H2 H#nav {2 t: N) P& M- a
line-height: 24px; list-style-type: none;
^: D9 b4 d# l/ O /*定義整個ul菜單的行高和背景色*/
# \1 ?! C1 q6 ]- h d- z}
6 y! r8 b2 u: w5 m- W: }
& k$ T$ ?7 w) v0 Q4 |& K! Z#nav a {3 p4 u7 t" v) n$ V# |. F
display: block; width: 180px; text-align:center;* e# b3 c7 y+ D
/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/) i1 j" Q i( U! g. k
}
+ }$ M1 P/ ^: @. y% G; S9 P |, i0 D9 K7 n9 ?8 p+ h
#nav a:link {
5 @2 J* j& c' W8 x4 ncolor:#666; text-decoration:none;
) F8 ]/ O: h. [/ C! V. ~1 x8 |}
, s9 h' F+ R6 Q( b( v+ x2 s#nav a:visited {; w! D4 l$ c4 C, U% f
color:#666;text-decoration:none;
* B& x' [! k( E9 H- e! a6 h}
$ D6 N G! L5 A' W#nav a:hover {/ K; m/ J9 X! }8 p- g* s" q3 F$ o! d
color:#FFF;text-decoration:none;font-weight:bold;
$ S! u# W, j0 V5 J2 s/ @}0 M6 s, N$ |' @$ Q5 z
/*上面三個定義了根鏈接的鏈接樣式，bold表示指向時加粗字體*/# E% A( y3 k* \ y% J: l' C
3 }* y$ p) _1 ?; x/ W. ~0 \1 n% t#nav li {6 J* G! N( V, b) W9 a& D
width: 80px;background:#CCC;
0 Y2 R X% q+ J- v4 l% q6 _/*float：left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/
* @0 R# s% s6 K, H+ _}- [; k/ I7 H( G9 I
#nav li a:hover{
& X! } C8 ?) H! f) d7 Ibackground:#999;
x; f- d+ s7 `4 f/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/
$ g# o: D* D ^7 \, k ~}+ l3 V9 q$ X2 B! {
#nav li ul {3 J2 Y0 L& ^: m" v8 }& m+ G5 o
line-height: 27px;
, k E% h* f4 f- R- F( q+ Nlist-style-type: none;, }: h+ X! ~) D0 c4 a* b6 c
text-align:left;
* w! g# |6 U) g- Y9 ~. ]left: -999em; s! q2 H/ P0 |7 x
width: 180px;" k: t; q* `8 b9 ]: |
position: absolute;9 S* }* G1 C8 O, P9 [, {2 ~) Y
margin-left:180px;+ L4 M6 i( F' S! I7 w6 r- D
margin-top:-25px
( z0 g' W$ G2 }1 ^/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來# T, v" }2 j N0 U; S; Q4 \: p
width=為ul塊的寬度，如果設置比li裡的寬度大，將出現二級鏈接橫排*/3 A) \8 @. |7 e- C5 c
}
7 W* \8 ]0 l c, N4 I#nav li ul li{
! X7 Z: d3 u* bfloat: left; width: 180px;
9 K! Y5 a: S- D! V5 F) F( l' t8 ybackground: #F6F6F6;
0 o& c4 M5 i0 K6 u* x% F2 S% C* T/*這是定義li內的ul內的li屬性，即二級鏈接的li的屬性,bg是li的背景色*/
% T4 Y T$ @2 Q1 S; o$ s}
% D$ i/ q3 l$ I; h9 D
8 S% `* J$ U9 u2 h- s- v
0 k( G8 T* o# L. ?' Y* v$ X#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/
/ z' a3 q' I1 [( Z/ L0 h& T3 udisplay: block; width:160px;text-align:left;padding-left:20px;
3 l: h* N c! Z) E/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/
) g, T# ~$ O1 V2 Q}
; ?' p0 R6 B0 v3 P: ~) j O+ P- e* o
#nav li ul a:link {
5 u8 Z/ ?3 G @! {+ g2 I0 q2 {color:#666; text-decoration:none;
5 E* y) U: K. O; v: g}& H8 D( A+ r2 s+ X' I) r
#nav li ul a:visited {0 p/ l4 B! p" W* s+ u: x
color:#666;text-decoration:none;
% c& }4 r- a) ~( o/ a}2 ^% j H3 ~& \/ Q
#nav li ul a:hover {# \3 D' T) L" t% u+ w |
color:#F3F3F3;text-decoration:none;font-weight:normal;1 {8 Z# \, e# T* C3 H& {
background:#C00;+ ~6 g, I) N3 D' m7 Q2 i, z C
/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/+ S' z( H; C1 U" x5 F$ M& Y" N
}
' C2 y% \- I; H) I+ v/*上面三個是定義二級鏈接的樣式*/' \* N+ ~2 V, z- y; i+ m
#nav li:hover ul {6 E0 c: I4 l4 k$ y$ U
left: auto;9 t) T5 z& s: E( R/ |' F4 r5 U4 k6 ^
}3 b6 W# j8 e1 k% _2 a
#nav li.sfhover ul {7 o* `( _, ~1 c5 X9 l+ o0 f$ i
left: auto;
9 z/ f% r, a* {* N}* Z5 h6 n! N( x J% l2 {! v
#content {
) @) P8 t0 J4 @% {6 u( g" oclear: left; : P- R- ^2 ~. D$ g
}$ Y# _8 X4 z" Y
8 o j4 h( ?; ?$ W0 y- x
* m+ H8 V% G# c5 |: `+ h
-->
# @( s' _1 z( ?* W3 O2 O% y</style>
7 P/ r9 o( E# m& M" t" w
0 m- p/ C0 b/ D' ~, b<script type=text/javascript><!-- d" A2 x% R6 h( ?/ E
function menuFix() {
3 |4 r2 {& ^: }6 w$ Svar sfEls = document.getElementById("nav").getElementsByTagName("li");
. I5 v4 b$ ]+ r$ F7 i& H: xfor (var i=0; i<sfEls.length; i++) {1 M( J6 X) D i
sfEls.onmouseover=function() {
. n$ q, W2 k0 M" y0 z: O; A this.className+=(this.className.length>0? " ": "") + "sfhover";
# Q& f+ Q9 y% ~6 z0 |5 a. }9 a } u" V/ y/ }& B
sfEls.onMouseDown=function() {. a$ ^) i. Y; e
this.className+=(this.className.length>0? " ": "") + "sfhover";# S0 R0 D0 c) n5 l" F
}
; J8 l& B, p0 w8 y: L sfEls.onMouseUp=function() {
2 L7 u4 y" h8 E; W1 O- f" |0 \ this.className+=(this.className.length>0? " ": "") + "sfhover";
. {( ]* @: @/ H- l) ~ }
1 |8 E2 |8 K3 L. H! i2 j sfEls.onmouseout=function() {6 H! o, E; B9 _$ v j( e2 w
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
& O- G7 D" k9 b2 F. e4 P' [+ ?) ~
; z. c9 D# \" R6 |8 V0 g; l3 Y: f"");7 F/ C9 {( @2 o
}+ T( v. q4 y- z$ a+ S; }: o, v
}3 y4 d; Y# e1 W* G& V$ F
}
! P7 M( |% }- Wwindow.onload=menuFix;
! s3 p- ?2 [# [--></script>- m# l1 }) B7 K+ j. i. O: X
3 X% y1 r. z. A/ d! N</head>! |: E0 l- k5 I. I0 K8 f
{4 G0 ^8 U1 ~+ g. o<body>7 k9 j6 g1 l: s5 Y, Y1 {8 a* z
<ul id="nav">+ A0 q( D& M' H4 u1 Z! h
<li><a href="#">產品介紹</a>( r/ p' P7 C# N/ @3 c/ ]
<ul>
- b" P8 ~: a- W6 s# k<li><a href="#">產品一</a></li>4 b2 t6 u; g! C, X
<li><a href="#">產品一</a></li> T+ X3 ]% E* w
<li><a href="#">產品一</a></li>
5 [: H3 B* G4 Z8 \ M3 C5 i<li><a href="#">產品一</a></li>
7 C6 x0 [' W! ]) K1 V+ j<li><a href="#">產品一</a></li>4 H8 ?/ q. b; G' R' u: G& \
<li><a href="#">產品一</a></li>0 Q; m) c' K p6 N) v* A a% C
</ul>
f" y$ v* f5 E+ U</li>
2 T& Z; B* M8 L" |<li><a href="#">服務介紹</a>
8 c' V( B# s( \) e. }4 W<ul>5 E4 x/ @! i1 Q1 Z/ O/ ]4 d
<li><a href="#">服務二</a></li>' ?3 y; L! Y+ R' d
<li><a href="#">服務二</a></li>
/ j5 Q( T1 p7 N9 y" a& S) ]<li><a href="#">服務二</a></li>
; U" [1 ~8 [+ l5 i<li><a href="#">服務二服務二</a></li>9 B2 Q8 s3 I* u9 v! D0 B
<li><a href="#">服務二服務二服務二</a></li>
' D0 }' s, `0 L- K$ ~<li><a href="#">服務二</a></li>" e4 c# ?/ x5 B5 s/ I
</ul>; w7 V. Z/ R% ~
</li>0 B2 R- E+ E: |/ [; Q5 O) A3 U, k; o
<li><a href="#">成功案例</a>( h8 [: j s5 Q" _) z" _! N6 T
<ul>
7 ^% X2 J# j4 D2 {6 v<li><a href="#">案例三</a></li>
$ T) }7 S3 x- D9 l! t& M6 G; I<li><a href="#">案例</a></li>
% B0 I+ e9 ~4 \; {" W7 J# C<li><a href="#">案例三案例三</a></li>
+ Q, R+ |! x: |5 u. i<li><a href="#">案例三案例三案例三</a></li>
3 W7 i3 ^# S q2 W( G' `</ul>
) A2 w1 d! l+ u) b/ b# A* k0 ^</li>
" }, E7 F/ X$ a' Q7 F<li><a href="#">關於我們</a>$ q; O7 x1 K1 I5 H
<ul>
6 M% T; H8 u; t1 Q. j4 n<li><a href="#">我們四</a></li>* D/ q, ~" b$ r% @" h' J; z2 }9 m- O
<li><a href="#">我們四</a></li>
( p# X6 C! Z3 K2 H# z<li><a href="#">我們四</a></li>
) b+ \5 h! o6 j' I2 M$ \<li><a href="#">我們四111</a></li>
9 V7 Q. [6 _% I</ul>
0 D/ I/ K* T1 s9 T1 T</li>$ h; h" y% y2 @/ Q/ @5 I t
; O0 S. E/ A V! u9 C2 T, ^" a; y& ?% \<li><a href="#">在線演示</a>
1 q7 ~$ e* a$ n% w5 l* ~" a<ul>. R3 q1 x2 ?8 N0 X
<li><a href="#">演示</a></li>
" `& H# D# D3 Y% v% t<li><a href="#">演示</a></li> z% f6 y: h5 e) d+ v, H( r% {4 a
<li><a href="#">演示</a></li>
0 b9 q3 \: l: z1 `2 r<li><a href="#">演示演示演示</a></li>
4 D( N3 o) Z- A" e9 i8 L$ ^<li><a href="#">演示演示演示</a></li>8 o5 t2 ~: v+ Q
<li><a href="#">演示演示</a></li>$ i4 W6 d1 [* j$ y
<li><a href="#">演示演示演示</a></li>
- V; \; J; p# I( q& S4 d3 B<li><a href="#">演示演示演示演示演示</a></li>
1 J( p% J M1 v</ul>/ j1 K0 t1 x7 c; W9 |2 H* b
</li>
( Q- M& ?3 ^) B' I( S<li><a href="#">聯繫我們</a>
9 x" R" c1 `4 s+ w% V# Y$ ]9 A2 R<ul>8 m! m* C, e( Y7 ]' L* ?- b# ^+ X* R
<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>
2 N P7 M) v* O$ l6 |3 X5 F- V<li><a href="#">聯繫聯繫聯繫</a></li>
n$ r/ M9 c# r! P; G3 x. H<li><a href="#">聯繫</a></li>
3 \7 l2 j+ D4 |9 Q) S; ^$ n<li><a href="#">聯繫聯繫</a></li>0 U9 f0 X Y& i3 u
<li><a href="#">聯繫聯繫</a></li>% c% }# @! u1 G7 `0 L
<li><a href="#">聯繫聯繫聯繫</a></li> @ ^* q7 [' r5 ^4 A
<li><a href="#">聯繫聯繫聯繫</a></li>
& `1 L, m* F. s; [: c</ul>+ H' x8 E0 D- S" r6 G
</li>
$ {! n$ x! B$ m1 j0 }! M<li><a href="#">網站地圖</a></li>: C' N# V2 v) T" Y
</ul>: U0 N7 h8 y3 R( }1 U% r( X
</body>
! |3 L3 x6 e0 G+ }</html> |
|
發表於 2007-8-24 14:38:54
提升卡
沉默卡
变色卡