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

傲天♂浪子追风

1. * { word-break: break-all; } /*在IE中实行强制换行*/
   + `! D9 C" a0 @5 {6 Z! w) n
2. #newsblock { margin-top: 4px; }
   
3. /*-----------------------------------------------------------------------------------综合设置*/
   
4. 
   % W. |, ^: O& s! I; S6 M1 R
5. body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   
6. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   + S) _" W4 M! r# E' q2 D% b
7. 
   
8. /*链接样式*/
   - Q6 }  O: L9 W
9. a { color: #000; text-decoration: none; }
     n6 `& q; R* k7 b( M
10.         a:hover { text-decoration: underline; color: #000098; }
    , [9 o' I8 R1 k7 X. b2 J* S
11.                 a:visited { color: #666;}
    ( }, {6 B7 e3 Z! s( m
12.         #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    
13.                 #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
    
14.         a img { border: none; }
    0 q& y* ]0 s2 Z1 U
15. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
    
16.         li cite a { color: #999; }
    . l% i& c. E6 X
17.                 li cite a:visited { color: #999; }
    
18. .more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
    
19. 
    
20. /*-----------------------------------------------------------------------------------表单通用样式*/
    & i1 l. A% [% v! i
21. 
    $ E5 v& ^  Q/ ]4 @# R+ D7 \% H
22. form { margin: 0; }
    . Q. r4 \0 {3 @3 c( S
23.         input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
    
24.         button { height: 1.8em; padding: 0 0.3em; background: #9FC8DF; cursor: pointer; border: 1px solid;
    6 R4 D& ]: u8 V2 k* A
25.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
    
26.         fieldset { border: 0; padding: 0; }
    7 p; }# A  L  [
27.                 legend { display: none; }
    + X: r* I; U) ?0 `/ E3 Y. _
28.         label { cursor: pointer; margin-right: 0.5em; }
    
29. 
    # X' t6 W: U- d' c& i8 ^: I
30. /*-----------------------------------------------------------------------------------头部风格 Header*/
    
31. /*顶部导航*/
    
32. #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; }
    
33.         #topmenu ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #86B9D6; }
    
34.                 #topmenu li { display: inline; border-left: 1px solid #86B9D6; padding-left: 1em; padding-right: 0.5em; }
    
35.                         #topmenu a { color: #154BA0; }
    
36. 
    
37. #pagetitle { padding: 8px 0; height: 76px; he\ight: 60px; border-bottom: 4px solid #F5FBFF; }
    
38.         #logo { border-right: 1px solid #86B9D6; padding: 0 10px; margin-right: 10px; }
    1 Q7 S- o/ G0 O0 x) B
39.         .banner468 { float: right; }
    0 e& Z, q- S1 q  |! U$ \. Q! w
40. 
    2 y3 }0 S, q$ J- W
41. /*主导航*/
    % f) X: {! _! J- F/ u8 W: ~
42. #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; }
    " ~  b5 e0 y; F* O+ I
43.         #menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
    # [$ A& Y0 T0 G% e( J0 H
44.                 #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
    8 c# ^  ]# j& T, \! M6 P) ]
45.         /*首页导航*/
    , p7 V' v4 W5 q3 ?4 `
46.         #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
      Q* ?8 ^5 K/ K" e2 V( p  U
47.                 #menu dt { float: left; width: 4em; white-space: nowrap; }
    ' `9 W: V8 ^" p- e2 W7 B! R* V5 [
48.                         #menu dt a { color: #000098 !important; }
    ) g% |# A0 ]2 Y3 D& y- A/ {
49.                 #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
    
50. 
    - ~; @- p& W, C1 L; r
51. /*您的位置导航*/
    $ m* e) J& c$ T7 V2 a
52. #navigation { padding: 1.2em 0; }
    
53.         #navigation p { margin: 0;}
    + u! a; e' s& i1 \& ~( q; I( |
54.                 #navigation p a, #navigation p strong { margin: 0 0.5em; }
    % v3 Q* o$ F9 {1 r& D. d9 N! I
55.         #searchform { float: right; }
    , |$ h1 t5 X) v5 k9 d, c
56.                 #searchform * { vertical-align: top; }
    
57.                 #searchform button { margin-left: 0.5em; }
    ' {* v0 f4 w. ~" E0 H
58. 
    # r( V' I4 o8 B6 b7 s* g
59.         #navigation.simplepage { padding: 0; border-top: 2px solid #009DEA; border-bottom: 1px solid #009DEA; line-height: 25px; background: #EFF5FF; margin-bottom: 1em; }
    
60.                 #navigation.simplepage p { float: right; margin-right: 0.5em; }
    ' d+ M( s+ H/ ~5 M
61.                 .simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 0.5em; }
    8 N. _) j0 F# s$ N* C
62. 
    / b  }4 ~' U8 E5 j% A
63. /*-----------------------------------------------------------------------------------布局*/
    4 M! @# D' h$ @. `
64. 
    3 M6 e% f4 O& ^1 d
65. .content { /*三列布局*/
    
66.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 0 0; }
    0 W' ]! l- P- ^3 {  v. T, o$ _
67.         /*\*/ * html .content { height: 1%; } /**/ *>.content { overflow: hidden; }
    
68. .contentL { /*两列布局，侧边在左侧*/
    8 A0 z) W/ j1 ]6 [: D7 P; ?
69.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y -590px 0; }
    " k# V9 t- x$ w8 C- x& `7 o
70.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    , z$ f: m$ I$ \1 w& Y7 D
71. .contentR { /*两列布局，侧边在右侧*/
    ( V& Z3 S' y. ]& C
72.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 580px 0; }
    
73.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    
74. /*侧边样式*/
    
75. .sideL { width: 296px; float: left; overflow: hidden; }
    ' \# G1 {$ V& t
76. .sideR { width: 202px; float: right; overflow: hidden; }
    + D6 t/ x$ X* `( w9 e
77. /*中间部分样式*/
    
78. .mainarea { margin: 0 4px; width: 382px; float: left; }
    
79.         .contentL .mainarea { margin: 0 0 0 4px; width: 556px; }
    
80.         .contentR .mainarea { margin: 0 4px 0 0; width: 576px; }
    
81. 
    * S0 S; n9 D; T9 V% z- ]7 c# @4 b
82. /*-----------------------------------------------------------------------------------版块样式*/
    
83. 
    + N$ F, t/ r3 `3 x
84. /*版块标题*/
    , t) E) m. K* d0 k) n6 T$ _) w
