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

傲天♂浪子追风

1. * { word-break: break-all; } /*在IE中实行强制换行*/
   
2. #newsblock { margin-top: 4px; }
   3 l) i+ ~0 w) U; a0 y( |
3. /*-----------------------------------------------------------------------------------综合设置*/
   5 p% A1 @2 ?8 v( s. K# c
4. 
   
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; }
   " t8 ]' y5 D4 E7 s; A% @; c# Z
7. 
   5 r0 e* P7 w  @
8. /*链接样式*/
     O% e8 X; ^3 ]
9. a { color: #000; text-decoration: none; }
   3 D( T% ^- g. P. g* @
10.         a:hover { text-decoration: underline; color: #000098; }
    
11.                 a:visited { color: #666;}
    , W; C2 A' t# T+ `6 |) O( v
12.         #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    : _, D7 g4 H) }# y, J* }7 U7 g9 |  b
13.                 #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
    . a* @8 q) [7 ~; Z& R
14.         a img { border: none; }
    0 F; [& ^, J1 b$ R# G" b
15. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
    
16.         li cite a { color: #999; }
    ! |6 o0 F  b, H/ O
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; }
    * K) z2 o! [% _/ B3 @0 B( C% ^
19. 
    
20. /*-----------------------------------------------------------------------------------表单通用样式*/
    
21. 
    
22. form { margin: 0; }
    
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;
    
25.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
    
26.         fieldset { border: 0; padding: 0; }
    6 ^8 x$ t0 T# h2 g" V
27.                 legend { display: none; }
    
28.         label { cursor: pointer; margin-right: 0.5em; }
    
29. 
    
30. /*-----------------------------------------------------------------------------------头部风格 Header*/
      X5 X( I) X% y9 f
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; }
    8 p3 y: ^" t: i: L- U
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; }
    4 u/ T. X* h6 s3 o! y& q. l
36. 
    
37. #pagetitle { padding: 8px 0; height: 76px; he\ight: 60px; border-bottom: 4px solid #F5FBFF; }
    % t9 ~) |' I7 P8 Z5 e, L9 O) E
38.         #logo { border-right: 1px solid #86B9D6; padding: 0 10px; margin-right: 10px; }
    
39.         .banner468 { float: right; }
    & u0 i4 j- Z0 t. e6 N) k
40. 
    
41. /*主导航*/
    
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; }
    
43.         #menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
    5 i' O( x& q& _. u
44.                 #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
    + _$ |* i! M9 S8 h! O
45.         /*首页导航*/
    
46.         #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
    / f- t) t# ^) q& @* ^
