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

傲天♂浪子追风

1. * { word-break: break-all; } /*在IE中实行强制换行*/
   2 H4 Q$ [. g$ \
2. #newsblock { margin-top: 4px; }
   
3. /*-----------------------------------------------------------------------------------综合设置*/
     K& [6 E! u& H8 B' G; O/ h
4. 
   
5. body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   % y  A2 |& @/ P0 f0 W( I
6. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   
7. 
   
8. /*链接样式*/
   + d) ^; z/ ]4 ~; m0 E0 L# f5 f7 N
9. a { color: #000; text-decoration: none; }
   1 f& J9 D: x# [0 H, e
10.         a:hover { text-decoration: underline; color: #000098; }
    
11.                 a:visited { color: #666;}
    
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; }
    
15. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
    & k; [& Z$ Y" Q/ Q: e& T
16.         li cite a { color: #999; }
    
17.                 li cite a:visited { color: #999; }
    3 ^; R- N8 j. n
18. .more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
    + j1 m% m# D) {4 U' i$ w: @, k
19. 
    
20. /*-----------------------------------------------------------------------------------表单通用样式*/
    
21. 
    6 D/ }9 z% v$ m0 g* h$ d) ^4 R
22. form { margin: 0; }
    4 l2 o4 j7 u5 t9 o
23.         input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
    + G- N/ m4 a% a+ R+ N7 [* S
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; }
    
27.                 legend { display: none; }
    
28.         label { cursor: pointer; margin-right: 0.5em; }
    $ v# ?& x5 a4 x! F9 ]$ \6 k/ h5 m# ~
29. 
    
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; }
    / t1 ?8 n! L& X$ v6 u* Y$ T
33.         #topmenu ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #86B9D6; }
    3 K/ _7 ^8 y$ X2 E! Y$ `% b8 P
34.                 #topmenu li { display: inline; border-left: 1px solid #86B9D6; padding-left: 1em; padding-right: 0.5em; }
    5 j' T. s) W- X
35.                         #topmenu a { color: #154BA0; }
    ! d* ]1 R; F% \3 {3 \1 w( ^6 l
36. 
    / a. S8 v* y5 w( K
37. #pagetitle { padding: 8px 0; height: 76px; he\ight: 60px; border-bottom: 4px solid #F5FBFF; }
    . N: D3 A3 U4 q' e0 ^# ]4 w; [7 U
38.         #logo { border-right: 1px solid #86B9D6; padding: 0 10px; margin-right: 10px; }
    8 f9 a$ g5 k# b" l
39.         .banner468 { float: right; }
    
40. 
    # s2 j" ?/ ?/ t0 O8 f9 v
41. /*主导航*/
    . W+ X9 v3 S. A1 \$ X8 ]. \
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; }
    , X2 h5 o! ?- F% k
43.         #menu ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden; }
    
44.                 #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
    
45.         /*首页导航*/
    - h, B1 }9 D1 o7 Q
46.         #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
    
47.                 #menu dt { float: left; width: 4em; white-space: nowrap; }
    
48.                         #menu dt a { color: #000098 !important; }
    , j5 V0 I* z+ z4 u% L; {3 r
49.                 #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
    $ D4 p9 t9 a) j! R( d; }" q$ W
50. 
      y7 _2 t2 \1 V& t
51. /*您的位置导航*/
    ! d3 w9 T. t) _# |9 t& O) ^  M
52. #navigation { padding: 1.2em 0; }
    
53.         #navigation p { margin: 0;}
    - x$ S# n; V+ [1 u% V
54.                 #navigation p a, #navigation p strong { margin: 0 0.5em; }
    
55.         #searchform { float: right; }
    
56.                 #searchform * { vertical-align: top; }
    
57.                 #searchform button { margin-left: 0.5em; }
    3 f3 [. ~8 [8 P9 u7 R; X/ c2 g
58. 
    # X1 k- y' I/ l* `4 K( T8 r
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; }
    , O5 h0 ]) H* |/ _% C# U8 z* F
61.                 .simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 0.5em; }
    ! S/ ?- Z3 l+ |
