CSS..研究...............

傲天♂浪子追风 · 发表于 2006-10-30 18:56:14

* { word-break: break-all; } /*在IE中实行强制换行*/
7 W9 _& f" t7 Z3 l( u' }
#newsblock { margin-top: 4px; }
" Y6 b/ l" P5 y7 Q6 R4 R% G% Q
/*-----------------------------------------------------------------------------------综合设置*/$ q* D" ^: R- P. Z) z1 z
$ D" r5 |/ o/ _
body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }2 g, U1 [3 u& W9 B. u
#wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
) M4 G9 l* Z# w! E* X& d
' S2 v. K* v3 l( o) [
/*链接样式*/6 }1 K+ M5 t4 I
a { color: #000; text-decoration: none; }8 F7 U+ [9 o9 \6 {% O0 q5 }
a:hover { text-decoration: underline; color: #000098; }
. a$ f9 k/ J3 w8 M% N1 H
a:visited { color: #666;}0 c0 d" A* K. }
#topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }5 \6 }4 L' R9 L$ M+ p
#topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
8 U d8 H0 ~; i# V3 @5 K" \, g
a img { border: none; }; k5 O- A, A* R
li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
# ?- }8 ]% ~- N' F+ S
li cite a { color: #999; }2 N4 k+ @. o" U7 I" I
li cite a:visited { color: #999; }7 V, d* H: h& o7 Z/ ~) V3 j' _
.more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }$ {) S- x2 @ A1 o' | }
W: _+ W: n) i, J
/*-----------------------------------------------------------------------------------表单通用样式*/' }1 {" }+ @6 a, R
. P8 R" _# q- k6 Q
form { margin: 0; }) ~2 D, E2 N. O& t% S2 X! @# _
input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
$ t* k4 P% L. X* W9 x! N
button { height: 1.8em; padding: 0 0.3em; background: #9FC8DF; cursor: pointer; border: 1px solid;! D0 n* b% ~3 H
border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }" K* _6 M. p8 _
fieldset { border: 0; padding: 0; }
4 L% e! g' I* y9 u- c
legend { display: none; }
- N; N3 H: T: ?( G: f
label { cursor: pointer; margin-right: 0.5em; }
0 k+ l9 H: D9 ]1 s+ h) o0 ^0 `
. n; z; t' {+ [4 C3 u# O
/*-----------------------------------------------------------------------------------头部风格 Header*/
2 S! U" _+ k/ q
/*顶部导航*/( q, q; K9 Z2 R/ V
#topmenu { background: #9FC8DF url(../images/new/title_bg.gif) repeat-x 0 -3px; border-bottom: 4px solid #F5FBFF; border-top: none; text-align: right; line-height: 2em; }
# ~; T& l( a, i) \ G8 b
#topmenu ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #86B9D6; }* z+ T& A, `& H) X* T5 D
#topmenu li { display: inline; border-left: 1px solid #86B9D6; padding-left: 1em; padding-right: 0.5em; }
6 z- E4 b- F: {# x9 g+ p
#topmenu a { color: #154BA0; }
; ]9 R- x+ x6 r: D
8 B) G: ]5 U3 G' N9 K/ @3 `: X
#pagetitle { padding: 8px 0; height: 76px; he\ight: 60px; border-bottom: 4px solid #F5FBFF; }$ U3 X0 ?9 D$ I6 k
#logo { border-right: 1px solid #86B9D6; padding: 0 10px; margin-right: 10px; }
( g0 _+ [9 ]" C& P& [ M6 B
.banner468 { float: right; }; m2 N, M& ~7 M2 {3 B* B4 W; S! k
$ J t1 W$ D& w5 b/ W* ^
/*主导航*/% ?5 W6 T E: j8 R) k
#menu { border-top: 2px solid #86B9D6; border-bottom: 1px solid #86B9D6; line-height: 25px; background: url(../images/new/menu_bg.gif); width: 910px; overflow: hidden; }
) I4 M" w& B- b
#menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
7 y4 w( o# u5 S; C3 z
#menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
- y! U9 O5 x. }/ Y T6 H0 N+ F
/*首页导航*/. ?# R8 x8 _# _' l0 i# z
#menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
; A. z9 M& ?: w* \5 d
#menu dt { float: left; width: 4em; white-space: nowrap; }
; [6 F6 s+ F- e6 ~
#menu dt a { color: #000098 !important; }
3 P) g8 e* }8 w' Y" K
#menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
0 u; P$ S+ b3 P R' L' V. _5 @3 t- ]
: P9 L2 C" |' U
/*您的位置导航*/
% n' z. v9 @ o" ?+ M
#navigation { padding: 1.2em 0; }" j- P" I3 i. t6 k2 y {( D- e
#navigation p { margin: 0;}! {% ^. H9 Y6 e3 z
#navigation p a, #navigation p strong { margin: 0 0.5em; }+ s5 N: r. R4 z2 p# L
#searchform { float: right; }
' c( u- J8 p* E9 N- O
#searchform * { vertical-align: top; }
7 I: P, s# Y( g+ }1 N' Q5 W4 d \
#searchform button { margin-left: 0.5em; }% @! \" d' p& B" j0 X3 U7 ~
! i4 u# h) d- l( t) s. |3 V
#navigation.simplepage { padding: 0; border-top: 2px solid #009DEA; border-bottom: 1px solid #009DEA; line-height: 25px; background: #EFF5FF; margin-bottom: 1em; }/ c+ V8 e; q# B- Z! ~
#navigation.simplepage p { float: right; margin-right: 0.5em; }
7 ?2 w4 W, v2 i2 g2 }! a
.simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 0.5em; }% Q0 G: d& e, |' N X3 a" @' e0 K ~
" r1 b% s/ j( q" K) c
/*-----------------------------------------------------------------------------------布局*/
- p; J8 Z: b# F' m! H9 r
$ J4 B2 U9 n7 @* V& j9 w" Q
.content { /*三列布局*/
- a: U3 ?9 b* u. y" H- u: K! J
width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 0 0; }
8 Q! t% L# l: W1 x7 ^
/*\*/ * html .content { height: 1%; } /**/ *>.content { overflow: hidden; }
9 R2 w- N) ^8 R& I
.contentL { /*两列布局，侧边在左侧*/
2 _& ?9 q' `4 p, D& c8 b$ U, Y
width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y -590px 0; }; F/ ^" Y- h# c2 A5 \
/*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }! F: p8 E: G6 R1 l: G& J4 l" _
.contentR { /*两列布局，侧边在右侧*/
6 v! B# b6 t! {; p! ^7 S1 u j+ }
width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 580px 0; }
5 h5 u2 u) ~, v
/*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }! j; N4 Q: O, C# N
/*侧边样式*/2 c' f) u2 M+ Y3 y2 f
.sideL { width: 296px; float: left; overflow: hidden; }3 P$ I/ ]; v" f' w/ ^6 E
.sideR { width: 202px; float: right; overflow: hidden; }
@# N6 r% R- _, O O5 u
/*中间部分样式*/
8 t% E2 O0 w( w6 V9 u' N
.mainarea { margin: 0 4px; width: 382px; float: left; }4 p0 T; @9 A1 v' Z1 k# ]8 w
.contentL .mainarea { margin: 0 0 0 4px; width: 556px; }4 l" a' ` j( z
.contentR .mainarea { margin: 0 4px 0 0; width: 576px; }
5 l2 G0 J" r* T% Y2 P# m
" W, V6 W. Q: _1 Z5 o0 u# t
/*-----------------------------------------------------------------------------------版块样式*/
# l' D! z+ k1 J" d% f
, E9 K2 ^1 E. ~( l
/*版块标题*/0 g1 `, }0 o( @8 l7 B5 ^
.blocktitle { clear: both; border: 1px solid #86B9D6; padding: 1px; margin-bottom: 4px; line-height: 30px; }) _; e" w7 r& g
.blocktitle h2 { font-size: 1.2em; margin: 0; padding: 0 5px; background: #9FC8DF url(../images/new/title_bg.gif) repeat-x; }5 E l: F4 J+ \0 b) _
.blocktitle .more { margin-right: 5px; }
0 ]9 A! @+ h5 A+ A& {. F5 X
m1 ~4 \; o9 M6 _
/*头条信息*/ g9 l$ q V2 T0 g9 p
#headline { padding: 5px; height: 70px; he\ight: 58px; overflow: hidden; }
& x! j6 u) j+ ]( q1 @ H
#headline strong { font-size: 1.2em; }/ z/ k6 Z+ z% Y6 W" {
#headline p { margin: 0.3em 0; }
. S- \' Y9 m. L, z* F5 J
#headline img { float: right; width: 48px; height: 48px; border: 4px solid #FFF; }
) b4 q3 x H8 Y$ D2 |
! c" S0 Z/ h4 W2 R/ z/ ` w
/*侧边版块*/
- u/ A2 ^5 A* I% t
.sideblock { margin: 0 0 3px; border: 1px solid #86B9D6; background: #FFF; padding: 3px; }
! k7 `' f( p* J
.boldblock { padding: 1px; background: #9FC8DF; } /*突出版块*/
- Z, |6 C# X- J* k( r# D( ?
.cleanblock { border: 1px solid #86B9D6; margin: 0 0 4px; padding: 0; background: #F5FBFF; } /*简单版块*/- U7 ?+ _; ]1 B! ~
.sideblock h3 { margin: 0; font-size: 1em; line-height: 2em; padding-left: 0.5em; border-bottom: 1px solid #BBE9FF; }
z' b, ~' w! O) U7 R$ W
/*\*/ * html .sideblock h3 { height: 1%; } /**/
, q* a' [7 B" u( l; `/ |6 j) p/ I4 O" N
.sideblock p { margin: 0.3em; line-height: 1.6em; }
2 P4 O+ [2 J0 Y
.headimg { float: right; margin: 5px 0 2px 5px; width: 80px; height: 80px; border: 4px solid #E2F0F9; }" R2 `( |+ g% d3 f7 n& ^
6 s, Z, u3 H) V: ~1 p
/*侧边多行列表*/
; E4 b- U/ _/ f, B8 J
.sideblock dl { margin: 0; padding: 5px; background: #FFF; line-height: 1.8em; }
% L: A& Z! N8 Z# l7 T" ^
/*\*/ * html .sideblock dl { position: relative; } /**/
3 w/ K- D( t$ r) u
.sideblock dt { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
) M( w5 b; m; I3 ?" ?3 Z" n
.sideblock dd { color: #999; margin-left: 0.8em; }
/ L- {, E/ u# E
.sideblock dd a { color: #999; }- V, \& p. N+ }8 H+ A
. S6 v! z" f8 n0 u
/*单行信息列表*/
. p& R: K7 S2 }# m: h8 R
.msgtitlelist { margin: 0; padding: 5px 0; list-style: none; line-height: 1.6em; }. G; _$ ^, O1 r* n8 M; S; l
.msgtitlelist li { height: 1.6em; overflow: hidden; padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
9 }; I# z4 U$ ^" o7 _
.mainarea .msgtitlelist { font-size: 1.2em; }
U* Y3 U& T0 r* @+ ~
.sideblock .msgtitlelist { background: #FFF; }
" T+ N1 H, Z3 F' F0 c3 S% H
( \. P' C* N! K: X$ R
/*多行信息列表*/3 @2 `( A- P9 N
.messagelist { margin: 5px 0; padding: 0; list-style: none; line-height: 1.6em; }7 a/ ]/ ~) J' J- w0 C7 l
.messagelist li { margin: 5px 0 10px 0;}8 J: T4 Q6 @ g+ ^0 b6 {- g
.messagelist li h4 { margin: 5px 0; font-size: 1em; line-height: 2em; background: #F0F9FF; }9 A& ]/ M3 y: I# t. q' g
.messagelist li h4 a { color: #009; font-size: 1.2em; }
5 S m O. r4 f/ d- I. Z4 ?. ?
.messagelist li h4 a:visited { font-weight: normal; }
# O4 ^5 l% w# _( w1 |0 k3 ]2 @
.messagelist li p { margin: 0; }
% W o% X& Q5 a& I W$ f) P I
& i. s% z( @8 P3 u+ R6 h$ `9 u. O
.messagelist dl { margin: 0; padding: 0; line-height: 1.6em; }
/ g9 p8 P& r+ o. E8 K1 `4 X
.messagelist dt { background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; padding-left: 0.8em; }
9 Y( a8 n; ?" R/ h. g( r5 C" n
.messagelist dd { font-size: 12px; margin: 0; padding-left: 1em; color: #999; }
" m& `% A( ?) y
.messagelist dd a { color: #999; }
R5 r' @! J2 p6 a2 l, w% f3 E3 W( u
2 _0 l7 }6 i, N) k5 L+ C
/*热门话题*/
@5 b$ |9 ^; X
#hottag { overflow: hidden; }5 w. O$ A% a/ G) p, X2 `4 T
#hottag div { background: #FFF; padding: 0.5em; overflow: hidden; line-height: 1.8em; }
. H8 R) r) K n6 x( k7 m+ I, ?
#hottag div { color: #999; overflow: hidden; }
8 }1 G! E. c J8 Z
#hottag a { margin-right: 0.2em; white-space: nowrap; }' ]; o# B: p4 N+ f3 ?4 w0 z
#hottag a em { color: #999; font-style: normal; }( h. u/ @2 A: ?
( a$ @9 n1 J( |% `# I/ }- {
/*用户面板*/
k' n: Y% ?5 Z- i! |
#userpanel { height: 8.8em; overflow: hidden; }6 |4 S7 q# N s3 U, Z$ H
#userpanel form { margin: 5px auto !important; margin: 0 auto; width: 150px; }
2 C0 h# I! Y: R6 _5 N+ S' i
#userpanel input { width: 90px; }$ D: _1 `; w2 e9 ^5 k
#userpanel p { margin: 0.5em 0; }
7 K' |3 v* Z, K) r3 r' H5 G
#dologin { float: right; }
1 l+ N( ~! u; g2 l
#userpanel form a { line-height: 2em; color: #B353B3; border-right: 1px solid #86B9D6; padding-right: 5px; }/ d2 J9 y* { r$ C1 z
/*登录后*/
* T3 {: u4 p! d w3 G
#userpanel li { border-bottom: 1px solid #BBE9FF; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.8em; padding-left: 12px; }0 q2 P; F, Y! k! N {. G1 K2 s
#userpanel li a { color: #000098; }
' a' n3 D, F" H8 m. D+ B9 ~
, o( |8 n# |; L, X) o/ c" J$ e
/*空间之星*/
H& D' L7 W# F# r
#spacestar ul { width: 168px; margin: 0 4px; padding: 0; height: 235px; }
, K8 J( I/ D9 C3 `7 N; E) c
#spacestar li { float: left; display: inline; width: 54px; height: 70px; overflow: hidden; margin: 3px 1px; background: #E2F0F9; text-align: center; }
" K( K5 W3 ^ F# g
#spacestar img { width: 48px; height: 48px; margin-top: 3px; }
- X; z# \1 ^/ \ X8 `
#spacestar p { margin: -4px 0 !important; margin: 0 0; line-height: 20px; height: 20px; }. ^* v" M' B1 ~' u& f
# T( X/ c& i& ]2 i1 j
/*同城空间*/" I) ?1 x0 ]; @- |! R* M) O* `6 f
#cityspace { background: #F0F9FF; }
. \" p4 n; C! W! r/ l Y
#cityspace form { width: 10.5em; margin: 0 auto; padding: 5px 0; }
0 M' u5 d6 N+ u: h
#cityspace select { margin: 2px 0; }- q$ J, r3 L- j+ a2 L3 J: H, E
#cityspace button { float: right; margin-top: 4px; width: 3.5em; height: 3.5em; }
0 X) B9 C) P, C# R1 r& s- @
#blogblock #cityspace { margin: 0 0 4px 0; }
0 ~6 V! N5 ~1 k, ?
, i, R$ v+ m- a0 p2 T# X2 H+ e) I) Z
/*空间排行*/
# l. ^# H4 W" W8 `) u( _
#hotspace ol { margin: 0; padding: 0 0 0 20px; line-height: 20px; background: url(../images/new/hotspace_bg.gif) no-repeat; list-style: none; }* p' _% R" {0 S* X2 [1 \% G
#hotspace li { height: 20px; overflow: hidden; }( F1 a1 X' `. G0 V& C+ Y, O. x4 M4 \
#hotspace em { float: right; font-style: normal; font-size: 9px; color: #999; width: 40px; }6 X9 u- F' o- a3 {: v
0 M* N4 G/ b4 D4 X
/*热门文章 */
6 O: J' r+ y/ T
#hotarticle { border: 1px solid #86B9D6; background: #E2F0F9; padding: 3px; position: relative; }4 e( l0 V: X5 M* b( {" M+ F
#hotarticle h3 { font-size: 1.2em; margin: 0; line-height: 22px; border-bottom: 1px solid #86B9D6; }) s! C, |" D7 d& \; h& s7 j
#hotarticletabs { position: absolute; margin: 0; line-height: 18px; top: 7px!important; top: 8px; right: 10px; }
( g1 d7 v# c; _! \" s. }+ u8 @
#hotarticletabs span { background: #86B9D6; float: right; color: #FFF; margin-right: 2px; height: 18px; padding: 0 5px; cursor: pointer; }
* F6 K/ u/ v6 s' R- K
#hotarticletabs span.active { background: #FFF; color: #333; border: 1px solid #86B9D6; border-bottom: none; }
' j" l+ Q0 L" Y z" B n
#hotarticle ul { background: #FFF; margin: 0; padding: 0.5em; list-style: none; line-height: 1.7em; height: 16.5em; overflow: hidden; }" g/ D2 r5 H1 m# e! A
#hotarticle li { height: 1.7em; overflow: hidden; color: #999; padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }* H' n4 Z; v) L
6 [1 {, p- u# \% f
/*图片列表*/1 S {8 z6 C. J) Y+ z
.imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
: t/ m# n1 j$ ]; P$ D
/*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }: i# J2 p6 K8 \9 ?/ |. J8 }: e
.imgthumblist li { float: left; display: inline; background: #F0F9FF; width: 108px; height: 163px; width: 100px; he\ight: 155px; overflow: hidden; border: 1px solid #B9D0ED; padding: 3px; margin: 3px; }; D/ r: g V$ e' z" d
.imgthumblist li.list1line { height: 123px; height: 115px; }
. n6 X. |0 o6 Z9 n) S/ p
.imgthumblist li.list2line { height: 143px; height: 135px; }
$ V$ I0 I5 W# i6 T' P
.contentL .imgthumblist li { margin: 0 1px 3px; }+ d6 L" e. E- a: g* ^9 U
.imgthumblist img { width: 100px; height: 100px; }
3 g: g4 o/ G- I5 i% p9 A
.imgthumblist p { margin: 0; text-align: center; line-height: 1.3em; }
( N5 c1 w5 M) o6 @# M& x
.throughgallery { width: 100%; clear: both; margin-bottom: 5px; padding-bottom: 3px; background: #E2F0F9; }
) ^: r* Q. z; \/ g7 @' ~+ u
.throughgallery .imgthumblist { margin: 0; }
2 ?9 n# [! n% p! t4 J8 ^2 Q' [6 e1 p, K
.throughgallery .imgthumblist li { height: 120px; margin: 3px 1px; }5 o" q" i2 {" `* m: G: o
0 ?: D& l$ _/ ]6 p3 K, u9 I( K$ U6 Z
/*商品*/
. z0 A* v6 G, W" y7 ^
/*\*/ * html .goodsthumblist { height: 1%; } /**/ *>.goodsthumblist { overflow: hidden; }
& s& X1 x7 K% v) G
.goodsthumblist { margin: 0; padding: 3px 0; list-style: none; }
' z z$ ]" j: s" G- J
.goodsthumblist li { float: left; width: 90px; height: 100px; text-align: center; }
4 n0 w. S4 n( B
.goodsthumblist li img { width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
' L) l# f' U0 n) w* C9 ?
.goodsthumblist li p { margin: -3px 0 0 !important; margin: 0; height: 1.5em; line-height 1.5em; overflow: hidden; } Y& k) @9 T% F Y$ g7 u3 d
/ D" f8 q" |/ ~# A2 |2 o0 }
.imgtitlelist { margin: 10px 0; padding: 0; list-style: none; }4 r3 l+ [- q0 q# \* @
.imgtitlelist li { padding-left: 85px; padding-bottom: 5px; margin: 5px 0; border-bottom: 1px solid #E2F0F9; }
" J# H' k6 d# ~: F& Z6 Y; K/ F
/*\*/ * html .imgtitlelist li { height: 1%; } /**/ .imgtitlelist>li { overflow: hidden; }/ V8 C& l. B! x2 g) t! x
.imgtitlelist li h4 { margin: 0.3em 0; font-size: 1em; }
! J0 N- A! B! H2 m5 f% X
.imgtitlelist li img { float: left; margin-left: -85px; width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
. y8 ^4 `. |5 d' c2 Z5 F4 I
.imgtitlelist li p { margin: 0; line-height: 1.5em; }! S% O1 ~% \5 D/ V4 X
.sideblock .imgtitlelist li { padding-left: 65px; }
9 { I3 b$ ?- V& ? `/ F
.sideblock .imgtitlelist li img { width: 48px; height: 48px; margin-left: -60px; }
$ M, g$ Z$ }; z! @2 v- U
8 ]/ \0 |% ~0 i
) W6 I# d) R+ h5 S
/*栏目区块列表*/
: [0 O& }& _) H! U: E
.category { margin: 4px 0 10px 0; }
4 X5 c" G: R' ], G0 L% K4 I2 J
.category h3 { margin: 0 0 5px; font-size: 1.2em; line-height: 1.8em; height: 1.8em; border-bottom: 1px solid #86B9D6; }- m6 S/ g" L m; Q" C
.category h3 strong { background: #E9ECEF; float: left; padding: 0 8px; }$ w2 v& o& t0 s
.category h3 strong a { color: #333; text-decoration: none; }
1 ^& D' Y# z- S' j
/*.category ul { background: #FFF; margin: 0; padding: 4px 0 0 0; list-style: none; line-height: 1.6em; }
& k7 n% c# ^; ^( E; c! K l6 A
.category li { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }# P8 g4 P; Q3 o$ |; C2 P6 l" H
.catecommend { background: #F0F9FF; margin: 0; line-height: 2em; height: 2em; overflow: hidden; padding: 0 1em; }*/
& m. E. d% n# |/ Z5 S
.catecommend a { color: #000099; white-space: nowrap; margin-right: 0.5em; }8 E% X& \) x8 r; d: V2 o
+ ]8 g2 @3 `2 `* z* F2 Y
! g* u: y' }2 S! K' k r/ c
/*-----------------------------------------------------------------------------------首页各版块*/
+ W* s& `0 r2 j( x8 z
' E0 c( [1 S: y0 w
/*#commendimage { height: 155px; }
+ G$ c$ Y5 o; j% k" Y2 o( x9 P1 X
#topicnews { height: 217px; }
/ z& w2 j/ T/ v. H1 S' ^
#newgoods, #commendgoods { height: 200px; }; y3 g) ?) H5 p1 a! m+ O
#hotcommentfile, #hotfile, #newlink, #hotlink { height: 220px; }*/
6 M) W) s7 X! a( O: a" g; b
$ V5 a* m4 _) s# _! i
: a3 S' T1 e/ ` N$ j( A p; K
+ c H& m: ?2 q* e2 c
* \( M3 t$ z5 Y. Z6 b
/*信息列表*/1 o0 I6 o- E, k
.articlelist li { padding-left: 60px; }" s a" g; ^8 \& y
.articlelist h4 img { float: left; margin-left: -60px; width: 48px; height: 48px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }1 j8 j, H# B: p
/*.articlelist h3 a { font-size: 12px; font-weight: normal; margin-left: 1em; color: #B353B3; }# S) S$ P- b: r9 n6 G( e5 U" [, c
8 I+ D* ?( j( G
.articlelist ul { margin: 0; padding: 0; background: #FFF; padding-left: 5px; list-style: none; }
1 Y7 }: V( H' O [4 k; y3 B
.articlelist li { position: relative; padding-left: 60px; margin-top: 1em; }
' W$ j& @4 F5 ^: e/ Z6 \9 [# P4 D
.articlelist h4 { margin: 0; background: #F0F9FF; font-size: 1.2em; padding: 0.2em 0.5em; cursor: pointer; }3 F/ v3 a" n6 R+ [1 a# e. K& {" U# d
.articlelist h4 em { font-style: normal; font-weight: normal; font-size: 0.8em; color: #B353B3; margin-left: 0.3em; }
: o6 W6 j, S( e4 A% Q" N! y. R( q
.articlelist h4 a { color: #000099; }( {, M9 ~$ u( N
.articlelist li img { position: absolute; left: 0!important; left: -67px; top: 0; border: 3px solid #9FC8DF; width: 48px; height: 48px; }0 l" ?' v: n5 s2 V$ p$ d/ o( \; P
: o3 \; G4 A/ `& ~$ \
.articlelist li strong { font-weight: normal; color: #999; line-height: 2em; padding-left: 0.5em; }4 X: \5 k$ i# E2 B
.articlelist li strong a { color: #999; }
" [) y( q( }: j4 O8 z" i% t
.articlelist li p { margin: 0.3em 0; line-height: 1.6em; }5 ?0 ]% T% a& |
.articlelist li p a.more { float: none !important; }*/
& V5 N. O5 V+ P
( B [% U9 k7 c& ^& ?* X
5 o7 B2 m1 D. f' p# i2 Y
.catepic { text-align: center; }5 P5 ~! i' l# A' Q6 W. I R
.catepic img { margin-top: 10px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED;
! r6 t" K- b5 H/ B: `
max-width: 150px; max-height: 150px; width: expression(this.width > 150 ? 150: true); height: expression(this.height > 150 ? 150: true); }
! W6 t& d8 Z+ k& V& G8 |7 P
.catepic p { text-align: left; margin: 0.5em; }7 y, u& |5 x t0 a
1 {' S% l0 W1 \
/*专题列表*/2 ~* a# |6 y: ~3 _$ g
#subjectlist { border-color: #86B9D6; padding: 2px; }' ?0 z* F* o" U( n7 N7 m% c4 D
#subjectlist h3 { border: none; background: #9FC8DF; }% O! k0 N4 L9 j
#subjectlist li { border-bottom: 1px solid #E2F0F9; text-align: center; padding: 3px; }
. r1 D9 z3 a% J; l
#subjectlist p { margin: 0; line-height: 1.2em; }1 }: k8 _' p+ d7 u4 A* t
9 y# T6 T- x6 W
8 w7 A/ i0 O& s* b9 \
#xspace-rates { height: 2em; }
% U5 N: ~9 ?8 N$ [. o j
#xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }0 H! ?6 s1 e1 m3 t) `, S5 d4 p
#xspace-rates a { float: left; border: 1px solid #EEE; text-decoration: none; width: 20px; height: 20px; text-align: center; line-height: 20px; margin: 0 2px; }
( T# g0 x7 t5 Q+ k+ [
#xspace-rates a:hover { border-color: #CCC; }) F" }2 U9 H" ~; x1 Y8 n; l: [
.xspace-rates-5 #xspace-rate-5, .xspace-rates-3 #xspace-rate-3, .xspace-rates-1 #xspace-rate-1, .xspace-rates0 #xspace-rate0, .xspace-rates1 #xspace-rate1, .xspace-rates3 #xspace-rate3, .xspace-rates5 #xspace-rate5 { background: #DDD; border-color: #BBB; font-weight: bold; }
$ g x; R& M6 Q+ Y2 ~+ D7 Y" g3 @2 x
$ {: N7 O$ [) R' D% Y: \ K
; c# b& y6 A' y( k) r: `0 q
#panel { width: 600px; overflow: hidden; margin: 1em auto; }
4 t5 a# t( ~4 C3 {: w, j' R
% b3 b6 _- n' T Z: h
7 I* b% Q! V1 N4 I7 ]$ ?/ S% K+ m
/*Pages*/6 P0 \8 u0 n' o. a) E
.pages { text-align: right; border-top: 1px solid #9FC8DF; }) x! V- }* E1 ^8 v
/*.pages table { margin: 3px 0 3px auto; text-align: center; }( F2 [0 Y7 h/ {. K" T
.pages td { padding: 0 5px; border: 1px solid #B9D0ED; background: #FFF; }- H, g3 n+ h% h7 l
.pages a { text-decoration: none; }
" N1 A# I6 |# O6 I2 M! F* o/ C! j
.pages .currentpage { background: #F0F9FF; border-color: #86B9D6; font-weight: bold; }*/+ @. E5 X1 Y, m* q
. {- Q) Z& D6 O
/* 分页 */
+ f2 f- k/ F& P1 }, Y8 m' p* V: {& i
.xspace-page { margin: 2px 2px 2px auto; }
, S5 }7 w/ X/ o) f R7 w ~* q
table.xspace-page a { display: block; background: #E2F0F9; padding: 0.3em 0.5em; text-decoration: none; }
) p. E$ F' D5 [ Y/ ]6 p; G
table.xspace-page a:hover { background: #86B9D6; }' c3 o8 e9 Q2 V& V# h) d4 L
table.xspace-page td.xspace-current { background: #86B9D6; padding: 0.3em 0.5em; font-weight: bold; }. x+ m! t( w/ N g
table.xspace-page td.xspace-totlerecord, .xspace-page td.xspace-totlepages { background: #E2F0F9; padding: 0.3em 0.5em; }
5 U4 B6 l' Z# r7 B; k6 n
& s7 L6 w! T# c+ `
.smalltxt { font-size: 12px; color: #999; font-weight: normal; }; P0 h1 f! t# V% N9 X( I
.smalltxt a, .smalltxt a:visited { color: #999 !important; }' r' y: I) h4 }) k! w7 w# d
7 t- ?' d. P, u9 ~. G. b' s5 B
/*-----------------------------------------------------------------------------------页脚 Footer*/0 z& u0 m7 u9 | @0 _: H
#footer { clear: both; border-top: 2px solid #86B9D6; padding-top: 1em; padding-bottom: 2em; text-align: center; font: 100% Verdana, Arial, Helvetica, sans-serif; }
+ l$ ~2 a; Q! n) \# e2 n
#footer p { margin: 0.3em 0; color: #999; }# y2 m- I( K ~0 g* y( j4 \9 T& _* @
#footer strong { color: #007AB6; }0 j$ G+ L _+ A" l, `- _6 j" R. ]
#footer em { font-style: normal; font-weight: bold; color: #96A800; }
6 ]0 ^9 P% W9 x) M
/ _! k# R! ]/ M' ^
.imglogolist { margin: 0; padding: 0; list-style: none; text-align: center; }3 N% g' i' K9 E
3 V" E+ L* C2 c
#articledetail { border: 1px solid #86B9D6; text-align: center; }8 \# c8 T F Z( \8 @* B2 e! U# F
.articletitle { font-size: 1.6em; margin: 1em 0 0.5em; }- T0 m: z' H( Q: P
.articleinfo { border-bottom: 1px solid #9FC8DF; margin: 0;}
% T9 p j ^5 P# V6 X
.articlectrl { margin: 0.5em 0 1.5em; }6 G9 o2 b) C8 c' w8 s
+ c, w- C7 T8 M2 t
#articlebody { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; font-size: 1.2em; }
% P4 m f7 Z4 |3 n
#articlebody * { line-height: normal; }
4 I# n; I$ c2 v
#articlebody p, #articlebody div { line-height: 1.8em !important; margin: 10px 0; }, O3 f1 u0 w9 P2 o
#articlebody p *, #articlebody div * { line-height: normal !important; }
- z% m2 A" a* N
) b- ~8 o$ K5 _+ e8 K* M. c( o
#articlebody .addoninfo { border: 1px solid #EEE; }+ M+ h: M8 v# q5 G
#articlebody .addoninfo h5 { font-size: 1em; margin: 0; line-height: 2em !important; border-bottom: 1px solid #EEE; padding-left: 1em; }- E: J7 m8 S' ^4 e6 U/ z
#articlebody .addoninfo ul { margin: 0.5em 0 0.5em 2em; padding: 0; }
3 J. Y: S5 y( K7 q& f3 h) o8 i, w
#articlebody .addoninfo li { line-height: 1.6em !important; }
% F7 ?9 ^& B7 P4 e
]' i8 D* E% e m
#articlebody img { width: expression(this.width > 500 ? 500: true); max-width: 500px; }# L0 v. H4 r5 x9 ~. \- @0 K
& U6 u8 U. }5 S o/ d# \/ T
#articlebody kbd.showvideo, #articlebody kbd.showflash { font: 1em Arial, Helvetica, sans-serif; cursor: pointer; text-decoration: underline; }, _+ k% [1 o7 q Z% ^% n
#commentlist { overflow: hidden; border: 1px solid #86B9D6; margin: 4px 0 0; padding: 0 5px; }
7 ^: p7 a4 \5 L
#commentlist h3 { font-size: 1em; line-height: 2em; margin: 0; background: #F0F9FF; border-bottom: 1px solid #86B9D6; }/ a- O( |/ q# @4 V/ N
#commentlist img { max-width: 500px; width: expression(this.width > 500 ? 500: true); }7 X, c. T v$ }# d2 O) K6 f
#commentlist .messagelist li div { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; }
2 i o# g+ M5 |' {( _9 v
#commentlist .messagelist li div * { line-height: normal; }- V0 R/ ?/ }% M$ Z, `. e2 g
#commentlist .messagelist li div p, #commentlist .messagelist li div div { line-height: 1.8em !important; margin: 10px 0; }
3 y9 v( X# c8 V7 R3 [" ~8 {8 F
#commentlist .messagelist li div p *, #commentlist .messagelist li div div * { line-height: normal !important; }
5 ?& M' Y/ c3 R% k7 w6 e. s$ M4 {3 Y
: ?- [0 D+ o- Q7 ~- A
/*发表评论*/+ H5 C. e- N1 Y. h& I
#comment { margin-top: 4px; }; C& u G: s5 t2 ^5 _
#comment h3 { margin: 0 5px; font-size: 1em; line-height: 2em; }% q# s, _. H& w7 ^* f
#comment form { background: #FFF; margin: 0; padding: 5px; }
5 s2 l, W# I+ X5 i" U: T) i2 A$ @0 R
#comment p { margin: 0.3em 0; }
! F2 v" I+ s- L: D( ]. |
.seccodeline * { vertical-align: middle; }
' Q4 Z* W+ F2 w! i3 f1 W
#xspace-rates { height: 2em; }
, ?% d5 \# P, S# B6 n& J1 t- {" o
#xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }* ]' R; { ]* z
#xspace-rates a { float: left; border: 1px solid #EEE; text-decoration: none; width: 20px; height: 20px; text-align: center; line-height: 20px; margin: 0 2px; }
& I; l5 p* I: F6 H, o
#xspace-rates a:hover { border-color: #CCC; }9 j' ~; m" ^8 I8 O+ s
.xspace-rates-5 #xspace-rate-5, .xspace-rates-3 #xspace-rate-3, .xspace-rates-1 #xspace-rate-1, .xspace-rates0 #xspace-rate0, .xspace-rates1 #xspace-rate1, .xspace-rates3 #xspace-rate3, .xspace-rates5 #xspace-rate5 { background: #DDD; border-color: #BBB; font-weight: bold; }4 i( R, k; ]! X
8 [- j# c/ t1 D4 g# ~/ a
/*AJAX div*/! a. f6 S5 H4 W' f" p
.xspace-ajaxdiv { position:absolute; padding: 5px; border: 1px solid #BBB; background: #FCFFEF; text-align: left; }
" e/ w7 y& ^0 w- h* I$ |; F
.xspace-ajaxdiv h5 { line-height: 24px; font-size: 1em; margin: 0; }( Y( V n7 B, [/ C' V, I9 z# \
.xspace-ajaxdiv h5 a { float: right; font-weight: normal; }5 U6 k1 R% C7 y \% R
.xspace-ajaxcontent { background: #FFF; border: 1px solid #EEE; }6 q( P2 a1 O$ ~4 r1 C D( }
.xspace-ajaxcontent form { margin: 0; }

复制代码

傲天♂浪子追风 · 发表于 2006-10-30 18:59:01

/*-----------------------------------------------------------------------------------综合设置*/
( k1 {& [9 _/ e4 x4 l6 T# |
2 I i* T$ B, D P
body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }) P9 B Y* E' u! F. }# r, _$ ]. i
#wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }8 F- C" p- w6 e& k' A5 C8 n, L
6 G% G. N. }1 D

复制代码

分析

margin属性说明：# n3 L* U5 A) }/ v# S
$ f0 z+ b& |: J/ Q. R
检索或设置对象四边的外延边距。
/ o$ ~. ^% m' B* `
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。7 e8 \9 S+ D, v/ z
如果只提供一个，将用于全部的四边。
$ Z4 E' [ I3 ^
如果提供两个，第一个用于上－下，第二个用于左－右。
6 y+ Q* \( p( B1 ^
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
2 Q% S# q n, q6 K$ f. W
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。: a6 {/ {, Y6 l0 m$ W
在IE4+，margin属性不可用于td和tr对象。
8 S3 x* w+ M O/ _8 ^) [# R- b
外延边距始终透明。! T2 c, y; \4 F2 z9 o
" @& ?" V) v. l/ F% W1 y4 d+ V
color : 　指定颜色
3 C$ _% S! {0 X1 y* o G
text-align:文本的对齐方式。(left : 　左对齐,right : 　右对齐,center : 　居中,justify : 　两端对齐)
8 q- a* E' S) Y1 `" D
font: 12px Arial, Helvetica, sans-serif; :这段是字体相关的& p/ W% y& o3 ^3 I& K& p9 t
; R% T6 e. ^: i: G4 k" g
1 A7 L6 l4 E5 Y5 X% K

复制代码

傲天♂浪子追风 · 发表于 2006-10-30 20:55:44

/*链接样式*/( x! m& a" K, |/ c0 j6 w2 @
a { color: #000; text-decoration: none; }
: p5 W+ [+ h5 k+ _* r6 [& V" g% Y" b
a:hover { text-decoration: underline; color: #000098; }
5 Z/ ^ o2 M8 s( p$ z9 X
a:visited { color: #666;}
6 _: r* D3 l- e: E, U
#topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
( \3 o7 l. y& ~. a; ~& H2 N# n& N
#topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }" E- g2 ~6 m0 _% @; h; _
a img { border: none; }
* v/ m& x U# V) n* W3 @0 `" Y( l
li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
7 d y$ B z; n- }6 o' Q& P& _
li cite a { color: #999; }
D+ A$ Q' D! O. h- |
li cite a:visited { color: #999; }
. R2 n4 N/ l. a0 ~6 ^% }$ R
.more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
. _2 G; \/ p' u9 g- e
/ f4 E k |0 A4 v# @% j

复制代码

分析

2 `' W' J- R* J6 [( w
text-decoration:文本连接的属性,一般有以下几种参数:- x2 J' ]3 y$ Z! j* z, F. a
none : 　无装饰
3 u' F) F; {- x- k
blink : 　闪烁5 `6 w) X: g* X# w" g
underline : 　下划线: P( G$ m* K6 C; u& ~
line-through : 　贯穿线 \# z1 i3 @, A! U9 v
overline : 　上划线
$ l/ e# z# M" R0 Q
m9 _# n0 V8 Y0 M8 `
! d' o. {# C2 e
hover:设置对象在其鼠标悬停时的样式表属性。, ^6 U2 T3 O$ Y/ J
# r6 m; J: i1 |- C' G
visited:对象在其链接地址已被访问过时的样式表属性。1 w/ u6 @. Z2 e2 m# b- ~
1 G: E3 H8 W K4 R1 B. h K
#topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
6 d7 O6 F4 t) g( m/ V
#topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }:9 L( G& Y Y! E0 m l
上面这两行是与鼠标相关6 v/ `2 K$ o/ v4 o. Q% j
: e/ ?$ H: I4 S e& U0 n
a img { border: none; }图片连接相关+ Z7 @* e8 c( ?0 h/ A& k- D
) m4 r9 f8 @# ^ }
& [; N/ n3 H1 s* ]
cite:这个一般是引用标签的时候用的,不知道用来这里做什么' D7 F( Y; x" x& F0 L
% h1 D4 B9 D- h( Z1 x
7 O4 T, ?% f+ [2 R
font-style:字体式样,一般常用参数有:$ |& w( i+ ^, m
normal : 正常的字体
" Y Y6 F" d5 S! A) u
italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique( `0 i6 k# N% }) ~& j) f
oblique : 倾斜的字体/ B: P' n; @- U- Y$ V9 h; A
# W2 Y/ h- p# T- A# P$ Y& T/ x- ?1 x
. }! T8 }) ]5 h" G# w3 A3 G& U4 F! c/ c
float: right 该属性的值指出了对象是否浮动及如何浮动。常用参数如下:
3 w% C9 w, Z( c. k/ n& l* a
none : 　对象不浮动
) z) O- S# i7 d& }4 Z/ B
left : 　对象浮在左边
9 F$ p: {/ d d$ M0 ~8 M5 _
right : 　对象浮在右边
/ [- s3 C' Y" k
& b# E) t* Y; L' n" M! |# O
1 P2 [2 C3 o* W- a7 l
important:样式表条目,提升指定样式规则的应用优先权。
" V+ y- i& Z" ]* q9 B6 R) g+ O; v
" F% `9 Z% _5 v7 H0 d& g" J% _
+ [7 I- N1 p- z5 P4 i% A
background: transparent 这个的意思就是背景透明...; O6 I3 w$ A# K7 v
' P; o/ q1 e3 m7 R. r5 m& y2 p# c
X' Z9 s; U" e" u
: @4 F3 k( a6 s6 \
font-weight: normal :文本字体的粗细,常用参数如下:5 l j3 I8 v x& A) U" ~# d
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置: x" Y' a5 B% v$ Q6 u' ?' p
bold : 粗体。相当于number为700。也相当于b对象的作用
1 I- |+ n0 s* }6 ?
bolder : IE5+　特粗体1 e' p1 y; B! N
lighter : IE5+　细体: g' ~- [/ k: S: N' H
number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
3 w# x- u" S8 S% g! a+ c8 ^
9 q! n2 w( E, r- s2 G1 [9 U
cursor: pointer:这个是鼠标放在对象中的状态,简单点来可以这样说,也就是鼠标放在连接上的时候显示的鼠标形状,一般有以下N种参数,这个真的是TMD的多啊0 Q" g; J5 m5 m; K' c' L/ g
语法：(每一竖隔开为一个状态), M d9 A% j( _+ ]$ n; O
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
4 ?$ b t: s* U3 E# H* r" G7 o
8 ~& H& W7 u5 @& O# u2 P" a
+ T) E$ G; W# n" c9 h8 E% T
: W. I, A1 F' Z- r
9 z& r2 \4 {, d- |' ^" w/ r
! @8 Y S5 f/ j2 ^6 q" _9 ^
7 r0 g9 C8 B. l) w+ W$ L
9 d$ N+ I8 e4 E9 s& U8 M! T7 ?

复制代码

傲天♂浪子追风 · 发表于 2006-10-30 21:30:46

/*-----------------------------------------------------------------------------------表单通用样式*/+ @ v0 T* _0 z1 R4 }- u7 ~6 M+ s
( @* @4 b" V* q/ |$ r" V0 T
form { margin: 0; }
4 w) L3 Y+ V9 o S
input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }* R! ]8 Z. Z5 K8 k% N
button { height: 1.8em; padding: 0 0.3em; background: #9FC8DF; cursor: pointer; border: 1px solid;
0 E' k$ A9 d/ g$ c+ L( [: }
border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
+ m$ C& N: S" k3 Y5 U z# {* D
fieldset { border: 0; padding: 0; }6 [6 o0 K2 ]1 G: x0 z. U, z
legend { display: none; }+ c; n( ?0 a! \/ S
label { cursor: pointer; margin-right: 0.5em; }
- \. `" w4 u5 K( s0 y6 O

复制代码

bronwen · 发表于 2007-2-27 21:48:45

还没完吧？怎么没有了啊.....

傲天♂浪子追风 · 发表于 2007-2-28 03:01:09

是还没完的，忙于游戏，就没继续写了

傲天♂疯紫 · 发表于 2007-3-26 10:59:31

有点晕！！偶只懂硬件！！

技术部 收藏本版 今日: 0 主题: 115

CSS..研究...............

技术部收藏本版今日: 0 主题: 115