<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
* A6 d" R) D, w8 V! p"http://www.w3.org/TR/html4/loose.dtd">. `) E/ r a' d7 \/ }
<html>
9 W1 O6 z# s; P& B2 w; c<head>4 f6 }+ i c4 h8 j9 F* }8 r) p
<meta http-equiv="Content-Type" c>
/ N: ~6 k; q0 K8 |<title>www.cy286.cn</title>
0 g' e. a3 C+ ^4 b+ ?0 z+ D<style type="text/css">& T; S% J% I! K' H# K3 W+ @4 s
<!--
; s7 f( m* t" a7 o0 `. g4 c, H5 O
9 e9 B' d1 A+ G; e2 d*{margin:0;padding:0;border:0;}
/ h; w: G( c+ `3 w/ O n! A& G6 ebody {5 K. G- z& ]. }* V
font-family: arial, 細明體, serif;/ Q1 I% G- j5 D# [
font-size:12px;; M G! w1 b; n" V& s
}" }$ ]/ C4 a; I& d
* ^4 x% F" R0 Z$ G) C9 x
' E$ N3 ?- P" D1 h7 Q- C' {7 Z- g+ r7 Q#nav { F+ t; f6 h' D1 _& h; A1 n: C
line-height: 24px; list-style-type: none;
$ x: {( e- Y. X% E3 a /*定義整個ul菜單的行高和背景色*/$ S( `" o8 z Y# M X A
}9 [1 e- n, e! k4 I& o& w6 n
m Z6 T+ [$ D" ?; U& P
#nav a {
5 X) I+ y% Z9 adisplay: block; width: 180px; text-align:center;
; g) Z- g6 {+ }+ R$ m- G/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/; x3 {6 T+ h/ E
}) q0 ~' v8 d: T$ t# V: J
: u: J: M2 ]. I; |2 b
#nav a:link {' |3 z) h3 _1 r' ^2 c2 d* U g
color:#666; text-decoration:none;' N7 g X2 G1 y# G1 y+ x" n
}* s# B# G0 ~* z0 M/ M |7 e, F
#nav a:visited {6 ~" c' V' k7 ]% }& A- T2 f1 |+ D3 ~0 ~
color:#666;text-decoration:none;8 e% Z! o& X4 S% v
}
' `. K! L' K& r#nav a:hover {
2 F1 o) T' w; y3 s1 O; xcolor:#FFF;text-decoration:none;font-weight:bold;: { C# {- ~2 v( Z( [/ l) Z& u
}, S$ J9 E0 U3 R, w p& \
/*上面三個定義了根鏈接的鏈接樣式，bold表示指向時加粗字體*/6 I' j$ _# X/ d7 t% |
. ^% X5 m- l7 |& S: O8 U2 V: N' H#nav li {: [) w) z$ h1 A5 i0 A( _2 j6 }
width: 80px;background:#CCC;+ T: t. b- R3 d# |
/*float：left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/
, z7 N Q! Q6 m' Q0 ~! b; p& T% Q}' S$ A- R0 F) M
#nav li a:hover{6 [7 k9 T( h' R" {* m
background:#999;" c2 Y% f+ P7 N
/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/) `/ `8 ~0 H# v; v4 q0 A
}
; \+ V0 D: N) d' w" n9 o#nav li ul {0 M! a% L4 v' i
line-height: 27px;
& K& L2 G/ m9 R8 R+ U4 D5 clist-style-type: none;
9 L: k! }2 M( s1 Z2 f8 jtext-align:left;
0 I6 |. t4 {/ o" h' W; L+ bleft: -999em;7 g3 H3 y- X1 }: S7 @( q0 R R
width: 180px;
9 d" W; t5 J u4 ^ Yposition: absolute;
: M% y5 ^" d; N# y9 I$ H3 omargin-left:180px;
+ K- a" S' K. o! _- rmargin-top:-25px
% w% P1 P4 i7 D/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來
& m% p' W5 c% u. y0 X' _) ^) F width=為ul塊的寬度，如果設置比li裡的寬度大，將出現二級鏈接橫排*/: Q! \9 m4 M: B* z7 q
}, f% a: `$ l1 i7 Y7 s
#nav li ul li{9 H6 x+ [1 ~0 L7 X: G9 g1 y/ Q
float: left; width: 180px;
2 ~1 o/ u+ Q6 b0 n( K! obackground: #F6F6F6; 7 ?8 s7 j) M. k6 `' l- x4 C
/*這是定義li內的ul內的li屬性，即二級鏈接的li的屬性,bg是li的背景色*/3 c8 e5 d0 p; r4 B" F: d U1 j
}0 a/ g5 j* j) t! f4 z
# h: ?/ _' n% B [( L) O& k1 J
4 ^/ C8 t4 Z" ]4 m" g. d! ^
#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/$ J; n: J/ K9 m. l7 N: L
display: block; width:160px;text-align:left;padding-left:20px;! R" ]% y2 w; `+ U ]
/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/% S& ~5 c* @" U8 m+ D/ k- O
}6 r9 _3 }$ b( J- x( [ O6 R
7 D5 V) K7 N. a& [- O, N#nav li ul a:link {# B( w0 G8 Q T
color:#666; text-decoration:none;
1 m; L+ W: ?8 w4 T' t+ W6 W}
8 P4 z9 v/ K+ ^ }- D#nav li ul a:visited {
) H2 A/ H8 F' l% h lcolor:#666;text-decoration:none;! w9 ^% M2 |) {: v
}0 T* X( k3 l/ R: _8 ~* |
#nav li ul a:hover {
) _& R- _9 k4 Y7 Hcolor:#F3F3F3;text-decoration:none;font-weight:normal;
6 w; N3 X3 j, D4 k% G* K xbackground:#C00;
$ i( _+ Z& ?1 B1 V+ t# B/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/9 \$ F+ o5 a* l3 a/ G
}
% }6 ?/ {+ c! S: o) _/*上面三個是定義二級鏈接的樣式*/( C0 x- O. h. A& t) t
#nav li:hover ul {
( T& l6 W9 X/ d$ Z1 ~left: auto;, V! X) ^. l/ C6 T/ @2 @
}$ P+ Y- d( T* L* y
#nav li.sfhover ul {1 \" [- @: N- m9 I
left: auto;
" u p8 t5 \7 w. A}3 c6 T& F4 l v. \( N
#content {
+ s, @# C( ^! n: k% q& @ Eclear: left;
, p; U) R$ l! T# c}
% Z8 s$ h1 A4 K9 E# ]1 d; H! N& \
5 I2 ]. }* D% c" ?9 }/ [
-->( m( S; A2 G( p" m( T5 N; t
</style>
$ @- `/ ~% R/ x
" U; b4 x7 T( ]4 H, @3 E<script type=text/javascript><!--: }7 j8 p; i1 P$ y! K/ C) S* y2 G
function menuFix() {8 X1 R" k( H$ a. g6 z7 C
var sfEls = document.getElementById("nav").getElementsByTagName("li");6 U; B# L8 X% Z! H
for (var i=0; i<sfEls.length; i++) {, v r: K/ D/ e, W7 v- R
sfEls.onmouseover=function() {5 r7 }9 |# }+ W* P
this.className+=(this.className.length>0? " ": "") + "sfhover";8 P0 L3 M- R# s
}7 D' t0 a7 d/ G1 s0 e: @
sfEls.onMouseDown=function() {
$ r' }/ V0 m' x, o: z this.className+=(this.className.length>0? " ": "") + "sfhover";+ h! ]( p2 r7 [2 r3 z8 F5 y
}
$ O/ K. j3 a2 z* H( p- g5 K2 @ sfEls.onMouseUp=function() {/ \8 T* ~8 T" ]( M3 V
this.className+=(this.className.length>0? " ": "") + "sfhover";
4 [; W+ l; M0 U$ r% X }' S$ H6 I) [( X, m
sfEls.onmouseout=function() {# D. {7 ?+ c6 [ a- k
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 4 P2 F% S/ k. l' O. F
) O2 I$ o3 c5 C* N( g* q"");
1 [- c; t/ {% ? }
0 W% F& j- P, X' u}
& g. w( W/ x9 A1 S! A}7 r4 T+ o) N$ l& }
window.onload=menuFix;
" _, c h: h5 a$ c6 w+ M& j--></script>
7 L3 T( { z; I2 L* \4 S) g1 A6 F: r1 L2 |0 ?0 J
</head>1 Y( ~# c% ?, y
" [; ?1 ?8 {3 B
<body>( i+ j$ q7 Y2 ^9 \
<ul id="nav">+ i- J2 p1 i X" \# ^! r
<li><a href="#">產品介紹</a>- n- a5 M3 b# |# L
<ul>
. _- Z7 S. \( H9 u<li><a href="#">產品一</a></li>" v0 V/ [+ D7 `1 l
<li><a href="#">產品一</a></li>
/ ^3 y3 W1 s+ w$ r1 l) `( S, ?<li><a href="#">產品一</a></li>- H4 M7 G$ ^4 \
<li><a href="#">產品一</a></li>
8 }/ Z- e3 r; H$ U1 ? F; Q( x<li><a href="#">產品一</a></li>3 [3 Y* P) \1 I& s( K6 Z
<li><a href="#">產品一</a></li>" q9 _/ P g. f2 x+ c/ ~
</ul>
6 I6 D4 {$ F, @3 S6 R$ b</li>
2 b5 A9 ~( h. q1 ]<li><a href="#">服務介紹</a>( R$ h5 }$ q; T' \- i
<ul>
5 d5 u4 \* C% u- t# p<li><a href="#">服務二</a></li>% c& H4 ~; G d1 f# Z5 ^
<li><a href="#">服務二</a></li>* V3 i* g9 y' A; F
<li><a href="#">服務二</a></li>
7 B- a8 N9 m! X1 N0 o+ }" y" v1 Q<li><a href="#">服務二服務二</a></li>
9 U! z3 ~" t2 l, n! t<li><a href="#">服務二服務二服務二</a></li>8 @- e' {8 v- V2 E+ s2 K: B
<li><a href="#">服務二</a></li>" D* @7 R+ Q# l$ `: t
</ul>: b' L- b/ m/ g5 A- a8 _0 N, o4 |
</li>( S. y6 G+ \& q" b' n
<li><a href="#">成功案例</a>
$ ^3 B: y% i# a6 z; i* |# D<ul>
2 N4 X. |: `% @% n# U" K7 x9 h<li><a href="#">案例三</a></li>- }* W9 \3 ` |! n9 t
<li><a href="#">案例</a></li>3 O0 C7 e2 A$ Y8 V \2 ]& n- Z
<li><a href="#">案例三案例三</a></li>" p' Q, G% S0 O1 N# I
<li><a href="#">案例三案例三案例三</a></li>
, B# k% R9 Q' A% ^</ul>
& ?) W. V+ e8 q</li>5 c( I; E# E7 O o: h0 V
<li><a href="#">關於我們</a>
* a* B# y4 K" h( f; Q. p<ul> f J$ h1 z9 C# g( w6 {
<li><a href="#">我們四</a></li>8 q: I) S, l, K
<li><a href="#">我們四</a></li>) Z- A9 V4 `8 |# @6 F
<li><a href="#">我們四</a></li>2 |6 `5 a/ ^, W! k- j- ~7 ?9 l
<li><a href="#">我們四111</a></li>; x" g, D; v/ \ X- q: v
</ul>
) f0 y7 d+ r/ j* c& i3 u9 ^/ O/ D; ^& Q</li>7 X$ P5 h1 Y' n4 w
5 n; G* u4 C" Q1 B1 Z) a3 k8 h1 H<li><a href="#">在線演示</a>- U9 S* r( d4 a& @6 H$ Y$ l- Q# ~8 k
<ul>
- g4 ^4 f+ {) g( B; E3 i<li><a href="#">演示</a></li>+ _0 _& u4 ^' w2 v/ u9 u4 u
<li><a href="#">演示</a></li>" {6 R. P2 I, R% l# ^, `0 V
<li><a href="#">演示</a></li>
8 b4 k4 g+ X7 G1 y. t) e* |5 }<li><a href="#">演示演示演示</a></li>6 Q: L0 n! e+ g# E( _2 L7 Q
<li><a href="#">演示演示演示</a></li>
* Z$ f1 t, j4 F<li><a href="#">演示演示</a></li>, Y/ _" Z7 c$ F+ \
<li><a href="#">演示演示演示</a></li>* x, r6 S7 |. p; L4 o
<li><a href="#">演示演示演示演示演示</a></li>
, ^, P+ Z* D. K( d- O) n* W: R1 H/ T</ul>
; z5 e7 \; S9 q6 J6 w# K) ~) M</li>( l- L' Y4 [$ n6 k) @! Y% P$ e
<li><a href="#">聯繫我們</a>
0 P/ g* O3 t% \1 W8 M. G2 ~9 G<ul>
4 g+ }' N/ k/ c, U9 S& R9 y<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>& D v* x s6 f+ L
<li><a href="#">聯繫聯繫聯繫</a></li>) I$ c; x' {( s' T$ v- Q9 k6 a+ J
<li><a href="#">聯繫</a></li>
, e0 A$ |% t0 x: x8 o<li><a href="#">聯繫聯繫</a></li>
- K' S- _5 q; R/ L9 q; C<li><a href="#">聯繫聯繫</a></li>
2 t) C: a( a( N* {. ^; Z<li><a href="#">聯繫聯繫聯繫</a></li>
7 U; j( }6 g& E8 o<li><a href="#">聯繫聯繫聯繫</a></li>
m3 ?9 E7 w0 `( C* C5 ]</ul> R2 S# w, t" F- u9 M
</li>7 H$ G' Q8 A/ Q4 ]* L( s
<li><a href="#">網站地圖</a></li>2 ^ r. s- V8 [% H* S
</ul>
$ [/ J/ f7 W" r+ G</body>4 o' b$ n) {& b z1 ~4 Q" a$ J0 K* U
</html> |
|
發表於 2007-8-24 14:38:54
提升卡
沉默卡
变色卡