62. 
    
63. /*-----------------------------------------------------------------------------------布局*/
    
64. 
    : K+ @% i  T: [7 c) ]
65. .content { /*三列布局*/
    % C) Z: d' A* h
66.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 0 0; }
    
67.         /*\*/ * html .content { height: 1%; } /**/ *>.content { overflow: hidden; }
    
68. .contentL { /*两列布局，侧边在左侧*/
    
69.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y -590px 0; }
    
70.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    ) w& @1 H8 L6 Y5 a7 F( x) @
71. .contentR { /*两列布局，侧边在右侧*/
    
72.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 580px 0; }
    - r& A1 o! c& K! Y  x
73.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    
74. /*侧边样式*/
    
75. .sideL { width: 296px; float: left; overflow: hidden; }
    5 R% I6 s! P- `' b( F( K& S( A& |
76. .sideR { width: 202px; float: right; overflow: hidden; }
    
77. /*中间部分样式*/
    0 Q, S3 ~. I8 N/ d. X( s
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; }
    , R4 ]4 \4 X$ \6 Q
81. 
    
82. /*-----------------------------------------------------------------------------------版块样式*/
    
83. 
    
84. /*版块标题*/
    / k. l' Y! X- _2 [7 v0 [4 G, M4 W
85. .blocktitle { clear: both; border: 1px solid #86B9D6; padding: 1px; margin-bottom: 4px; line-height: 30px; }
    
86.         .blocktitle h2 { font-size: 1.2em; margin: 0; padding: 0 5px; background: #9FC8DF url(../images/new/title_bg.gif) repeat-x; }
    
87.         .blocktitle .more { margin-right: 5px; }
    7 C) _# A9 E% y
88. 
    / ], `  S  \7 j7 e- w) I
89. /*头条信息*/
    
90. #headline { padding: 5px; height: 70px; he\ight: 58px; overflow: hidden; }
    
91.         #headline strong { font-size: 1.2em; }
    5 }7 a- z" r9 s7 K( Z. p: v: H3 E
92.         #headline p { margin: 0.3em 0; }
    ' F; {6 S( o& b6 V; B. |4 X
93.         #headline img { float: right; width: 48px; height: 48px; border: 4px solid #FFF; }
    
94. 
    4 E6 R' ]% U) [/ N9 \3 D% Q
95. /*侧边版块*/
    
96. .sideblock { margin: 0 0 3px; border: 1px solid #86B9D6; background: #FFF; padding: 3px; }
    
97.         .boldblock { padding: 1px; background: #9FC8DF; } /*突出版块*/
    " d/ Y( O3 F+ t+ {0 @% L
98.         .cleanblock { border: 1px solid #86B9D6; margin: 0 0 4px; padding: 0; background: #F5FBFF; } /*简单版块*/
    3 R! ?+ X8 U6 O* z6 f+ N% Y, ]
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%; } /**/
     ' C) E; L; e3 o+ Z, r! i1 U
101.                 .sideblock p { margin: 0.3em; line-height: 1.6em; }
     . }4 E8 x8 a! C4 C6 K8 m; e
