<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
% [" v0 }) X: L! Z4 I$ r# w- |"http://www.w3.org/TR/html4/loose.dtd">
' r y/ ~4 [3 B7 |<html>+ \ Q1 f1 l. J! y/ d
<head>
: q6 u) n% b& Y- a J<meta http-equiv="Content-Type" c>& z1 n J# y9 z8 j8 `. X
<title>www.cy286.cn</title>9 i+ ~+ r, n* ~; L0 H! N
<style type="text/css">! k+ n7 ]: \/ W7 j4 ~" X' N$ F
<!--
% `4 L/ V. |6 @; j7 y& L$ B6 Z9 i/ K' C& A- M& U7 p, k
*{margin:0;padding:0;border:0;}
3 h& f1 r; X7 d: M- sbody {
0 E# `. p6 V- c; yfont-family: arial, 細明體, serif;4 U$ f! U J4 F0 K
font-size:12px;0 Y% |) v. F6 s# l+ \
}% B" k7 I/ X3 u4 {& ?9 i3 V. {
' B% u, K$ R9 j8 X5 ^
, M1 k4 V0 J% ]! B/ R#nav {
% K' O! o0 R" C line-height: 24px; list-style-type: none;5 f; g2 M. z0 O& Q8 e( g
/*定義整個ul菜單的行高和背景色*/' ?9 ]* M0 V8 c9 o- @
}
l! Q6 W5 Y- e4 C! I9 o; D* f/ d# x6 f! S
#nav a {. g. q2 m) ?, u% n7 G+ A4 f' b
display: block; width: 180px; text-align:center;
: Z# n. g: D2 I' Z& E0 H w# E5 W, m/*以塊的方式顯示li的鏈接,width為每一個鏈接的寬度*/$ t* {4 v) ?% }' @ [- z* ^. x; L
}2 D9 F( r- t9 C/ T. c" E4 L
3 `. e- V3 n g8 Y; k3 ^
#nav a:link {
+ f5 @9 Z7 S% C' g% p3 Ycolor:#666; text-decoration:none;
" B& N7 n8 E8 D7 ~}
$ G6 f3 U1 g1 r: H8 X6 S8 n& K& P6 `#nav a:visited {! @( |( g8 S5 I2 Z
color:#666;text-decoration:none;( l9 H9 c" J% H$ m: j
}
8 {% h! y) s `. w#nav a:hover {; I; A, v3 N+ [7 h
color:#FFF;text-decoration:none;font-weight:bold;9 t4 B0 a& X1 e4 p5 `* \' Y. U
}! ~4 w/ I: y$ h
/*上面三個定義了根鏈接的鏈接樣式，bold表示指向時加粗字體*/5 D4 l# A8 b! h, R3 @
7 q0 q2 D1 t- g- d. |#nav li {
( o, N+ y, b t" T3 swidth: 80px;background:#CCC;
% F0 I+ y' b# v; M1 r/ P/*float：left浮動橫向對齊,width指定根鏈接顯示寬度,background為背景色, background:#CCC url(b2.jpg)設置一級鏈接的背景圖*/3 w0 D- h2 {; A8 ^# H1 ]9 B( q1 o
}" I B& d6 }0 n$ G) }6 q" N
#nav li a:hover{
h" S7 t/ I) d+ k5 t- \* ibackground:#999;1 T8 ~% _; y, ^0 m2 Q! x9 ]
/*當指向根目錄下的鏈接時顯示的背景色,url(b2.jpg)設置一級鏈接指向時變化的背景圖*/
' y1 X& P2 K0 v' [# Y5 B}/ E% w* k+ W- ?* |
#nav li ul {
$ G! ~+ {8 p. V4 V8 o: U; M+ bline-height: 27px;
" V& k5 a0 e9 rlist-style-type: none;
l9 h9 r' m4 r1 Qtext-align:left;
4 \8 h4 Q! ?$ ^' s) Ileft: -999em;6 J3 P. Z1 N @, L
width: 180px;
z, `* X% m& s9 x7 w) @" rposition: absolute;
4 O2 V1 ~5 W h0 J0 e; R. j" k/ F* Qmargin-left:180px;
# R1 c5 f D/ umargin-top:-25px
- d) g0 {0 @, F; \7 x/*這是定義在li內的ul屬性,line-height=行高,left:-999em是默認將ul塊左移出屏幕隱藏起來: ], D# @, U$ n" K
width=為ul塊的寬度，如果設置比li裡的寬度大，將出現二級鏈接橫排*/
0 D4 g' v- ^* o4 k}
- Y6 B o& ?( K( m0 H. M#nav li ul li{. Y6 T4 k1 f& w! ^" j
float: left; width: 180px;
. R7 Q& ~9 k) j7 bbackground: #F6F6F6;
+ s$ s/ ?+ s1 I6 U/*這是定義li內的ul內的li屬性，即二級鏈接的li的屬性,bg是li的背景色*/5 z% B0 n( X1 u/ _8 f
}0 q3 [7 g' d: O& r* Y5 |: ?
" j4 V* Z# R6 v) C0 i- s& s
; n; n% t9 x2 j6 v1 n# J z4 I#nav li ul a{/*這裡定義下拉菜單ul 的鏈接為一個塊*/5 B' w ]) o H# }7 O
display: block; width:160px;text-align:left;padding-left:20px;
% \, S1 k' K8 T6 R0 B5 ?/* width=下拉菜單寬度 ,padding-left是下拉菜單中鏈接第一個字向右移動的尺寸*/
2 l3 W, S5 j8 b}
, W7 p% j* p/ C8 e, z
7 S3 d; ~4 a- s2 } i#nav li ul a:link {- @; `5 J/ ]' N5 ?+ \
color:#666; text-decoration:none;7 ]9 a# {) s6 T+ Y! e: P
}
6 e- j0 [0 q n4 ]9 G5 z7 k: {#nav li ul a:visited {. \/ G7 I6 [/ j) L
color:#666;text-decoration:none;8 n; b; N( C7 e x$ _" N
}# V) e/ ?4 l9 L9 q& ^; o, f% H0 C
#nav li ul a:hover {; S+ l( ~# I6 F
color:#F3F3F3;text-decoration:none;font-weight:normal;
; o. t* }5 r8 v! [ d7 [background:#C00;0 G" J7 J2 y. N2 n0 ~5 k
/* color=鼠標移向二級鏈接時的字體顏色,background=移向二級裡的鏈接背景色*/
$ R/ z' a+ T5 @! A}
1 K! l; i& w: V( z1 r1 k8 Q: R; _/*上面三個是定義二級鏈接的樣式*/. z( i& ^- a N0 T0 e
#nav li:hover ul {* ]0 r( ^1 g: h( D6 M# s
left: auto;
/ H, [5 D% ]2 K7 w}& o, ?/ {" R/ ]/ I' m2 m+ p! t
#nav li.sfhover ul {
+ o: F9 s o" F( eleft: auto;4 P( Q$ p" s9 P" T3 @/ m1 q- S
}$ A5 j2 P4 b% P' O; n4 i* l; |6 j
#content {9 Q( n' o" W C
clear: left; 7 t, g1 T# t8 t
}; A+ L' f) i- c5 v$ {2 a3 l6 c
7 e* R" c# a4 U; y& K* k) J$ t
-->
0 p( |/ h- b7 h6 \, o</style>
) `7 U2 G6 U" P# k) |
$ ]1 v, ]: `$ Z3 p' q) v<script type=text/javascript><!--
" u* M/ K7 V3 |1 R' _function menuFix() {
# v; E" y' o( i) Dvar sfEls = document.getElementById("nav").getElementsByTagName("li");3 h" T- X6 _3 k9 F/ S: y; P
for (var i=0; i<sfEls.length; i++) {
' W: i) x" T Z4 v& q. }. e* G sfEls.onmouseover=function() {
8 ~, z, g3 P- X m) x8 v" L; t this.className+=(this.className.length>0? " ": "") + "sfhover";
6 |' f7 E: S$ } }
2 ~/ H/ }! }4 o% a sfEls.onMouseDown=function() {
0 z/ K: C _, R8 Y. |/ z2 ~& \ this.className+=(this.className.length>0? " ": "") + "sfhover";4 j$ Z# m# f. g" v
}5 f# C9 v- ~9 \: E( ^
sfEls.onMouseUp=function() {2 Z( t% p |! e. A& e7 G
this.className+=(this.className.length>0? " ": "") + "sfhover";. |! z' t5 k% C& i; x. K
}" Z+ ]& h! d: k
sfEls.onmouseout=function() {
" ?) v9 s+ ^" R: X5 k& G! i0 n this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 0 v5 a4 T, y1 Y; v& y( G/ |
7 z2 n1 f- I. y; O% k) \ i0 g"");
/ c6 V( a# G$ Z0 L) d0 ` Z }5 N: v/ e6 v) q
}; O8 {! _7 s; x+ d3 z9 E1 p
}
& I8 Z, w T# w0 \window.onload=menuFix;
2 X1 J2 }7 o- e1 g--></script>
. o6 h& i5 e8 t9 i' J, a0 A
* p( n: }6 t' P: w! ~</head>+ y$ _+ a( c9 J& L+ J; `
6 r( x6 v! L8 _9 M
<body>
. T8 d) u" s1 j/ ~; A# ?/ C<ul id="nav">8 _% Y/ m1 ]% W
<li><a href="#">產品介紹</a>
0 H: z5 {( V; n- O<ul>. y2 F$ E, \' _$ R( s3 [+ a
<li><a href="#">產品一</a></li>
5 ~3 g/ s/ Q6 ?& m% o: ^0 X<li><a href="#">產品一</a></li># @ }% B2 H4 Q3 u" U, R
<li><a href="#">產品一</a></li>
$ N$ I N: ]7 w; _<li><a href="#">產品一</a></li>
1 w- [3 a8 c, N& i! K0 y<li><a href="#">產品一</a></li>- T& x2 Z! f1 A) q' F& T
<li><a href="#">產品一</a></li>
6 I4 u, K' G7 Q9 j# {</ul>
& q& C3 ~9 i& E8 [</li>
/ k, x7 n2 ~- F# L<li><a href="#">服務介紹</a>
& f! N4 V5 J3 J<ul>. ^9 Z2 _$ ?% [) D
<li><a href="#">服務二</a></li>
/ s# d8 }; H) |, c3 u6 p7 s h<li><a href="#">服務二</a></li>
5 m' k9 c* W8 b% n* v<li><a href="#">服務二</a></li>
! y4 D0 y# a& P; v# T" j, W3 d<li><a href="#">服務二服務二</a></li>; t' k( O7 j2 x/ L
<li><a href="#">服務二服務二服務二</a></li>
9 K P- u* j1 w3 o) X& Y- T# y3 _7 H<li><a href="#">服務二</a></li>1 b/ m# H1 `, A% e) {) ^
</ul>9 {" r0 X' V% m9 \5 T0 O
</li>/ f" I9 _! V7 u) T# _: t& l: \# C
<li><a href="#">成功案例</a>1 a% u) g$ C, p% i
<ul>
( G) G* j, _: N, H<li><a href="#">案例三</a></li>+ {5 P' e) h/ J0 ^9 L
<li><a href="#">案例</a></li>$ N1 n6 g% f1 h, f/ O8 Y
<li><a href="#">案例三案例三</a></li>
; P0 `) z/ V/ S1 l<li><a href="#">案例三案例三案例三</a></li>
1 j8 }& ~9 P* l: |' N. Z7 H! j</ul>
0 k) M+ U$ ]8 u5 W4 e: Y. h; W* N% a</li> O! ?4 ^2 [$ P5 |; x
<li><a href="#">關於我們</a>
6 M5 }0 Y1 s- r7 s<ul>
% ? D$ k8 l1 p* @7 w<li><a href="#">我們四</a></li>
* e6 J2 V4 \' ?4 W# ^<li><a href="#">我們四</a></li>0 P P; V8 H% W+ v3 p
<li><a href="#">我們四</a></li>" O5 Q1 p% P+ l; a5 H
<li><a href="#">我們四111</a></li>; o5 A) U1 ?2 g0 M
</ul>
) T# t! H: b" s/ B</li>' ~& D3 h" B; b$ R' _: y# G
. f: `; N2 F \. X% |1 G<li><a href="#">在線演示</a>
& y$ M. s# R9 b5 j<ul>
4 U* a+ y7 H- ~! [( p9 z5 z( C<li><a href="#">演示</a></li>" a4 Z w/ N1 H/ R- J& o
<li><a href="#">演示</a></li>' J" s/ b, `8 J
<li><a href="#">演示</a></li>
: y) @0 o: ~0 E5 J$ c' y9 {) W$ x<li><a href="#">演示演示演示</a></li>
/ \. @0 V0 z0 }' B* k<li><a href="#">演示演示演示</a></li>' M0 r; a5 ]9 ^5 _/ J* a5 q* [
<li><a href="#">演示演示</a></li>
5 K& O. E% @1 ~7 @<li><a href="#">演示演示演示</a></li>
8 Q( Y. P4 `1 d/ O<li><a href="#">演示演示演示演示演示</a></li>
5 Q- q- F1 \ ^5 o+ M$ h</ul>+ a: x0 a" A# [: |& B& t, o
</li>
. X5 e2 a$ o* ?- r* X<li><a href="#">聯繫我們</a>+ M7 x3 [( ^' M# f7 X7 k. i- M' q
<ul>, ~& _$ s) |* \2 N
<li><a href="#">聯繫聯繫聯繫聯繫聯繫</a></li>
- u) @) S3 V/ _- g3 `<li><a href="#">聯繫聯繫聯繫</a></li>
2 }+ E) n5 o& J6 K8 M<li><a href="#">聯繫</a></li>! J9 J M. _ H
<li><a href="#">聯繫聯繫</a></li>
' p- `8 U9 {8 ^. Y( e9 f4 {8 d<li><a href="#">聯繫聯繫</a></li>
7 \& y; H2 ]4 r% v2 `8 u<li><a href="#">聯繫聯繫聯繫</a></li>. e% i- W- h2 P5 J2 t) Q) p6 c
<li><a href="#">聯繫聯繫聯繫</a></li>, Y1 N, V' U" @% z8 R
</ul>
, _5 H8 O6 Q5 H( q3 ~</li>8 {" o' X1 V7 Y3 e: e' _, K/ e
<li><a href="#">網站地圖</a></li>7 B+ w9 ~5 z; w. w* g
</ul>
% L. D! Z2 g( [7 ?7 o</body>
" G, W4 V( h, n" X' ?- s</html> |
|
發表於 2007-8-24 14:38:54
提升卡
沉默卡
变色卡