85. .blocktitle { clear: both; border: 1px solid #86B9D6; padding: 1px; margin-bottom: 4px; line-height: 30px; }
    ' f( E* U8 D3 b$ V/ j3 I' p% V
86.         .blocktitle h2 { font-size: 1.2em; margin: 0; padding: 0 5px; background: #9FC8DF url(../images/new/title_bg.gif) repeat-x; }
    / m) c- t9 q6 I8 v# c4 j
87.         .blocktitle .more { margin-right: 5px; }
    
88. 
    3 D# v/ a- f( h7 ]: A
89. /*头条信息*/
    $ W2 |% j- V/ ?  S: h! V
90. #headline { padding: 5px; height: 70px; he\ight: 58px; overflow: hidden; }
    
91.         #headline strong { font-size: 1.2em; }
    5 E" h1 x7 k" I; y
92.         #headline p { margin: 0.3em 0; }
    , A6 P3 W3 p3 j+ a1 x. B+ i# u
93.         #headline img { float: right; width: 48px; height: 48px; border: 4px solid #FFF; }
    % F- Z# Z6 I; B; v6 ], r
94. 
    # E: i- m0 `" N3 |5 C  W
95. /*侧边版块*/
    
96. .sideblock { margin: 0 0 3px; border: 1px solid #86B9D6; background: #FFF; padding: 3px; }
    # g- T( `) w) f/ Y: Z3 u
97.         .boldblock { padding: 1px; background: #9FC8DF; } /*突出版块*/
    6 ?$ F) _4 q: X; |
98.         .cleanblock { border: 1px solid #86B9D6; margin: 0 0 4px; padding: 0; background: #F5FBFF; } /*简单版块*/
    
99.                 .sideblock h3 { margin: 0; font-size: 1em; line-height: 2em; padding-left: 0.5em; border-bottom: 1px solid #BBE9FF; }
    
100.                         /*\*/ * html .sideblock h3 { height: 1%; } /**/
     9 s7 @# n0 W: V" z  C5 G
101.                 .sideblock p { margin: 0.3em; line-height: 1.6em; }
     
102.                         .headimg { float: right; margin: 5px 0 2px 5px; width: 80px; height: 80px; border: 4px solid #E2F0F9; }
     * |" A5 R( g, d% s; ~- Y
103. 
     
104.         /*侧边多行列表*/
     " [, t, [2 g  r! z. m' q# j2 Z
105.         .sideblock dl { margin: 0; padding: 5px; background: #FFF; line-height: 1.8em; }
     / c2 U- B- U. U/ v; V) ^& x
106.                 /*\*/ * html .sideblock dl { position: relative; } /**/
     . ^$ L$ L# T' U/ \# N. ^' f0 w
107.                 .sideblock dt { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     ( O5 \4 A: ?0 o* W0 ?3 }" h& Z
108.                 .sideblock dd { color: #999; margin-left: 0.8em; }
     
109.                         .sideblock dd a { color: #999; }
     6 l2 I8 v+ D8 o1 S8 M4 p& R2 `
110. 
     
111. /*单行信息列表*/
     , i+ Q7 j. p- x2 G; ~  ~
112. .msgtitlelist { margin: 0; padding: 5px 0; list-style: none; line-height: 1.6em; }
     
113.         .msgtitlelist li { height: 1.6em; overflow: hidden; padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     
114.         .mainarea .msgtitlelist { font-size: 1.2em; }
     ! `$ A7 u3 q- K& o7 N" u+ p6 c& D) Z
115.         .sideblock .msgtitlelist { background: #FFF; }
     
116. 
     
117. /*多行信息列表*/
     
118. .messagelist { margin: 5px 0; padding: 0; list-style: none; line-height: 1.6em; }
     7 t! v' P* R4 h0 N
119.         .messagelist li { margin: 5px 0 10px 0;}
     / L+ o# i1 e% ?2 \: @' ]) b
120.                 .messagelist li h4 { margin: 5px 0; font-size: 1em; line-height: 2em; background: #F0F9FF; }
     5 M* H# \/ ?+ p% l; H# r
121.                         .messagelist li h4 a { color: #009; font-size: 1.2em; }
     - F1 i5 o1 I: N! h
122.                                 .messagelist li h4 a:visited { font-weight: normal; }
     
123.                 .messagelist li p { margin: 0; }
     
124. 
     ! n7 J4 s! @( w1 D; s
125.         .messagelist dl { margin: 0; padding: 0; line-height: 1.6em; }
     
126.                 .messagelist dt { background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; padding-left: 0.8em; }
     ( j+ W& r  K% J
127.                 .messagelist dd { font-size: 12px; margin: 0; padding-left: 1em; color: #999; }
     2 i9 n. M& h' K2 D7 v! w8 d
128.                         .messagelist dd a { color: #999; }
     + _# l, o8 O" Z% e
129. 
     
130. /*热门话题*/
     : I9 \# M' N2 b+ f1 A8 l
131. #hottag { overflow: hidden;  }
     
132.         #hottag div { background: #FFF; padding: 0.5em; overflow: hidden; line-height: 1.8em; }
     
133.                 #hottag div { color: #999; overflow: hidden; }
     , ?- F( p6 f' A( I2 ?
134.                 #hottag a { margin-right: 0.2em; white-space: nowrap; }
     
135.                         #hottag a em { color: #999; font-style: normal; }
     
136. 
     
137. /*用户面板*/
     & S7 j' F8 _0 Z" R$ v* F( M: O& V
138. #userpanel { height: 8.8em; overflow: hidden; }
     7 J2 o" L6 a: N4 d
139.         #userpanel form { margin: 5px auto !important; margin: 0 auto; width: 150px; }
     
140.                 #userpanel input { width: 90px; }
     
141.                 #userpanel p { margin: 0.5em 0; }
     
142.                 #dologin { float: right; }
     
143.                 #userpanel form a { line-height: 2em; color: #B353B3; border-right: 1px solid #86B9D6; padding-right: 5px; }
     , x5 e* G4 \+ r( n8 E( t7 ]$ l' J
144.         /*登录后*/
     # _5 n7 }. o) A7 e2 g: H
145.         #userpanel li { border-bottom: 1px solid #BBE9FF; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.8em; padding-left: 12px; }
     ' N. n+ Q$ _/ Z
146.                 #userpanel li a { color: #000098; }
     7 e% Z) ]: r7 g" _
147. 
     
148. /*空间之星*/
     ' \4 W; r, Y8 A
149. #spacestar ul { width: 168px; margin: 0 4px; padding: 0; height: 235px; }
     - O' Y) Y( P: `% |
150.         #spacestar li { float: left; display: inline; width: 54px; height: 70px; overflow: hidden; margin: 3px 1px; background: #E2F0F9; text-align: center; }
     
151.         #spacestar img { width: 48px; height: 48px; margin-top: 3px; }
     / v! S7 _) N1 Z' H) a& Y4 [
152.         #spacestar p { margin: -4px 0 !important; margin: 0 0; line-height: 20px; height: 20px; }
     
153. 
     
154. /*同城空间*/
     . @- E9 S! ]3 C0 u7 G( K' w" W
155. #cityspace { background: #F0F9FF; }
     6 h4 r7 h: Z9 C8 Y  \& Y
156. #cityspace form { width: 10.5em; margin: 0 auto; padding: 5px 0; }
     ; y' o$ P( M5 t
157.         #cityspace select { margin: 2px 0; }
     
158.         #cityspace button { float: right; margin-top: 4px; width: 3.5em; height: 3.5em; }
     " v& c* e) I# n2 {- R4 u
159.         #blogblock #cityspace { margin: 0 0 4px 0; }
     4 ?' {& s/ p* `. L
160. 
     " m1 c' _, J  H+ l$ S. D5 E
161. /*空间排行*/
     / \1 C9 R9 `6 z
162. #hotspace ol { margin: 0; padding: 0 0 0 20px; line-height: 20px; background: url(../images/new/hotspace_bg.gif) no-repeat; list-style: none; }
     
163.         #hotspace li { height: 20px; overflow: hidden; }
     
164.         #hotspace em { float: right; font-style: normal; font-size: 9px; color: #999; width: 40px; }
     - _$ f; k* G: z, _5 E0 ?0 k
165. 
     & Q" E( R% y7 i" S  k
166. /*热门文章 */
     
167. #hotarticle { border: 1px solid #86B9D6; background: #E2F0F9; padding: 3px; position: relative; }
     
168.         #hotarticle h3 { font-size: 1.2em; margin: 0; line-height: 22px; border-bottom: 1px solid #86B9D6; }
     3 s6 s- J3 I* L8 ?) N
169.         #hotarticletabs { position: absolute; margin: 0; line-height: 18px; top: 7px!important; top: 8px; right: 10px; }
     $ q% l. R# h) `1 S2 w7 O
170.                 #hotarticletabs span { background: #86B9D6; float: right; color: #FFF; margin-right: 2px; height: 18px; padding: 0 5px; cursor: pointer; }
     ) I6 K% ?. s& H/ n
171.                         #hotarticletabs span.active { background: #FFF; color: #333; border: 1px solid #86B9D6; border-bottom: none; }
     
172.         #hotarticle ul { background: #FFF; margin: 0; padding: 0.5em; list-style: none; line-height: 1.7em; height: 16.5em; overflow: hidden; }
     
173.                 #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; }
     ; J$ z7 k$ N9 D9 |. s9 Q* Q" Y7 {
174. 
     
175. /*图片列表*/
     6 \% o& s, [5 \- R5 y* [) ^  _
176. .imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
       Y4 R! v6 Y' h9 P! o* E; v
177.         /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
     * \$ y, q' @) ~: E+ O% d
178.                 .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; }
     
179.                         .imgthumblist li.list1line { height: 123px; height: 115px; }
     6 u; D. I+ A* N. [& P
180.                         .imgthumblist li.list2line { height: 143px; height: 135px; }
     : \4 ]9 U& C% F" u# P' U* @( ]$ m6 M
181.                         .contentL .imgthumblist li { margin: 0 1px 3px; }
     3 w* c$ F& F. d/ n/ N: m/ J' s
182.                         .imgthumblist img { width: 100px; height: 100px; }
     
183.                         .imgthumblist p { margin: 0; text-align: center; line-height: 1.3em; }
     
184.         .throughgallery { width: 100%; clear: both; margin-bottom: 5px; padding-bottom: 3px; background: #E2F0F9; }
     
185.                 .throughgallery .imgthumblist { margin: 0; }
     
186.                 .throughgallery .imgthumblist li { height: 120px; margin: 3px 1px; }
     . P1 v# I. R: E4 ^
187. 
     9 ?5 L3 w; Y. t9 ~
188. /*商品*/
     
189. /*\*/ * html .goodsthumblist { height: 1%; } /**/ *>.goodsthumblist { overflow: hidden; }
     % G# Q: j$ q* o
190.         .goodsthumblist { margin: 0; padding: 3px 0; list-style: none; }
     % q( I5 R" }5 m4 w" @' V9 I# {. ~9 {- S
191.                 .goodsthumblist li { float: left; width: 90px; height: 100px; text-align: center; }
     
192.                         .goodsthumblist li img { width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     # P9 e( v' ~& z* E
193.                         .goodsthumblist li p { margin: -3px 0 0 !important; margin: 0; height: 1.5em; line-height 1.5em; overflow: hidden; }
     6 J! r+ h; R& J. m3 j
194. 
     + G5 f: y9 W; f3 i
195. .imgtitlelist { margin: 10px 0; padding: 0; list-style: none; }
     * U, b# b5 V+ f# a; F" p
196.                 .imgtitlelist li { padding-left: 85px; padding-bottom: 5px; margin: 5px 0; border-bottom: 1px solid #E2F0F9; }
     6 ~9 c3 g( m, K9 }- @
197.                 /*\*/ * html .imgtitlelist li { height: 1%; } /**/ .imgtitlelist>li { overflow: hidden; }
       w& e- f: j. f7 U! C
198.                         .imgtitlelist li h4 { margin: 0.3em 0; font-size: 1em; }
     % J+ b6 [9 r- R( {/ E7 K- u: `
199.                         .imgtitlelist li img { float: left; margin-left: -85px; width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     6 N5 c( Y1 H1 O, W$ B, y) N
200.                         .imgtitlelist li p { margin: 0; line-height: 1.5em; }
     
201.         .sideblock .imgtitlelist li { padding-left: 65px; }
     ! F/ ?6 P4 N2 m: c" h. n) `
202.                 .sideblock .imgtitlelist li img { width: 48px; height: 48px; margin-left: -60px; }
     
203.        
     
204. 
     ; M6 b* A0 Z* F# h
205. /*栏目区块列表*/
     7 y' \$ P! Z( ~, Y9 z9 Q2 w
206. .category {  margin: 4px 0 10px 0; }
     
207.         .category h3 { margin: 0 0 5px; font-size: 1.2em; line-height: 1.8em; height: 1.8em; border-bottom: 1px solid #86B9D6; }
     
208.                 .category h3 strong { background: #E9ECEF; float: left; padding: 0 8px; }
     + N; t$ ]( P. o0 ]# i8 B7 _
209.                         .category h3 strong a { color: #333; text-decoration: none; }
     # k; {; I& h" }$ O
210.         /*.category ul { background: #FFF; margin: 0; padding: 4px 0 0 0; list-style: none; line-height: 1.6em; }
     1 r: K) t$ a9 L1 ?+ Y" `- i1 T2 B
211.                 .category li { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     : s# \; N& v3 k9 G/ ?3 r/ b! n
212.         .catecommend { background: #F0F9FF; margin: 0; line-height: 2em; height: 2em; overflow: hidden; padding: 0 1em; }*/
     
213.                 .catecommend a { color: #000099; white-space: nowrap; margin-right: 0.5em; }
     % R8 }5 o4 N4 F1 ?- H
214. 
     3 Q% P+ G0 w+ O0 I, {. G5 V$ A
215. 
     " ?; Q; D: E  {0 n  J# a6 U
216. /*-----------------------------------------------------------------------------------首页各版块*/
     4 `* ]! Q4 I# O% \
217. 
     ! b' ]+ F) h# T2 u; C
218. /*#commendimage { height: 155px; }
     ) R; B: r3 M, u2 s8 B# O. R, @
219. #topicnews { height: 217px; }
     
220. #newgoods, #commendgoods { height: 200px; }
     
221. #hotcommentfile, #hotfile, #newlink, #hotlink { height: 220px; }*/
     , W) v7 F9 J7 A  B( S
222. 
     / ]& X/ M. z7 O# H0 P3 i# n
223. 
     
224. 
     
225. 
     
226. /*信息列表*/
     
227. .articlelist li { padding-left: 60px; }
     
228.         .articlelist h4 img { float: left; margin-left: -60px; width: 48px; height: 48px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     
229. /*.articlelist  h3 a { font-size: 12px; font-weight: normal; margin-left: 1em; color: #B353B3; }
     
230.        
     ( G8 o- h  O1 |% y+ M7 k/ G
231.         .articlelist ul { margin: 0; padding: 0; background: #FFF; padding-left: 5px; list-style: none; }
     
232.                 .articlelist li { position: relative; padding-left: 60px; margin-top: 1em; }
     ) {6 F* G) a# L$ p" I
233.         .articlelist h4 { margin: 0; background: #F0F9FF; font-size: 1.2em; padding: 0.2em 0.5em; cursor: pointer; }
     0 O8 _7 b) L8 }
234.                 .articlelist h4 em { font-style: normal; font-weight: normal; font-size: 0.8em; color: #B353B3; margin-left: 0.3em; }
     0 p" R; @! ~& B6 z' F0 U
235.                 .articlelist h4 a { color: #000099; }
     
236.                 .articlelist li img { position: absolute; left: 0!important; left: -67px; top: 0; border: 3px solid #9FC8DF; width: 48px; height: 48px; }
     - f( W4 f" _. W
237.                
     
238.                 .articlelist li strong { font-weight: normal; color: #999; line-height: 2em; padding-left: 0.5em; }
     8 x. R9 F, X9 Q+ b- w- y9 \
239.                         .articlelist li strong a { color: #999; }
     
240.                 .articlelist li p { margin: 0.3em 0; line-height: 1.6em; }
     
241.                         .articlelist li p a.more { float: none !important; }*/
     
242. 
     
243. 
     4 p; \% s% `8 y+ \
244. .catepic { text-align: center; }
     * N1 n# v3 a5 G+ P" ?* s
245.         .catepic img { margin-top: 10px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED;
     
246.                 max-width: 150px; max-height: 150px; width: expression(this.width > 150 ? 150: true); height: expression(this.height > 150 ? 150: true); }
     3 `4 l# r+ ?" b
247.         .catepic p { text-align: left; margin: 0.5em; }
     
248. 
     
249. /*专题列表*/
     
250. #subjectlist { border-color: #86B9D6; padding: 2px; }
     
251.         #subjectlist h3 { border: none; background: #9FC8DF; }
     
252.         #subjectlist li { border-bottom: 1px solid #E2F0F9; text-align: center; padding: 3px; }
     2 s7 N7 I0 l3 r) D
253.                 #subjectlist p { margin: 0; line-height: 1.2em; }
     
254. 
     
255. 
     & K- I4 Q# M/ @2 F7 Q
256.         #xspace-rates { height: 2em; }
     ) w) y$ M4 {# Z3 {  p
257.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     ) G: }# w3 S- F/ V) E
258.                 #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; }
     ; E) X. y" ]6 P' N; `1 P3 f
259.                         #xspace-rates a:hover { border-color: #CCC; }
     
260.                         .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; }
     ' [2 P+ R/ O, w# e
261. 
     
262. 
     
263. #panel { width: 600px; overflow: hidden; margin: 1em auto; }
     
264. 
     
265. 
     $ X- h/ \$ d' f) m
266. /*Pages*/
     ! _+ G- t8 T- N( v9 O. O
267. .pages { text-align: right; border-top: 1px solid #9FC8DF; }
     
268.         /*.pages table { margin: 3px 0 3px auto; text-align: center; }
     
269.                 .pages td { padding: 0 5px; border: 1px solid #B9D0ED; background: #FFF; }
     : g! X/ _: O# i0 T0 p; V/ }; Z
270.                 .pages a { text-decoration: none; }
     
271.                 .pages .currentpage { background: #F0F9FF; border-color: #86B9D6; font-weight: bold; }*/
     * l) o+ V* u0 Z* @
272. 
     / ~( e; C* B& m7 z6 P3 a0 p* M' l
273. /* 分页 */
     4 x" Y2 b" Y. @4 S) W$ A' g
274. .xspace-page { margin: 2px 2px 2px auto; }
     ) ?2 v3 p, }# @9 i! }7 p; O% o/ U
275.         table.xspace-page a { display: block; background: #E2F0F9; padding: 0.3em 0.5em; text-decoration: none; }
     
276.                 table.xspace-page a:hover { background: #86B9D6; }
     0 T' X/ \4 \  z3 j" ]! q
277.         table.xspace-page td.xspace-current { background: #86B9D6; padding: 0.3em 0.5em; font-weight: bold; }
     ) G0 O" p! ?5 c, {3 w
278.         table.xspace-page td.xspace-totlerecord, .xspace-page td.xspace-totlepages { background: #E2F0F9; padding: 0.3em 0.5em; }
     ' {6 Q  {' h9 C: n
279. 
     
280. .smalltxt { font-size: 12px; color: #999; font-weight: normal; }
     
281.         .smalltxt a, .smalltxt a:visited { color: #999 !important; }
     
282. 
     
283. /*-----------------------------------------------------------------------------------页脚 Footer*/
     & ~' L0 F0 P# ]% ~- X9 [
284. #footer { clear: both; border-top: 2px solid #86B9D6; padding-top: 1em; padding-bottom: 2em; text-align: center; font: 100% Verdana, Arial, Helvetica, sans-serif; }
     
285.         #footer p { margin: 0.3em 0; color: #999; }
     0 D1 q# F$ z7 V( C
286.         #footer strong { color: #007AB6; }
     1 \0 G) J, ]: {
287.         #footer em { font-style: normal; font-weight: bold; color: #96A800; }
     
288.        
     
289. .imglogolist { margin: 0; padding: 0; list-style: none; text-align: center; }
     # J$ b% @/ Y0 d! U; K" o; W2 v
290.        
     
291. #articledetail { border: 1px solid #86B9D6; text-align: center; }
     
292. .articletitle { font-size: 1.6em; margin: 1em 0 0.5em; }
     
293. .articleinfo { border-bottom: 1px solid #9FC8DF; margin: 0;}
     4 k# [% e; i5 {3 @
294. .articlectrl { margin: 0.5em 0 1.5em; }
     5 o5 c$ _( p9 H
295. 
     
296.         #articlebody { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; font-size: 1.2em; }
     9 [; K" Y, x9 g, c9 P5 R0 w
297.         #articlebody * { line-height: normal; }
       G5 a3 L( z9 p; i3 U. ?5 k1 V
298.                 #articlebody  p, #articlebody  div { line-height: 1.8em !important; margin: 10px 0; }
     
299.                         #articlebody  p *, #articlebody  div * { line-height: normal !important; }
     3 d! e' c0 r, d, A
300.        
     
301.         #articlebody .addoninfo { border: 1px solid #EEE; }
     + b- h4 j  l% Y  w9 i+ ^
302.                 #articlebody .addoninfo h5 { font-size: 1em; margin: 0; line-height: 2em !important; border-bottom: 1px solid #EEE; padding-left: 1em; }
     0 _0 I5 h+ P& q+ ^6 h5 q
303.                 #articlebody .addoninfo ul { margin: 0.5em 0 0.5em 2em; padding: 0; }
     $ j  Z# L8 ^; |- D
304.                         #articlebody .addoninfo li { line-height: 1.6em !important; }
     : M/ K# _+ D8 E0 d/ u
305.        
     
306.         #articlebody img { width: expression(this.width > 500 ? 500: true); max-width: 500px;  }
     $ }% {, C: G, _6 I
307.        
     
308.         #articlebody kbd.showvideo, #articlebody kbd.showflash { font: 1em Arial, Helvetica, sans-serif; cursor: pointer; text-decoration: underline; }
     # w% s$ p4 l9 Z9 N% U( P" z
309.         #commentlist { overflow: hidden; border: 1px solid #86B9D6; margin: 4px 0 0; padding: 0 5px; }
     
310.                 #commentlist h3 { font-size: 1em; line-height: 2em; margin: 0; background: #F0F9FF; border-bottom: 1px solid #86B9D6; }
     
311.                                 #commentlist img { max-width: 500px; width: expression(this.width > 500 ? 500: true); }
     ( j  V3 s* }+ \
312.                         #commentlist .messagelist li div { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; }
     ) f+ B8 h  J  V3 U6 i2 M
313.                                 #commentlist .messagelist li div * { line-height: normal; }
     2 E# O& }% l2 m
314.                                         #commentlist .messagelist li div  p, #commentlist .messagelist li div  div { line-height: 1.8em !important; margin: 10px 0; }
     
315.                                                 #commentlist .messagelist li div  p *, #commentlist .messagelist li div  div * { line-height: normal !important; }
     1 x% w, n+ x$ _% k- n" L& f3 r: n
316. 
     1 O3 Y* P  i% Y( `
317. /*发表评论*/
     7 w8 O7 m. s1 C8 ]
318. #comment { margin-top: 4px; }
     * A( {5 Y# a0 d8 b" J/ X0 k- r. o
319.         #comment h3 { margin: 0 5px; font-size: 1em; line-height: 2em; }
     
320.         #comment form { background: #FFF; margin: 0; padding: 5px; }
     ! ?# i2 {' W$ l6 T
321.         #comment p { margin: 0.3em 0; }
       v$ u- ^- G" ~' G
322.         .seccodeline * { vertical-align: middle; }
     
323.         #xspace-rates { height: 2em; }
     " G& I+ K; s: y) E  ~
324.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     2 y/ \7 w  U; }
325.                 #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; }
     
326.                         #xspace-rates a:hover { border-color: #CCC; }
     
327.                         .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; }
     : S- ?' y8 M# [6 r: X( Q, J9 O
328. 
     / j% V! M& K9 z. E) _% P
329. /*AJAX div*/
     8 W/ p: w9 I3 o/ d* w
330. .xspace-ajaxdiv { position:absolute; padding: 5px; border: 1px solid #BBB; background: #FCFFEF; text-align: left; }
     $ a6 V% b$ z$ B; M, ~
331.         .xspace-ajaxdiv h5 { line-height: 24px; font-size: 1em; margin: 0; }
     1 l5 ]* j! B; ?5 B4 _; X$ Y
332.                 .xspace-ajaxdiv h5 a { float: right; font-weight: normal; }
     
333.         .xspace-ajaxcontent { background: #FFF; border: 1px solid #EEE; }
     8 `; w. r; A$ B6 t
334.                 .xspace-ajaxcontent form { margin: 0; }

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------综合设置*/
   
2. 
   7 |; j5 l( u, [) ~& l5 Q! Q' m9 K$ T
3. body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   . Y5 a6 M* K# G. `* w; {  G$ Y/ ]
4. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   : W/ F+ `( s/ R1 f; f( o0 e
5. 
   

复制代码

分析
! t5 @! |3 z$ [- @% T! I1 K* g% {$ R  ]
# W9 ~2 H) n/ h+ Z# i$ R

1. margin属性说明：
   
2. 
   
3. 检索或设置对象四边的外延边距。
   $ i- C5 ~$ j+ H+ t6 S
4. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
   5 I1 C: g4 u4 N/ r
5. 如果只提供一个，将用于全部的四边。
   " _6 w: {) O: H. [( Q8 U4 ]# u
6. 如果提供两个，第一个用于上－下，第二个用于左－右。
   + T5 O$ n& Y8 m8 L, D9 c: _1 p, U
7. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
   
8. 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
     F* f& _5 m% E8 y8 A4 Y: i; a
9. 在IE4+，margin属性不可用于td和tr对象。
   8 f" ^6 y6 `2 n# C- I% t# n
10. 外延边距始终透明。
    8 e$ k7 f' k* I+ B5 c8 w" d
11. 
    7 y+ b" i, a+ w5 y8 _
12. color : 　指定颜色
    * N/ ^8 p3 ~/ R$ c% @" `
13. text-align:文本的对齐方式。(left : 　左对齐,right : 　右对齐,center : 　居中,justify : 　两端对齐)
    , {2 |# w5 ], |1 V% s3 X- f
14. font: 12px Arial, Helvetica, sans-serif;  :这段是字体相关的
    
15. 
    
16. 
    

复制代码

傲天♂浪子追风

1. /*链接样式*/
   * q) F, h: j3 O3 h; W: J# d
2. a { color: #000; text-decoration: none; }
   
3.         a:hover { text-decoration: underline; color: #000098; }
   
4.                 a:visited { color: #666;}
   
5.         #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
   % P8 @8 H$ J8 N/ F
6.                 #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
   0 c. K& S% N- n  ]2 p  S
7.         a img { border: none; }
   1 B/ G8 b3 ?7 o
8. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
   
9.         li cite a { color: #999; }
   
10.                 li cite a:visited { color: #999; }
    8 N+ S3 r9 ]- w) r! ^5 x
11. .more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
    
12. 
    ! n2 v5 |& h4 ]% v0 w, P" Q

复制代码

) c/ }, }# Q1 C1 \% L
分析
: I9 @" M0 S% W5 b5 M- v2 @
0 c5 a2 k6 z- n

1. 
   1 J1 l( Q& w3 c$ {; i* P7 ?6 ?
2. text-decoration:文本连接的属性,一般有以下几种参数:
   
3. none : 　无装饰
   5 c, g% D4 P4 O- l3 R/ L7 w; A( r# [5 D
4. blink : 　闪烁
   
5. underline : 　下划线
   ' ~" O' f9 Z- o( Q
6. line-through : 　贯穿线
   1 Q7 \- D6 ?0 H! o" t* g2 G, l
7. overline : 　上划线
   / Y0 p2 d( S/ @* I
8. 
     a. f7 m! Y3 ~' Y/ O" l' ~" Q
9. 
   1 e8 a% c7 F% ~& ]: U4 ?# I
10. hover:设置对象在其鼠标悬停时的样式表属性。
    
11. 
    4 ~+ n. @3 H6 M/ O9 _$ U& ^' U' y5 @  P
12. visited:对象在其链接地址已被访问过时的样式表属性。
    
13. 
    ) w9 F% D- p% L, _- O) n; @
14. #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    % w1 c: v. b7 Y$ S; g
15. #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }:
    % e: f8 u5 K$ Z; e6 Z8 s) T
16. 上面这两行是与鼠标相关
    
17. 
    
18. a img { border: none; }图片连接相关
    
19. 
    
20. 
    
21. cite:这个一般是引用标签的时候用的,不知道用来这里做什么
    ) p0 ]6 b- J8 U4 r7 `2 L' c
22. 
    4 P& K; P1 _0 Y' i# ^" b3 l3 u( Y
23. 
    % \9 L/ M( M4 y0 `6 _% P
24. font-style:字体式样,一般常用参数有:
    # {$ \% M* r5 M/ y
25. normal : 正常的字体
    
26. italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
    * F. e& \: p: \: ^
27. oblique : 倾斜的字体
    
28. 
    
29. 
    6 e2 U& C; {) t  D( W& H
30. float: right 该属性的值指出了对象是否浮动及如何浮动。常用参数如下:
    ! V: ~" ~4 C5 D
31. none : 　对象不浮动
    $ y/ }  |- ]/ M5 }4 j
32. left : 　对象浮在左边
    
33. right : 　对象浮在右边
    $ e' C8 L0 h9 h# i0 u/ {
34. 
    
35. 
    9 j; s. T) W5 G
36. important:样式表条目,提升指定样式规则的应用优先权。
    . h0 K8 K- Z& m
37. 
    
38. 
    
39. background: transparent 这个的意思就是背景透明...
    / Z& k- j' ^; F3 E1 `/ Y' Q
40. 
    
41. 
    2 o; M, i( \( L7 q0 |" p
42. 
    / @' N% ?4 _9 B& }6 N
43. font-weight: normal :文本字体的粗细,常用参数如下:
    & j9 z9 O$ `9 p4 X+ t
44. normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
    
45. bold : 粗体。相当于number为700。也相当于b对象的作用
    6 T0 C" e8 s4 N7 u: \7 v  `
46. bolder : IE5+　特粗体
    
47. lighter : IE5+　细体
    
48. number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    
49. 
    7 k+ A- H: W$ e5 S' j& j4 j  m
50. cursor: pointer:这个是鼠标放在对象中的状态,简单点来可以这样说,也就是鼠标放在连接上的时候显示的鼠标形状,一般有以下N种参数,这个真的是TMD的多啊
    : B7 M8 V/ {, ?% r1 e
51. 语法：(每一竖隔开为一个状态)
    5 o3 s$ |) h9 L' m. B$ H
52. 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)
    : O" }/ c* p  R) f
53. 
    , ^6 p6 F8 G- t  n
54. 
    
55. 
    
56. 
    / ~2 Q! Z5 }2 L$ F, d2 |" `4 \
57. 
    
58. 
    
59. 
    8 X$ W, q% M! v1 \* b! I

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------表单通用样式*/
   
2. 
   
3. form { margin: 0; }
   8 x2 t7 g5 o/ E# t! |
4.         input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
   
5.         button { height: 1.8em; padding: 0 0.3em; background: #9FC8DF; cursor: pointer; border: 1px solid;
   # F. `% A1 t7 h
6.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
   + C( K, [  W4 A/ f7 Z* U
7.         fieldset { border: 0; padding: 0; }
   
8.                 legend { display: none; }
   ; s6 I6 l. m& x. w4 o4 `+ o* _  b
9.         label { cursor: pointer; margin-right: 0.5em; }
   

复制代码

bronwen

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

傲天♂浪子追风

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

傲天♂疯紫

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