102.                         .headimg { float: right; margin: 5px 0 2px 5px; width: 80px; height: 80px; border: 4px solid #E2F0F9; }
     , R' v  c, S3 g; D: L! K- p
103. 
     
104.         /*侧边多行列表*/
     : N: h' ?5 }% e& B
105.         .sideblock dl { margin: 0; padding: 5px; background: #FFF; line-height: 1.8em; }
     
106.                 /*\*/ * html .sideblock dl { position: relative; } /**/
       g- S' {$ r; y: i6 ], W
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; }
     2 Q7 X/ c; C! i% j
109.                         .sideblock dd a { color: #999; }
     5 ^; J& D5 B/ ^4 B2 p8 L  p
110. 
     3 y3 `2 ~$ u  j) g- D3 x
111. /*单行信息列表*/
     * y- k: F  p: l9 @( v; W+ K- b1 @
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; }
     
115.         .sideblock .msgtitlelist { background: #FFF; }
     / f- K  t& ?, p
116. 
     
117. /*多行信息列表*/
       {5 `, {9 h  V. a8 A
118. .messagelist { margin: 5px 0; padding: 0; list-style: none; line-height: 1.6em; }
     ' j. N  X' `7 U& f9 }& [
119.         .messagelist li { margin: 5px 0 10px 0;}
     
120.                 .messagelist li h4 { margin: 5px 0; font-size: 1em; line-height: 2em; background: #F0F9FF; }
     5 `. _9 O5 s7 m6 s( {; S' W0 t. C& s
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; }
     + W! L9 \- Z! l! [& H6 m% j- {
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; }
     
128.                         .messagelist dd a { color: #999; }
     
129. 
     
130. /*热门话题*/
     ' a+ }$ h% D- c% X9 r. \. M+ x
131. #hottag { overflow: hidden;  }
     
132.         #hottag div { background: #FFF; padding: 0.5em; overflow: hidden; line-height: 1.8em; }
     % c& _  J2 H; n; l! C
133.                 #hottag div { color: #999; overflow: hidden; }
     ) e7 j" [/ g" b. D
134.                 #hottag a { margin-right: 0.2em; white-space: nowrap; }
     5 @. x  s# `  u# x6 e. A+ p6 ^
135.                         #hottag a em { color: #999; font-style: normal; }
     
136. 
     
137. /*用户面板*/
     / D3 E# p$ |, [$ _6 K, z
138. #userpanel { height: 8.8em; overflow: hidden; }
     9 T/ I: f. R! k) N
139.         #userpanel form { margin: 5px auto !important; margin: 0 auto; width: 150px; }
     5 P. R& o1 n: K7 [0 |8 p! w& F6 X
140.                 #userpanel input { width: 90px; }
     
141.                 #userpanel p { margin: 0.5em 0; }
     1 g" x- C$ }5 W' N% ^
142.                 #dologin { float: right; }
     6 P& }0 \6 x% z' K, D. h% P
143.                 #userpanel form a { line-height: 2em; color: #B353B3; border-right: 1px solid #86B9D6; padding-right: 5px; }
     / F, j6 a! A5 O7 \
144.         /*登录后*/
     * H3 r2 P2 Y+ e% i
145.         #userpanel li { border-bottom: 1px solid #BBE9FF; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.8em; padding-left: 12px; }
     
146.                 #userpanel li a { color: #000098; }
     
147. 
     
148. /*空间之星*/
     & Z! c2 \+ B  [8 }
149. #spacestar ul { width: 168px; margin: 0 4px; padding: 0; height: 235px; }
     : t" C! K5 Q; s9 ~1 f# o8 d
150.         #spacestar li { float: left; display: inline; width: 54px; height: 70px; overflow: hidden; margin: 3px 1px; background: #E2F0F9; text-align: center; }
     3 q$ P: \: d$ M* r
151.         #spacestar img { width: 48px; height: 48px; margin-top: 3px; }
     " a! v0 |0 |6 A2 n  w8 Y
152.         #spacestar p { margin: -4px 0 !important; margin: 0 0; line-height: 20px; height: 20px; }
     3 r, a; ?' O- C
153. 
     7 q8 L% y* n' z6 k2 k# B' V
154. /*同城空间*/
     * F6 T% c4 l9 ^/ Y$ [
155. #cityspace { background: #F0F9FF; }
     
156. #cityspace form { width: 10.5em; margin: 0 auto; padding: 5px 0; }
     
157.         #cityspace select { margin: 2px 0; }
     7 q- b" H/ @5 _) k- B" l
158.         #cityspace button { float: right; margin-top: 4px; width: 3.5em; height: 3.5em; }
     . G7 J4 g$ s4 q& I0 v
159.         #blogblock #cityspace { margin: 0 0 4px 0; }
     
160. 
     
161. /*空间排行*/
     + b1 E0 K/ y' u6 z+ C8 F
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; }
     & V9 t$ }- m& R2 ^  G& D
163.         #hotspace li { height: 20px; overflow: hidden; }
     
164.         #hotspace em { float: right; font-style: normal; font-size: 9px; color: #999; width: 40px; }
     
165. 
     
166. /*热门文章 */
     
167. #hotarticle { border: 1px solid #86B9D6; background: #E2F0F9; padding: 3px; position: relative; }
     8 z5 R  g4 R3 ]  Z- G
168.         #hotarticle h3 { font-size: 1.2em; margin: 0; line-height: 22px; border-bottom: 1px solid #86B9D6; }
     + T" F1 Z" U: [
169.         #hotarticletabs { position: absolute; margin: 0; line-height: 18px; top: 7px!important; top: 8px; right: 10px; }
     & Z% \: T. D" w0 ^0 y
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; }
     . b. T7 F& Q$ g" u: G* K
172.         #hotarticle ul { background: #FFF; margin: 0; padding: 0.5em; list-style: none; line-height: 1.7em; height: 16.5em; overflow: hidden; }
     , f# y' E, E! K; }. G, H
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; }
     ) A# f( Y1 x  X( X6 H1 x6 U5 e