47.                 #menu dt { float: left; width: 4em; white-space: nowrap; }
      i- Y+ C+ u* v! [0 t3 |+ m0 n
48.                         #menu dt a { color: #000098 !important; }
    
49.                 #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
    
50. 
    ( u! y7 D0 u! a. X
51. /*您的位置导航*/
    : ~: i+ V) W9 M: U9 ~7 b+ U( ~, e
52. #navigation { padding: 1.2em 0; }
    
53.         #navigation p { margin: 0;}
    3 w0 {0 J1 |9 _$ }1 V* e* b
54.                 #navigation p a, #navigation p strong { margin: 0 0.5em; }
    
55.         #searchform { float: right; }
    ) d% i+ x0 l$ a4 v+ B6 b4 X" w
56.                 #searchform * { vertical-align: top; }
    1 S# D% _: d6 d% ?' t" _
57.                 #searchform button { margin-left: 0.5em; }
    & b4 Q" g; [# d1 r4 x% X3 d
58. 
    
59.         #navigation.simplepage { padding: 0; border-top: 2px solid #009DEA; border-bottom: 1px solid #009DEA; line-height: 25px; background: #EFF5FF; margin-bottom: 1em; }
    2 Y9 I* ~6 [! A/ h( t
60.                 #navigation.simplepage p { float: right; margin-right: 0.5em; }
    
61.                 .simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 0.5em; }
    
62. 
    4 @8 I, T( @1 ]" J* F
63. /*-----------------------------------------------------------------------------------布局*/
    
64. 
    # t9 s3 H7 V0 T
65. .content { /*三列布局*/
    
66.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 0 0; }
    6 F3 @  K  R6 m  m
67.         /*\*/ * html .content { height: 1%; } /**/ *>.content { overflow: hidden; }
    
68. .contentL { /*两列布局，侧边在左侧*/
    1 f  \& P: u0 r+ b& i+ ]# M
69.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y -590px 0; }
    3 ^, A4 C, I' p- g1 j1 ~( h1 m
70.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    
71. .contentR { /*两列布局，侧边在右侧*/
    % Z0 d; @, C" x$ G* D& r/ r- z
72.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 580px 0; }
    
73.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    ) `8 e* @" t* ~+ p/ s
74. /*侧边样式*/
    + a! k; O9 P$ }/ l7 g& A  G8 |* t
75. .sideL { width: 296px; float: left; overflow: hidden; }
    0 p  F  ?: N" |3 C7 v" }( ?
76. .sideR { width: 202px; float: right; overflow: hidden; }
    
77. /*中间部分样式*/
    
78. .mainarea { margin: 0 4px; width: 382px; float: left; }
    * r0 M2 n9 N3 e* S
79.         .contentL .mainarea { margin: 0 0 0 4px; width: 556px; }
    
80.         .contentR .mainarea { margin: 0 4px 0 0; width: 576px; }
    
81. 
    
82. /*-----------------------------------------------------------------------------------版块样式*/
    
83. 
    
84. /*版块标题*/
    
85. .blocktitle { clear: both; border: 1px solid #86B9D6; padding: 1px; margin-bottom: 4px; line-height: 30px; }
    + h6 ~6 [7 K" t. F5 f6 x
86.         .blocktitle h2 { font-size: 1.2em; margin: 0; padding: 0 5px; background: #9FC8DF url(../images/new/title_bg.gif) repeat-x; }
    5 F* c% n+ c2 `. w4 h4 C9 T1 ^
87.         .blocktitle .more { margin-right: 5px; }
    
88. 
    
89. /*头条信息*/
    
90. #headline { padding: 5px; height: 70px; he\ight: 58px; overflow: hidden; }
    
91.         #headline strong { font-size: 1.2em; }
    
92.         #headline p { margin: 0.3em 0; }
    * x+ K7 }$ h9 Y; v
93.         #headline img { float: right; width: 48px; height: 48px; border: 4px solid #FFF; }
    
94. 
    
95. /*侧边版块*/
    