174. 
     1 O, X7 f2 k" q. s
175. /*图片列表*/
     ) Z+ E; |- p: M7 r/ o( m  [- w
176. .imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
     2 M4 _2 q9 ]" s1 X
177.         /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
     $ o/ F& T  O: Z( z  H: }; h
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; }
     
180.                         .imgthumblist li.list2line { height: 143px; height: 135px; }
     7 I9 f/ K' H8 t0 m# k$ j3 L
181.                         .contentL .imgthumblist li { margin: 0 1px 3px; }
     % c6 q: ?7 _3 J% G
182.                         .imgthumblist img { width: 100px; height: 100px; }
     : u- R! i! Q* Q' _
183.                         .imgthumblist p { margin: 0; text-align: center; line-height: 1.3em; }
     $ O! u+ l( Q' w
184.         .throughgallery { width: 100%; clear: both; margin-bottom: 5px; padding-bottom: 3px; background: #E2F0F9; }
     ; H; X" G$ y- H# ?( s$ m; N- h
185.                 .throughgallery .imgthumblist { margin: 0; }
     9 Y& `/ H4 l! _; ^. a( g* t
186.                 .throughgallery .imgthumblist li { height: 120px; margin: 3px 1px; }
     + Z& K6 e) D7 [8 p$ {
187. 
     . ?9 ~0 o' y1 {' t5 ~! F
188. /*商品*/
     9 }8 v! S1 @9 i/ g* u9 \
189. /*\*/ * html .goodsthumblist { height: 1%; } /**/ *>.goodsthumblist { overflow: hidden; }
     
190.         .goodsthumblist { margin: 0; padding: 3px 0; list-style: none; }
     " C  g- I' K) B$ X5 d2 I3 {
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; }
     
193.                         .goodsthumblist li p { margin: -3px 0 0 !important; margin: 0; height: 1.5em; line-height 1.5em; overflow: hidden; }
     
194. 
     4 n" W4 T+ V9 \' Q8 X4 |5 h& j
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; }
     - d4 W- H4 Q4 L( ?6 E
197.                 /*\*/ * html .imgtitlelist li { height: 1%; } /**/ .imgtitlelist>li { overflow: hidden; }
     
198.                         .imgtitlelist li h4 { margin: 0.3em 0; font-size: 1em; }
     4 \- o3 p& P! O
199.                         .imgtitlelist li img { float: left; margin-left: -85px; width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     * s/ g2 F" r4 Q
200.                         .imgtitlelist li p { margin: 0; line-height: 1.5em; }
     * a7 c8 s) A$ f2 n
201.         .sideblock .imgtitlelist li { padding-left: 65px; }
     
202.                 .sideblock .imgtitlelist li img { width: 48px; height: 48px; margin-left: -60px; }
     
203.        
     
204. 
     , a. \7 }0 T7 v5 O+ d
205. /*栏目区块列表*/
     
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; }
     : j. r/ u7 Y: k7 q$ ?- \
208.                 .category h3 strong { background: #E9ECEF; float: left; padding: 0 8px; }
     + a& ^) c! K) |  ^% d9 S$ ?9 r
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; }
     
211.                 .category li { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     
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; }
     
214. 
     
215. 
     ' Z8 j" U7 C$ `
216. /*-----------------------------------------------------------------------------------首页各版块*/
     
217. 
     
218. /*#commendimage { height: 155px; }
     ( e4 C0 y5 A1 D- a: h% u5 Y
219. #topicnews { height: 217px; }
     
220. #newgoods, #commendgoods { height: 200px; }
     ) Y0 M: l% P" N( r0 M$ G( S2 S
221. #hotcommentfile, #hotfile, #newlink, #hotlink { height: 220px; }*/
     5 Z: W7 W8 x9 _/ c" P+ n  f/ B2 \
222. 
     
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; }
     & m% l3 M0 V' n: T2 {; T0 y: T0 N' s  _
230.        
     9 L5 i0 [. a# R! p
231.         .articlelist ul { margin: 0; padding: 0; background: #FFF; padding-left: 5px; list-style: none; }
     ' x# @' Q/ I# G9 h9 j
232.                 .articlelist li { position: relative; padding-left: 60px; margin-top: 1em; }
       N9 X7 {/ x. i, a, Z5 M6 o$ h
233.         .articlelist h4 { margin: 0; background: #F0F9FF; font-size: 1.2em; padding: 0.2em 0.5em; cursor: pointer; }
     
234.                 .articlelist h4 em { font-style: normal; font-weight: normal; font-size: 0.8em; color: #B353B3; margin-left: 0.3em; }
       k( e  `: V4 Z4 l. q) I
235.                 .articlelist h4 a { color: #000099; }
     - y; e" z/ N: R' ]' j" J
236.                 .articlelist li img { position: absolute; left: 0!important; left: -67px; top: 0; border: 3px solid #9FC8DF; width: 48px; height: 48px; }
     , @* e9 M3 V% a
237.                
     5 q0 l9 |% T& Z  h( ?) _1 D
238.                 .articlelist li strong { font-weight: normal; color: #999; line-height: 2em; padding-left: 0.5em; }
     + J( n- j+ u9 r
239.                         .articlelist li strong a { color: #999; }
     
240.                 .articlelist li p { margin: 0.3em 0; line-height: 1.6em; }
     " B+ {  p/ ?7 K  \3 C. v
241.                         .articlelist li p a.more { float: none !important; }*/
     
242. 
     , j. O$ ~* V) ?. @# Q
243. 
     5 f2 L  g' T% Q! U7 O9 R" z% Y2 t
244. .catepic { text-align: center; }
     7 z+ Y! R3 @6 a7 ~
245.         .catepic img { margin-top: 10px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED;
     & r0 g2 o. |2 }: ^
246.                 max-width: 150px; max-height: 150px; width: expression(this.width > 150 ? 150: true); height: expression(this.height > 150 ? 150: true); }
     * q' `7 E/ }$ h& x9 W8 M9 J: w
247.         .catepic p { text-align: left; margin: 0.5em; }
     9 N$ x% w8 [1 v" H% z2 H9 V" Z( ~+ h
248. 
     
249. /*专题列表*/
     
250. #subjectlist { border-color: #86B9D6; padding: 2px; }
     
251.         #subjectlist h3 { border: none; background: #9FC8DF; }
     6 ^/ a8 A" }; I5 _8 R2 T) p) V* P2 J
252.         #subjectlist li { border-bottom: 1px solid #E2F0F9; text-align: center; padding: 3px; }
     
253.                 #subjectlist p { margin: 0; line-height: 1.2em; }
     3 `" {- `6 r# w( |3 f
254. 
     7 j7 \3 D, }' A" v# j: [1 |
255. 
     
256.         #xspace-rates { height: 2em; }
     2 K+ e: y. ]  H% K
257.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     
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; }
     ' ?' r# D( R) J
259.                         #xspace-rates a:hover { border-color: #CCC; }
     # P2 l/ U! L" K4 G* _: H5 \" ]
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; }
     
261. 
     ' k% S. t& P( M. I1 s( Y
262. 
     
263. #panel { width: 600px; overflow: hidden; margin: 1em auto; }
     
264. 
     2 ]7 F# O# Y/ y& q
265. 
     : g% ]4 E, `: _/ r' P. I0 s
266. /*Pages*/
     
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; }
     
270.                 .pages a { text-decoration: none; }
     
271.                 .pages .currentpage { background: #F0F9FF; border-color: #86B9D6; font-weight: bold; }*/
     1 H' a+ d: [" V: g- t/ \* w7 J
272. 
     2 \7 C' D4 A4 X. X6 C
273. /* 分页 */
     
274. .xspace-page { margin: 2px 2px 2px auto; }
     
275.         table.xspace-page a { display: block; background: #E2F0F9; padding: 0.3em 0.5em; text-decoration: none; }
     / Y) R; D! R2 K/ Z
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; }
     ! W! G; I* N2 c: L2 [" b7 e
278.         table.xspace-page td.xspace-totlerecord, .xspace-page td.xspace-totlepages { background: #E2F0F9; padding: 0.3em 0.5em; }
     5 k' G5 I+ x5 K" d1 v, q
279. 
     / s8 g6 l, B+ @& Y1 `
280. .smalltxt { font-size: 12px; color: #999; font-weight: normal; }
     
281.         .smalltxt a, .smalltxt a:visited { color: #999 !important; }
     
282. 
     : R  e# v$ m. E( W' W
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; }
     
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; }
     
288.        
     2 A' }- }2 f8 J/ w% f
289. .imglogolist { margin: 0; padding: 0; list-style: none; text-align: center; }
     # g3 a* W' u, x
290.        
     2 k; @! i8 K; P$ ]2 p4 T
291. #articledetail { border: 1px solid #86B9D6; text-align: center; }
     6 a' F; R) H: G' s. `* q# l" B
292. .articletitle { font-size: 1.6em; margin: 1em 0 0.5em; }
     
293. .articleinfo { border-bottom: 1px solid #9FC8DF; margin: 0;}
     ; o4 b, a8 ?; o# ~5 a
294. .articlectrl { margin: 0.5em 0 1.5em; }
     
295. 
     1 W8 V' I# V7 R8 x
296.         #articlebody { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; font-size: 1.2em; }
     8 n6 n% ]! Q- J
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; }
     9 h- A1 F5 s( B! H- k
300.        
     ! `: o0 h8 e' ~2 F/ ]6 w
301.         #articlebody .addoninfo { border: 1px solid #EEE; }
     ! o  D! U5 k0 V8 t+ }
302.                 #articlebody .addoninfo h5 { font-size: 1em; margin: 0; line-height: 2em !important; border-bottom: 1px solid #EEE; padding-left: 1em; }
     3 Z4 T+ @, R; n6 ^- w* B5 ?4 P
303.                 #articlebody .addoninfo ul { margin: 0.5em 0 0.5em 2em; padding: 0; }
     
304.                         #articlebody .addoninfo li { line-height: 1.6em !important; }
     ( u* i: K) \+ I3 |- z: [
305.        
     : c& A/ `5 n& g- U
306.         #articlebody img { width: expression(this.width > 500 ? 500: true); max-width: 500px;  }
     " o8 h9 w7 h7 T" C
307.        
     
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; }
     3 ^. u, I( c8 ]& l. ~
311.                                 #commentlist img { max-width: 500px; width: expression(this.width > 500 ? 500: true); }
     
312.                         #commentlist .messagelist li div { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; }
     % t" m* s' N( D8 r9 D+ l
313.                                 #commentlist .messagelist li div * { line-height: normal; }
     
314.                                         #commentlist .messagelist li div  p, #commentlist .messagelist li div  div { line-height: 1.8em !important; margin: 10px 0; }
     0 J! P( r5 m! H1 z
315.                                                 #commentlist .messagelist li div  p *, #commentlist .messagelist li div  div * { line-height: normal !important; }
     
316. 
     . a5 m/ T$ F: I& z/ H5 R1 A
317. /*发表评论*/
     
318. #comment { margin-top: 4px; }
     
319.         #comment h3 { margin: 0 5px; font-size: 1em; line-height: 2em; }
     
320.         #comment form { background: #FFF; margin: 0; padding: 5px; }
     
321.         #comment p { margin: 0.3em 0; }
     
322.         .seccodeline * { vertical-align: middle; }
     # c2 [2 b5 V# R) j* u/ T
323.         #xspace-rates { height: 2em; }
     0 B0 X& i' o( `! E4 [
324.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     
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; }
     , F( d+ r. D# S6 k, a5 w7 j5 h
326.                         #xspace-rates a:hover { border-color: #CCC; }
     ( ^! |1 w0 y+ y
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; }
     6 s" N) C  @# o! H% y0 S
328. 
     & E# ^* f' a9 l2 D  n7 j
329. /*AJAX div*/
     / R$ h( S8 X4 _/ t3 o' m( p
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; }
     5 }1 {) Z8 z: C- U& ?  t) M