96. .sideblock { margin: 0 0 3px; border: 1px solid #86B9D6; background: #FFF; padding: 3px; }
    
97.         .boldblock { padding: 1px; background: #9FC8DF; } /*突出版块*/
    
98.         .cleanblock { border: 1px solid #86B9D6; margin: 0 0 4px; padding: 0; background: #F5FBFF; } /*简单版块*/
    ( \7 H4 t" W0 M. ~
99.                 .sideblock h3 { margin: 0; font-size: 1em; line-height: 2em; padding-left: 0.5em; border-bottom: 1px solid #BBE9FF; }
    6 |; ]  H; n" ~
100.                         /*\*/ * html .sideblock h3 { height: 1%; } /**/
     3 g. D9 M$ T8 T5 B: j
101.                 .sideblock p { margin: 0.3em; line-height: 1.6em; }
       c+ n" V& c) ?0 e4 C0 \
102.                         .headimg { float: right; margin: 5px 0 2px 5px; width: 80px; height: 80px; border: 4px solid #E2F0F9; }
     % [' K2 P! B( ^
103. 
     
104.         /*侧边多行列表*/
     
105.         .sideblock dl { margin: 0; padding: 5px; background: #FFF; line-height: 1.8em; }
     ! T: [1 E. `1 }% m' }$ ]0 R- Y
106.                 /*\*/ * html .sideblock dl { position: relative; } /**/
     , A1 q: r! ?/ x- R) p
107.                 .sideblock dt { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     
108.                 .sideblock dd { color: #999; margin-left: 0.8em; }
     
109.                         .sideblock dd a { color: #999; }
     - m% s. L) \& u/ I, X/ f6 h
110. 
     % e; _$ e  B! [7 Q) [# l$ {" }; t. G' g
111. /*单行信息列表*/
     
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; }
     / }/ \! i7 E; H
114.         .mainarea .msgtitlelist { font-size: 1.2em; }
     ; B6 \+ S% `! `
115.         .sideblock .msgtitlelist { background: #FFF; }
     ( i/ ^2 f5 Y) b, D- E+ E2 h0 `
116. 
     9 e3 r: t2 H  o7 {. w+ H: R
117. /*多行信息列表*/
     
118. .messagelist { margin: 5px 0; padding: 0; list-style: none; line-height: 1.6em; }
     3 K$ U  }) B; x: i4 j  G6 u
119.         .messagelist li { margin: 5px 0 10px 0;}
     ' I" H! g& V- P- O$ F% z+ G
120.                 .messagelist li h4 { margin: 5px 0; font-size: 1em; line-height: 2em; background: #F0F9FF; }
     . K" ^- P1 Q2 f" j: N  Y+ A: R
121.                         .messagelist li h4 a { color: #009; font-size: 1.2em; }
     
122.                                 .messagelist li h4 a:visited { font-weight: normal; }
     
123.                 .messagelist li p { margin: 0; }
     7 q5 l3 N4 I* z8 Q' Z$ ~- Q5 {
124. 
     
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; }
     
127.                 .messagelist dd { font-size: 12px; margin: 0; padding-left: 1em; color: #999; }
     5 C) I! j9 [' i) ^9 F1 P
128.                         .messagelist dd a { color: #999; }
     
129. 
     
130. /*热门话题*/
     
131. #hottag { overflow: hidden;  }
     * R* z; E( C7 @  W
132.         #hottag div { background: #FFF; padding: 0.5em; overflow: hidden; line-height: 1.8em; }
     
133.                 #hottag div { color: #999; overflow: hidden; }
     , i7 b# w6 j3 W* U8 l3 X
134.                 #hottag a { margin-right: 0.2em; white-space: nowrap; }
     
135.                         #hottag a em { color: #999; font-style: normal; }
     
136. 
     9 N5 \2 V: v7 ?0 M/ F: ~
137. /*用户面板*/
     9 b! S' j. h, T* Z4 O
138. #userpanel { height: 8.8em; overflow: hidden; }
     5 d: t# G# e% H- y/ v0 P* ^$ `
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; }
     : c* N6 r5 r; T( R" B
143.                 #userpanel form a { line-height: 2em; color: #B353B3; border-right: 1px solid #86B9D6; padding-right: 5px; }
     
144.         /*登录后*/
     1 Y! ~! a  S, R+ ]9 S) n0 K
145.         #userpanel li { border-bottom: 1px solid #BBE9FF; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.8em; padding-left: 12px; }
     8 D* e& X! f6 s4 y
146.                 #userpanel li a { color: #000098; }
     $ V, I: M! x! x
147. 
     * k- u$ O: h8 W, }) ~
148. /*空间之星*/
       Z, a1 L1 {) U
149. #spacestar ul { width: 168px; margin: 0 4px; padding: 0; height: 235px; }
     
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; }
     : Z/ N" r* L! {8 E! \0 }
152.         #spacestar p { margin: -4px 0 !important; margin: 0 0; line-height: 20px; height: 20px; }
     
153. 
     ; d! Q# D% s5 d" Q
154. /*同城空间*/
     
155. #cityspace { background: #F0F9FF; }
     
156. #cityspace form { width: 10.5em; margin: 0 auto; padding: 5px 0; }
     
157.         #cityspace select { margin: 2px 0; }
     2 M) d. D$ e9 p
158.         #cityspace button { float: right; margin-top: 4px; width: 3.5em; height: 3.5em; }
     8 u; d0 i8 j8 T2 {
159.         #blogblock #cityspace { margin: 0 0 4px 0; }
     
160. 
     
161. /*空间排行*/
     % O9 m4 y) o8 q8 K- q
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; }
     # c% s1 M  L/ E' @9 J
163.         #hotspace li { height: 20px; overflow: hidden; }
     , t8 M/ W" ]! Y. ?6 e
164.         #hotspace em { float: right; font-style: normal; font-size: 9px; color: #999; width: 40px; }
     , U& u" _9 I) f8 p( C( A
165. 
     
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; }
     
169.         #hotarticletabs { position: absolute; margin: 0; line-height: 18px; top: 7px!important; top: 8px; right: 10px; }
     8 d2 `; L" ]' z
170.                 #hotarticletabs span { background: #86B9D6; float: right; color: #FFF; margin-right: 2px; height: 18px; padding: 0 5px; cursor: pointer; }
     
171.                         #hotarticletabs span.active { background: #FFF; color: #333; border: 1px solid #86B9D6; border-bottom: none; }
     * {* z$ s0 X% I" k
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; }
     $ `! Y4 ^9 y1 L' a7 ?2 R4 N% W
174. 
     
175. /*图片列表*/
     
176. .imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
     
177.         /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
     
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; }
     % g: e+ x& C! ~; d
179.                         .imgthumblist li.list1line { height: 123px; height: 115px; }
     
180.                         .imgthumblist li.list2line { height: 143px; height: 135px; }
     $ a$ p+ I8 _/ g/ R
181.                         .contentL .imgthumblist li { margin: 0 1px 3px; }
     " z: D& r5 ]; U) e! L
182.                         .imgthumblist img { width: 100px; height: 100px; }
     
183.                         .imgthumblist p { margin: 0; text-align: center; line-height: 1.3em; }
     8 v- b4 l5 W! d4 L2 h8 i4 ]% l