332.                 .xspace-ajaxdiv h5 a { float: right; font-weight: normal; }
     4 F5 H) [; \& m5 r$ z
333.         .xspace-ajaxcontent { background: #FFF; border: 1px solid #EEE; }
     9 V" _) R, B2 y& k4 v
334.                 .xspace-ajaxcontent form { margin: 0; }

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------综合设置*/
   
2. 
   # d6 b3 a& N: [8 L* w5 h6 E
3. body { margin: 0; background: #FFF; color: #333; text-align: center; font: 12px Arial, Helvetica, sans-serif; }
   
4. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   2 g7 `! Y+ u( K0 \* C
5. 
   7 E6 i- x. ~# g6 c$ c

复制代码

# M" s# ^, n& o! k4 x7 a1 P5 K8 j
分析
) y; J/ J1 o8 Q; s( Q5 z& z

1. margin属性说明：
   
2. 
   9 x" {/ I" q7 u% {+ u/ S& R
3. 检索或设置对象四边的外延边距。
   
4. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
   8 K4 o6 D5 t5 ?, h. `4 k- N2 U
5. 如果只提供一个，将用于全部的四边。
   " z9 _" G; @1 i" Z8 X5 r" ^/ ~( x
6. 如果提供两个，第一个用于上－下，第二个用于左－右。
   
7. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
   
8. 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
   
9. 在IE4+，margin属性不可用于td和tr对象。
   
10. 外延边距始终透明。
    % H* I5 J. T) I
11. 
    ! s" D  C( v# s: U! f) R
12. color : 　指定颜色
    
13. text-align:文本的对齐方式。(left : 　左对齐,right : 　右对齐,center : 　居中,justify : 　两端对齐)
    0 T2 N( \) U( g8 n
14. font: 12px Arial, Helvetica, sans-serif;  :这段是字体相关的
    
15. 
    
16. 
    

复制代码

傲天♂浪子追风

1. /*链接样式*/
   
2. a { color: #000; text-decoration: none; }
   
3.         a:hover { text-decoration: underline; color: #000098; }
   3 C. k, y: V! _" c, m  y
4.                 a:visited { color: #666;}
   
5.         #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
   
6.                 #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }
   - A6 O) w! P- @
7.         a img { border: none; }
   , q8 C* \3 R. S, X; i! i  Q
8. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
     T5 A- ]( e, E2 }# Q1 U8 J
9.         li cite a { color: #999; }
   ' K0 O6 e7 _! D
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; }
    , p1 {: @( O$ V' \# t6 Z) q. v3 h
12. 
    

复制代码

2 a6 f: K- U) t/ ^& n+ T分析
# T) U+ `. n* L7 C1 _; j

1. 
   0 O4 l+ |3 {) l; k$ k( \# n
2. text-decoration:文本连接的属性,一般有以下几种参数:
     C6 D5 i/ q* Q, ^
3. none : 　无装饰
   
4. blink : 　闪烁
   . J: O+ `. L! J  c
5. underline : 　下划线
   ) W: T) K# f& \- L6 B- V6 O
6. line-through : 　贯穿线
   / d$ n9 B1 Z/ Z3 o! R" l. |
7. overline : 　上划线
   
8. 
   
9. 
   - T7 G6 Z" z/ ]- x7 A4 T' L
10. hover:设置对象在其鼠标悬停时的样式表属性。
    
11. 
    
12. visited:对象在其链接地址已被访问过时的样式表属性。
    # K# w$ Y0 b) G/ t% ?% V% G# w
13. 
    $ _0 d0 Y5 R! Y- k3 |( j" a; M
14. #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    ' y' z' B- J9 W8 W4 \% S
15. #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }:
    ' q/ h0 n. }! L( W
16. 上面这两行是与鼠标相关
    
17. 
    
18. a img { border: none; }图片连接相关
    # Q! Q4 _2 r, D0 b
19. 
    
20. 
    
21. cite:这个一般是引用标签的时候用的,不知道用来这里做什么
    * C0 b* v& G- E) [2 i
22. 
      Z2 A% ~$ {: B8 k; X5 H/ t
23. 
    1 p% I* B$ F& `, Q$ a0 F+ _* r3 w
24. font-style:字体式样,一般常用参数有:
    
25. normal : 正常的字体
    
26. italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
    : |: T9 U2 A, ?6 D
27. oblique : 倾斜的字体
    & \& o5 h& G2 M: B. {% Z% f
28. 
    
29. 
    
30. float: right 该属性的值指出了对象是否浮动及如何浮动。常用参数如下:
    
31. none : 　对象不浮动
    
32. left : 　对象浮在左边
    
33. right : 　对象浮在右边
    
34. 
    
35. 
    " s5 e8 J; a; C* U8 w
36. important:样式表条目,提升指定样式规则的应用优先权。
    " o. S- R: \4 w$ N, u
37. 
    2 ^% W9 c& `  R
38. 
    
39. background: transparent 这个的意思就是背景透明...
    
40. 
    
41. 
    
42. 
    
43. font-weight: normal :文本字体的粗细,常用参数如下:
    9 n4 Q& t* ~; f( B( p
44. normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
      S- w2 _( a) G7 R, A
45. bold : 粗体。相当于number为700。也相当于b对象的作用
    
46. bolder : IE5+　特粗体
    3 v8 h7 p) V. ?- m. _
47. lighter : IE5+　细体
    3 w/ ^4 g5 C+ R# F9 j- G
48. number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    
49. 
    
50. cursor: pointer:这个是鼠标放在对象中的状态,简单点来可以这样说,也就是鼠标放在连接上的时候显示的鼠标形状,一般有以下N种参数,这个真的是TMD的多啊
    
51. 语法：(每一竖隔开为一个状态)
    * e# N! _3 u! M- s1 ?
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)
    
53. 
    
54. 
    9 [! x0 w$ u2 r: b& X: l  C
55. 
    1 u# N" @9 X' g$ h
56. 
    $ ?. J, K6 E9 H& `. m
57. 
    
58. 
    # H: M6 h  y3 f7 y' M& }
59. 
    

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------表单通用样式*/
   
2. 
   
3. form { margin: 0; }
   1 o% L& i7 k, r' [0 W' l
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;
   + B2 r7 P; J* F" ~3 o
6.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
   : q; k/ h5 E$ ]: o( j9 C! |/ {' s
7.         fieldset { border: 0; padding: 0; }
   
8.                 legend { display: none; }
   
9.         label { cursor: pointer; margin-right: 0.5em; }
   

复制代码

bronwen

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

傲天♂浪子追风

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

傲天♂疯紫

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