184.         .throughgallery { width: 100%; clear: both; margin-bottom: 5px; padding-bottom: 3px; background: #E2F0F9; }
     ( C: E) k) k0 Y2 ^( ?
185.                 .throughgallery .imgthumblist { margin: 0; }
     
186.                 .throughgallery .imgthumblist li { height: 120px; margin: 3px 1px; }
     & t; {0 q/ l3 \( m- o' s
187. 
     
188. /*商品*/
     4 e2 D* T' ^. n/ j' X9 |; [3 }8 }
189. /*\*/ * html .goodsthumblist { height: 1%; } /**/ *>.goodsthumblist { overflow: hidden; }
     7 r, Q3 {& B  l7 T6 _$ Z* V
190.         .goodsthumblist { margin: 0; padding: 3px 0; list-style: none; }
     
191.                 .goodsthumblist li { float: left; width: 90px; height: 100px; text-align: center; }
     * k8 r% E5 P' W& w
192.                         .goodsthumblist li img { width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     4 B7 e; l0 r6 _1 i& ~7 L
193.                         .goodsthumblist li p { margin: -3px 0 0 !important; margin: 0; height: 1.5em; line-height 1.5em; overflow: hidden; }
     $ y: q8 R2 |5 L' Q
194. 
     " ^! k  q2 _7 d7 o/ g' Z
195. .imgtitlelist { margin: 10px 0; padding: 0; list-style: none; }
     
196.                 .imgtitlelist li { padding-left: 85px; padding-bottom: 5px; margin: 5px 0; border-bottom: 1px solid #E2F0F9; }
     
197.                 /*\*/ * html .imgtitlelist li { height: 1%; } /**/ .imgtitlelist>li { overflow: hidden; }
     $ O% n, g. ?2 H% O* p7 P9 w  d
198.                         .imgtitlelist li h4 { margin: 0.3em 0; font-size: 1em; }
     ! {; B% K$ H9 C' U: ?# M4 O
199.                         .imgtitlelist li img { float: left; margin-left: -85px; width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     
200.                         .imgtitlelist li p { margin: 0; line-height: 1.5em; }
     
201.         .sideblock .imgtitlelist li { padding-left: 65px; }
     0 M& C* D) |2 x7 m2 I) h, R; _6 U
202.                 .sideblock .imgtitlelist li img { width: 48px; height: 48px; margin-left: -60px; }
     
203.        
     : o9 \$ B: Y2 [- p2 l5 ~  g% r9 F
204. 
       q7 S  H6 S& f, w( I' u, Y
205. /*栏目区块列表*/
     : p- c. M" W, `  ?9 V0 `* h* F
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; }
     
209.                         .category h3 strong a { color: #333; text-decoration: none; }
     
210.         /*.category ul { background: #FFF; margin: 0; padding: 4px 0 0 0; list-style: none; line-height: 1.6em; }
     ( B4 E  C4 u2 _  |, n: X  b/ p
211.                 .category li { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     " V1 k4 }& J  z  y7 ^+ K
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; }
     ( k/ n- @$ F( n# |- S+ G2 V3 z; Y# H+ o
214. 
     
215. 
     6 o  `' O2 n$ z4 N4 n' N
216. /*-----------------------------------------------------------------------------------首页各版块*/
     
217. 
     
218. /*#commendimage { height: 155px; }
     3 Z/ S. t+ ?. a( b7 a; `) t8 A
219. #topicnews { height: 217px; }
     + |3 ~; C6 m% M$ g$ i$ K
220. #newgoods, #commendgoods { height: 200px; }
     
221. #hotcommentfile, #hotfile, #newlink, #hotlink { height: 220px; }*/
     
222. 
     
223. 
     
224. 
     - T" `, n+ {  x, D6 ^
225. 
     " j: U- E% Z! E: i0 s
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.        
     - \& K1 C) E; j, O$ f& x- Q
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; }
     ' B7 F" U; |. Y0 z
233.         .articlelist h4 { margin: 0; background: #F0F9FF; font-size: 1.2em; padding: 0.2em 0.5em; cursor: pointer; }
     4 ~/ b& r3 h" S  F
234.                 .articlelist h4 em { font-style: normal; font-weight: normal; font-size: 0.8em; color: #B353B3; margin-left: 0.3em; }
     & P  m1 ?- r3 @8 m: ]
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; }
     8 m3 F' R! i. K+ L
237.                
     
238.                 .articlelist li strong { font-weight: normal; color: #999; line-height: 2em; padding-left: 0.5em; }
     
239.                         .articlelist li strong a { color: #999; }
     
240.                 .articlelist li p { margin: 0.3em 0; line-height: 1.6em; }
     2 K" t- F) Y; q, P+ y
241.                         .articlelist li p a.more { float: none !important; }*/
     
242. 
     8 m, P- B, f- M# R8 w1 H' L
243. 
     ) u# B5 @! u5 ~5 Z2 [. O: f* o# O
244. .catepic { text-align: center; }
     
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); }
     " _. Z  Y4 n/ }* w0 N
247.         .catepic p { text-align: left; margin: 0.5em; }
     
248. 
     
249. /*专题列表*/
     
250. #subjectlist { border-color: #86B9D6; padding: 2px; }
     + K/ p9 k7 X; b$ s9 ~, z
251.         #subjectlist h3 { border: none; background: #9FC8DF; }
     * {2 D, f& d  U, h# x, \
252.         #subjectlist li { border-bottom: 1px solid #E2F0F9; text-align: center; padding: 3px; }
     ! J# M2 Y3 u' N8 y
253.                 #subjectlist p { margin: 0; line-height: 1.2em; }
     
254. 
     
255. 
     
256.         #xspace-rates { height: 2em; }
     2 A/ [* x6 `+ Z, |& c. n. {' B
257.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     1 z% ]' `" Q% x8 P
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; }
     
259.                         #xspace-rates a:hover { border-color: #CCC; }
     ! V8 H! m5 D" Z
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; }
     4 k3 Q$ b" L0 h
261. 
     2 W. q. @# ?9 q
262. 
     
263. #panel { width: 600px; overflow: hidden; margin: 1em auto; }
     - @( d) S6 z- _& J! t8 D5 A
264. 
     & E9 T$ P8 x; J+ e6 F9 Q( a
265. 
     
266. /*Pages*/
     $ R" `# h: q) v
267. .pages { text-align: right; border-top: 1px solid #9FC8DF; }
     % E; ~9 f; y0 N3 t) Q0 F
268.         /*.pages table { margin: 3px 0 3px auto; text-align: center; }
     6 m4 k- o* J# p1 Q! g  a% u7 o& w
269.                 .pages td { padding: 0 5px; border: 1px solid #B9D0ED; background: #FFF; }
     
270.                 .pages a { text-decoration: none; }
     : {0 i8 B- d0 r
271.                 .pages .currentpage { background: #F0F9FF; border-color: #86B9D6; font-weight: bold; }*/
     ! e2 t: o! v0 u! P% u
272. 
     * ^& ?% g4 H3 p, c% f2 F
273. /* 分页 */
     1 w' H6 e+ s* a+ F
274. .xspace-page { margin: 2px 2px 2px auto; }
     2 M  R( ]* d' h& P. w
275.         table.xspace-page a { display: block; background: #E2F0F9; padding: 0.3em 0.5em; text-decoration: none; }
     * Z$ Z2 O8 J7 J0 `
276.                 table.xspace-page a:hover { background: #86B9D6; }
     
277.         table.xspace-page td.xspace-current { background: #86B9D6; padding: 0.3em 0.5em; font-weight: bold; }
     # x! X$ S% X  h; u$ H5 m' W! H  w) V
278.         table.xspace-page td.xspace-totlerecord, .xspace-page td.xspace-totlepages { background: #E2F0F9; padding: 0.3em 0.5em; }
     
279. 
     ; q1 Y5 n) z# Q
280. .smalltxt { font-size: 12px; color: #999; font-weight: normal; }
     / L5 T3 `% o1 ?  l
281.         .smalltxt a, .smalltxt a:visited { color: #999 !important; }
     7 N, o& @& ~. }9 V# m3 q
282. 
     : ?" i) N7 S& ~/ R( V+ f8 ~& f
283. /*-----------------------------------------------------------------------------------页脚 Footer*/
     
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; }
     6 S" W! H9 _; i' M0 Y9 A, V
285.         #footer p { margin: 0.3em 0; color: #999; }
     
286.         #footer strong { color: #007AB6; }
     
287.         #footer em { font-style: normal; font-weight: bold; color: #96A800; }
     0 p6 H+ ~  _" F- L' ]
288.        
     
289. .imglogolist { margin: 0; padding: 0; list-style: none; text-align: center; }
     
290.        
     
291. #articledetail { border: 1px solid #86B9D6; text-align: center; }
     + p1 m  S; Z% L& J( y3 a4 F) X* O
292. .articletitle { font-size: 1.6em; margin: 1em 0 0.5em; }
     
293. .articleinfo { border-bottom: 1px solid #9FC8DF; margin: 0;}
       S' W! b6 y2 z/ ]# [
294. .articlectrl { margin: 0.5em 0 1.5em; }
     - c# a4 I  h% P  |  `6 p
295. 
     & u. [( X# t. v9 Z
296.         #articlebody { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; font-size: 1.2em; }
     3 h) ~# Y$ {+ V6 @4 c# d6 L9 c
297.         #articlebody * { line-height: normal; }
     
298.                 #articlebody  p, #articlebody  div { line-height: 1.8em !important; margin: 10px 0; }
     
299.                         #articlebody  p *, #articlebody  div * { line-height: normal !important; }
     : F8 X, ~! \: F
300.        
     
301.         #articlebody .addoninfo { border: 1px solid #EEE; }
     
302.                 #articlebody .addoninfo h5 { font-size: 1em; margin: 0; line-height: 2em !important; border-bottom: 1px solid #EEE; padding-left: 1em; }
     
303.                 #articlebody .addoninfo ul { margin: 0.5em 0 0.5em 2em; padding: 0; }
     ( O% F+ g& C# ]- y8 L7 W# _
304.                         #articlebody .addoninfo li { line-height: 1.6em !important; }
     " V3 p* n% R1 Z: s( L+ ]8 }
305.        
     $ n( F6 R8 X8 Y8 z( h# g
306.         #articlebody img { width: expression(this.width > 500 ? 500: true); max-width: 500px;  }
     ) a9 r2 e" d0 @" j
307.        
     2 K- L& s! E) y! [9 F
308.         #articlebody kbd.showvideo, #articlebody kbd.showflash { font: 1em Arial, Helvetica, sans-serif; cursor: pointer; text-decoration: underline; }
     
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; }
     8 p$ \. p# ~/ X" G6 s* J, i
311.                                 #commentlist img { max-width: 500px; width: expression(this.width > 500 ? 500: true); }
     : Q8 x; F. Z& a% p  y; n( m
312.                         #commentlist .messagelist li div { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; }
     ) v: p7 v9 [. a( ]& b
313.                                 #commentlist .messagelist li div * { line-height: normal; }
     + Q! Q! ~$ J; @' f6 W2 U8 A+ u
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; }
     
316. 
     8 f$ j2 f* ~. I$ c/ S, C9 Q& ~
317. /*发表评论*/
     
318. #comment { margin-top: 4px; }
     % z: M* D2 _8 w% `# M
319.         #comment h3 { margin: 0 5px; font-size: 1em; line-height: 2em; }
     
320.         #comment form { background: #FFF; margin: 0; padding: 5px; }
     & ]8 u. N5 ]3 Z3 m
321.         #comment p { margin: 0.3em 0; }
     
322.         .seccodeline * { vertical-align: middle; }
     , j4 o7 }( T* b; e9 x+ v! O4 K
323.         #xspace-rates { height: 2em; }
     ) u) }% J( A* Y) z6 f( R
324.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     % s" r! A( ^/ f# S
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; }
     ; }* D# K7 s6 U$ V
326.                         #xspace-rates a:hover { border-color: #CCC; }
     & W9 \3 l# ]5 g1 q& o; q/ u
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; }
     
328. 
     3 L' s9 T/ K2 A- o
329. /*AJAX div*/
     7 S/ D( F6 d! b8 x
330. .xspace-ajaxdiv { position:absolute; padding: 5px; border: 1px solid #BBB; background: #FCFFEF; text-align: left; }
     
331.         .xspace-ajaxdiv h5 { line-height: 24px; font-size: 1em; margin: 0; }
       K9 J7 f1 @# _/ ~
332.                 .xspace-ajaxdiv h5 a { float: right; font-weight: normal; }
     
333.         .xspace-ajaxcontent { background: #FFF; border: 1px solid #EEE; }
     6 B* k* i/ E, G" x1 P0 B* |, j
334.                 .xspace-ajaxcontent form { margin: 0; }

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------综合设置*/
   
2. 
   
3. body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   ) C2 l& {) [6 u8 ]
4. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   
5. 
   

复制代码

( @$ O6 r5 Y+ S7 f! s2 l4 {' D分析

4 _& H4 t4 b9 o, M7 o: A

1. margin属性说明：
   ( S. {, H7 i& I$ W, v
2. 
   
3. 检索或设置对象四边的外延边距。
   # |8 Y3 [1 w/ v& q5 T
4. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
   5 p. K4 S# M! R9 r! H
5. 如果只提供一个，将用于全部的四边。
   ) |9 T( L& x& U* M4 d; Z
6. 如果提供两个，第一个用于上－下，第二个用于左－右。
     X0 j2 h) i+ w# g6 H& J- A
7. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
   
8. 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
   * V/ ]" Q& G/ p% @" z7 ^
9. 在IE4+，margin属性不可用于td和tr对象。
   : K& ]7 c( f1 W
10. 外延边距始终透明。
    
11. 
    ! ]1 `, J( N+ l1 x
12. color : 　指定颜色
    ( c$ S" T+ f% C8 X9 s
13. text-align:文本的对齐方式。(left : 　左对齐,right : 　右对齐,center : 　居中,justify : 　两端对齐)
    " X" z. l6 Z; W
14. font: 12px Arial, Helvetica, sans-serif;  :这段是字体相关的
    + s! L  ^! c4 F/ R; o4 P0 E: S/ x
15. 
    - T7 l1 A4 s$ |: a$ P* f/ I4 j1 r
16. 
    

复制代码

傲天♂浪子追风

1. /*链接样式*/
   0 y0 i( g/ a/ ^- I- Z3 }# Z4 X
2. a { color: #000; text-decoration: none; }
   
3.         a:hover { text-decoration: underline; color: #000098; }
   % U2 k% }: [  Z
4.                 a:visited { color: #666;}
   $ c" O5 }# X# l5 K+ a
5.         #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
   : _- h) `0 b* D5 F8 R& V
6.                 #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
   
7.         a img { border: none; }
   - x( f, R+ K3 U1 {- M/ s5 ]  P. M
8. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
   ) U: k7 n1 N& _) q7 w; e+ G' ~
9.         li cite a { color: #999; }
   
10.                 li cite a:visited { color: #999; }
    
11. .more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
    7 C* r! F# }; N: p, C
12. 
    

复制代码

分析

1. 
     a0 a' C" Q: p# h
2. text-decoration:文本连接的属性,一般有以下几种参数:
   0 ?4 S, `. Y, }# M
3. none : 　无装饰
   
4. blink : 　闪烁
   ) l! \; B% `# _0 Z
5. underline : 　下划线
   3 S% G9 B! M* v! w" L
6. line-through : 　贯穿线
   2 K$ ]" }3 c+ z$ `+ U
7. overline : 　上划线
   5 _' }& A( P) }4 ~" N- l
8. 
   ( `- ^! e* _" Z# I  k: J# N9 I
9. 
   
10. hover:设置对象在其鼠标悬停时的样式表属性。
    
11. 
    
12. visited:对象在其链接地址已被访问过时的样式表属性。
    " E+ a  S7 m; z8 F. d: g
13. 
    ) i' H/ `0 R1 P) v4 O, e8 _
14. #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    $ [$ S) e+ E3 K
15. #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }:
    
16. 上面这两行是与鼠标相关
    . e# l! b& }) c- r
17. 
    
18. a img { border: none; }图片连接相关
    & A" j7 Q/ d' j) O
19. 
    / P  f' R4 J; \: r
20. 
    3 a* V" ^0 I4 d8 Z$ Y
21. cite:这个一般是引用标签的时候用的,不知道用来这里做什么
    ( _+ j4 b4 {' @3 \/ R8 I
22. 
    
23. 
    
24. font-style:字体式样,一般常用参数有:
    
25. normal : 正常的字体
    $ i4 L* s/ x; O3 ^, l* p& d. o
26. italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
    
27. oblique : 倾斜的字体
    
28. 
    & `4 B5 g  O. U( c% a
29. 
    ) n$ c# I& w. t( U2 u6 l/ ?" i$ }. [8 a, ]
30. float: right 该属性的值指出了对象是否浮动及如何浮动。常用参数如下:
    $ g: X# _, d$ e2 Z# `
31. none : 　对象不浮动
    9 H3 Q2 M( k% H8 C2 s
32. left : 　对象浮在左边
    8 G9 h( a* @7 Z, S# O% x
33. right : 　对象浮在右边
    
34. 
    8 Y* B) `  k" q
35. 
    4 H6 P7 _: y! s
36. important:样式表条目,提升指定样式规则的应用优先权。
    : {! p7 |: K+ f9 e
37. 
      \; p% t# u; m# A* q# Y
38. 
    ' l3 x7 c! ^8 a% V: p, K: W
39. background: transparent 这个的意思就是背景透明...
    1 a* M6 y0 U6 [+ j* h6 J* m( ]
40. 
    
41. 
    
42. 
    6 o. B* e) Q2 a1 |( V5 S. t7 t
43. font-weight: normal :文本字体的粗细,常用参数如下:
    
44. normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
    4 \9 V, u: t4 A2 _5 v7 G' v
45. bold : 粗体。相当于number为700。也相当于b对象的作用
    
46. bolder : IE5+　特粗体
    2 N1 U5 j- j$ h6 ?
47. lighter : IE5+　细体
    
48. number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    3 h" ?6 n& e1 q! ~6 m
49. 
    ; f8 B: X% e4 j4 H3 g4 q4 `
50. cursor: pointer:这个是鼠标放在对象中的状态,简单点来可以这样说,也就是鼠标放在连接上的时候显示的鼠标形状,一般有以下N种参数,这个真的是TMD的多啊
    
51. 语法：(每一竖隔开为一个状态)
    % o* q( n# u9 a; x; }
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)
    5 B( `2 q+ v/ p, B" x& W+ \
53. 
    . M8 d0 P3 u# N/ z' g" ]+ V! N* B
54. 
    
55. 
    5 k, z- B+ ]7 W) L+ f& y/ ^( d7 ]- {5 A& A1 g
56. 
    + B5 }* y& O! C. W7 }2 \7 I3 x
57. 
    7 v* r/ m; s  A& h+ A  X
58. 
    ) O6 F* w9 x, V- j% ]- J* ?
59. 
    6 e. n5 D0 V+ D2 x8 C! I% o( ], d

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------表单通用样式*/
   
2. 
   7 W3 {; X+ ?+ P( v7 e
3. form { margin: 0; }
   & W3 U9 d/ d4 p. V; ]  T" J
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;
   , `5 G2 p. w1 D0 P" Z
6.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
   4 e5 _* O  Q& X: g! g0 G5 d! F8 \
7.         fieldset { border: 0; padding: 0; }
   
8.                 legend { display: none; }
   
9.         label { cursor: pointer; margin-right: 0.5em; }
   # o. h6 Z1 M; r/ `# x

复制代码

bronwen

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

傲天♂浪子追风

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

傲天♂疯紫

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