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

傲天♂浪子追风

1. * { word-break: break-all; } /*在IE中实行强制换行*/
   ) v0 F6 \) k3 \- t
2. #newsblock { margin-top: 4px; }
   
3. /*-----------------------------------------------------------------------------------综合设置*/
   
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; }
   # p: `1 ~8 o1 `3 O; M. s
7. 
   2 k- }) P) n$ V  [  {+ l
8. /*链接样式*/
   7 i9 a' z( f5 [. R2 i6 {3 L
9. a { color: #000; text-decoration: none; }
   
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; }
    
16.         li cite a { color: #999; }
    $ I3 Z" O2 z9 z1 @+ w
17.                 li cite a:visited { color: #999; }
    / {. J" b5 I; x: i- T$ h
18. .more { float: right !important; color: #000098 !important; background: transparent !important; font-size: 12px !important; font-weight: normal !important; cursor: pointer; }
    
19. 
    
20. /*-----------------------------------------------------------------------------------表单通用样式*/
    ; h2 E4 Q) R* E: j8 U
21. 
    6 o+ a* R+ j3 A6 r8 j4 A5 H/ w  _
22. form { margin: 0; }
    
23.         input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
    + Q( c" P) R, I- V: G
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; }
    3 R. g, W& i  R2 {; K! Z  D
26.         fieldset { border: 0; padding: 0; }
    . I. h( N: k$ |4 l1 n2 o
27.                 legend { display: none; }
    
28.         label { cursor: pointer; margin-right: 0.5em; }
    
29. 
    3 i( s% |# `/ N; s( j0 P1 [$ x
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; }
    + ]( l* r0 W6 S$ e1 I
35.                         #topmenu a { color: #154BA0; }
    
36. 
    ( e( o$ v9 _; P% m4 W
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; }
    / ]) U; |. V0 D- h6 L# L
39.         .banner468 { float: right; }
    
40. 
    6 F* h2 ~% R; M+ Z# M4 W1 r% P
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; }
    1 K9 i" x% G- C* K# I2 U
44.                 #menu li { float: left; margin: 0 2px; width: 6em; overflow: hidden; white-space: nowrap; }
    . B' P9 i$ ^4 q9 V1 a/ ?1 C# j
45.         /*首页导航*/
    
46.         #menu dl { margin: 0 1.5em; padding: 0; height: 25px; overflow: hidden; }
    
47.                 #menu dt { float: left; width: 4em; white-space: nowrap; }
    7 N: s# W. O1 z* G* t" N' d9 W% H
48.                         #menu dt a { color: #000098 !important; }
    
49.                 #menu dd { float: left; width: 6em; margin: 0 2px; overflow: hidden; white-space: nowrap; }
    
50. 
    
51. /*您的位置导航*/
    2 Y# G# n3 `/ Y2 V) _% \
52. #navigation { padding: 1.2em 0; }
    
53.         #navigation p { margin: 0;}
    & O  f7 p6 G' [& r  g/ N8 R
54.                 #navigation p a, #navigation p strong { margin: 0 0.5em; }
    + K4 E; E& r/ f8 c+ A: j
55.         #searchform { float: right; }
    
56.                 #searchform * { vertical-align: top; }
    * ]" ^- Z& m( w4 y2 `7 n
57.                 #searchform button { margin-left: 0.5em; }
    0 F! C4 ~0 @! b- O  _$ _- g
58. 
    
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; }
    / k9 e+ L+ {8 s# D, _
61.                 .simplepage h2 { margin: 0; font-size: 1.2em; padding-left: 0.5em; }
    ' w7 l: ?9 s: z' O& p) e8 Z
62. 
      a& V6 @  Q! b, p/ h0 i1 [
63. /*-----------------------------------------------------------------------------------布局*/
    
64. 
    # ?: D- B, g+ {) S7 e* A7 ~
65. .content { /*三列布局*/
      @# O4 {% I2 g6 {! A% k
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; }
    ; e5 @3 n' J9 I
71. .contentR { /*两列布局，侧边在右侧*/
    & }9 M( |; G+ \! J
72.         width: 910px; background: #FFF url(../images/new/bg.gif) repeat-y 580px 0; }
      W0 ~6 `' X; x$ u  ?+ |* J
73.         /*\*/ * html .contentR { height: 1%; } /**/ *>.contentR { overflow: hidden; }
    
74. /*侧边样式*/
    
75. .sideL { width: 296px; float: left; overflow: hidden; }
    
76. .sideR { width: 202px; float: right; overflow: hidden; }
    8 z0 q" H& V5 h9 }
77. /*中间部分样式*/
    9 A6 {' ?# v5 X" N5 j8 U
78. .mainarea { margin: 0 4px; width: 382px; float: left; }
    # w* S+ u) t6 [
79.         .contentL .mainarea { margin: 0 0 0 4px; width: 556px; }
    
80.         .contentR .mainarea { margin: 0 4px 0 0; width: 576px; }
    1 G. \* s9 l, i0 t
81. 
    
82. /*-----------------------------------------------------------------------------------版块样式*/
    * `9 Y' D4 P' `* j+ r
83. 
    . @+ E* f* \5 `
84. /*版块标题*/
    
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; }
    ) G! }9 R0 J$ \% i8 }' w& L
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; }
    
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; }
    9 _5 _- b7 A3 T# B) L; R3 u9 W4 a
97.         .boldblock { padding: 1px; background: #9FC8DF; } /*突出版块*/
    
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 t' L( X+ ]* V! V
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; }
     
103. 
     
104.         /*侧边多行列表*/
     
105.         .sideblock dl { margin: 0; padding: 5px; background: #FFF; line-height: 1.8em; }
     
106.                 /*\*/ * html .sideblock dl { position: relative; } /**/
     
107.                 .sideblock dt { padding-left: 0.8em; background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; }
     4 R8 U8 O( g8 x/ E
108.                 .sideblock dd { color: #999; margin-left: 0.8em; }
     ) X0 K4 W5 g- q: M
109.                         .sideblock dd a { color: #999; }
     + g0 V& F0 s5 j! G/ R8 }" F
110. 
     
111. /*单行信息列表*/
     % ^! D5 O7 d; q
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; }
     ; R+ ]& J1 [4 Q; C
115.         .sideblock .msgtitlelist { background: #FFF; }
     2 p8 [$ w4 E$ m
116. 
     
117. /*多行信息列表*/
     
118. .messagelist { margin: 5px 0; padding: 0; list-style: none; line-height: 1.6em; }
     1 v2 F5 ^4 C% n( }
119.         .messagelist li { margin: 5px 0 10px 0;}
     1 U8 u. U5 p& y2 V0 p7 ?/ [
120.                 .messagelist li h4 { margin: 5px 0; font-size: 1em; line-height: 2em; background: #F0F9FF; }
     9 z! y$ w# @; [- m( K
121.                         .messagelist li h4 a { color: #009; font-size: 1.2em; }
     ( p; o9 T* a. n" i" E% r* Q
122.                                 .messagelist li h4 a:visited { font-weight: normal; }
     
123.                 .messagelist li p { margin: 0; }
     
124. 
     
125.         .messagelist dl { margin: 0; padding: 0; line-height: 1.6em; }
       b  u, [. Y9 z
126.                 .messagelist dt { background: url(../images/new/list_icon.gif) no-repeat 0.3em 0.7em; padding-left: 0.8em; }
     8 @6 Z, u. Q* O) J
127.                 .messagelist dd { font-size: 12px; margin: 0; padding-left: 1em; color: #999; }
     : g% K& V! h, T; H" _0 B  K$ e: ~
128.                         .messagelist dd a { color: #999; }
       T" c7 ]- G2 Q( n5 H
129. 
     
130. /*热门话题*/
     
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; }
     
134.                 #hottag a { margin-right: 0.2em; white-space: nowrap; }
     ) d) O0 n& Q' u# f. ]; r
135.                         #hottag a em { color: #999; font-style: normal; }
     ) N% e0 g0 e( m9 Z. D
136. 
     : }! Z" y* `* P' ^
137. /*用户面板*/
     
138. #userpanel { height: 8.8em; overflow: hidden; }
     
139.         #userpanel form { margin: 5px auto !important; margin: 0 auto; width: 150px; }
     
140.                 #userpanel input { width: 90px; }
     2 M/ U1 M1 A# O: F. f) m
141.                 #userpanel p { margin: 0.5em 0; }
     
142.                 #dologin { float: right; }
     ( ]9 ^: i# f9 Y
143.                 #userpanel form a { line-height: 2em; color: #B353B3; border-right: 1px solid #86B9D6; padding-right: 5px; }
     
144.         /*登录后*/
     
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; }
     9 i* q8 J( C" |0 w, e6 W0 E/ B2 k
147. 
     
148. /*空间之星*/
     
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; }
     8 @5 G: ~5 X' n  O
151.         #spacestar img { width: 48px; height: 48px; margin-top: 3px; }
     
152.         #spacestar p { margin: -4px 0 !important; margin: 0 0; line-height: 20px; height: 20px; }
     
153. 
     $ s: v8 e& \4 i3 d9 g- Y
154. /*同城空间*/
     * y6 J/ H0 y* O" m
155. #cityspace { background: #F0F9FF; }
     
156. #cityspace form { width: 10.5em; margin: 0 auto; padding: 5px 0; }
     $ U( m" \* T4 z1 S; v9 Q& U: b
157.         #cityspace select { margin: 2px 0; }
     " S% z* ?$ A2 G: `* F- K
158.         #cityspace button { float: right; margin-top: 4px; width: 3.5em; height: 3.5em; }
     1 j6 y. ~3 {! J% @5 z
159.         #blogblock #cityspace { margin: 0 0 4px 0; }
     # V' Q9 H/ p8 p- I  z, u1 I6 r, X
160. 
     
161. /*空间排行*/
     ) v: _' l  j6 h- e- p7 G8 Y
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; }
     # b, b2 Z1 l3 c) i: K  D, e) ]
164.         #hotspace em { float: right; font-style: normal; font-size: 9px; color: #999; width: 40px; }
     8 m4 l) G6 _  t+ }( u$ k9 a
165. 
     
166. /*热门文章 */
     
167. #hotarticle { border: 1px solid #86B9D6; background: #E2F0F9; padding: 3px; position: relative; }
     % E( ^+ m. p( g9 f: g6 ~
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; }
     - {9 E) C& G6 X' ]2 m  P7 m
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; }
     ( _" i9 B3 y. `7 c7 z# f. F  P
172.         #hotarticle ul { background: #FFF; margin: 0; padding: 0.5em; list-style: none; line-height: 1.7em; height: 16.5em; overflow: hidden; }
     ! D1 I- N& S* Q* e( p
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; }
     0 n) k. E8 {5 F( F2 `# t  F# e
174. 
     
175. /*图片列表*/
     
176. .imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
     
177.         /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
     2 o7 d7 N) O& l
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; }
     2 d, D* G" l9 n4 X
179.                         .imgthumblist li.list1line { height: 123px; height: 115px; }
     
180.                         .imgthumblist li.list2line { height: 143px; height: 135px; }
     7 P( y+ ^5 k0 D/ J# W
181.                         .contentL .imgthumblist li { margin: 0 1px 3px; }
     8 y: i% K. L7 r, `! W* k. {
182.                         .imgthumblist img { width: 100px; height: 100px; }
     : ?/ s* a% _) k
183.                         .imgthumblist p { margin: 0; text-align: center; line-height: 1.3em; }
     ' X& Z6 k+ F/ r. R1 f0 E( y( f4 z
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; }
     
187. 
     1 ?! F/ B; r3 I9 r$ W, Y% n
188. /*商品*/
     
189. /*\*/ * html .goodsthumblist { height: 1%; } /**/ *>.goodsthumblist { overflow: hidden; }
     
190.         .goodsthumblist { margin: 0; padding: 3px 0; list-style: none; }
     
191.                 .goodsthumblist li { float: left; width: 90px; height: 100px; text-align: center; }
     % {# i4 t% h4 O7 S. m
192.                         .goodsthumblist li img { width: 70px; height: 70px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED; }
     $ j- L9 \+ X1 n2 N- R
193.                         .goodsthumblist li p { margin: -3px 0 0 !important; margin: 0; height: 1.5em; line-height 1.5em; overflow: hidden; }
     
194. 
     
195. .imgtitlelist { margin: 10px 0; padding: 0; list-style: none; }
     - q$ [- n+ ^+ \5 x9 p) C
196.                 .imgtitlelist li { padding-left: 85px; padding-bottom: 5px; margin: 5px 0; border-bottom: 1px solid #E2F0F9; }
     . D  I  ~3 i# @/ x2 d7 z
197.                 /*\*/ * html .imgtitlelist li { height: 1%; } /**/ .imgtitlelist>li { overflow: hidden; }
     4 J1 Q* p4 T2 M7 r
198.                         .imgtitlelist li h4 { margin: 0.3em 0; font-size: 1em; }
     
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; }
     5 ]6 |# Q5 m2 l0 q. t& C# B
201.         .sideblock .imgtitlelist li { padding-left: 65px; }
     0 G6 u3 f/ V0 \# g8 w3 j. m* n3 q
202.                 .sideblock .imgtitlelist li img { width: 48px; height: 48px; margin-left: -60px; }
     & n  Z: X, F; Q$ }; @) \7 D6 P
203.        
     * V0 O$ A6 s: i
204. 
     . @+ P$ T% c3 m* P  Q' H' z
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; }
     
208.                 .category h3 strong { background: #E9ECEF; float: left; padding: 0 8px; }
     . I" ~% U7 b* v' b- {* v% B
209.                         .category h3 strong a { color: #333; text-decoration: none; }
     2 b) v5 W3 V; V6 T+ D
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; }*/
     ; x4 V) K/ Y8 t% n
213.                 .catecommend a { color: #000099; white-space: nowrap; margin-right: 0.5em; }
     % n3 L. U1 w4 w" N" g8 }( Y
214. 
     - C1 c0 b' P$ i/ [! S1 S4 B
215. 
     
216. /*-----------------------------------------------------------------------------------首页各版块*/
     
217. 
     ' Z, H! s7 U) `; E& a
218. /*#commendimage { height: 155px; }
     5 l# o6 k  O# q* Q
219. #topicnews { height: 217px; }
     % `& [  V2 w& S0 P: X3 ]
220. #newgoods, #commendgoods { height: 200px; }
     + P% f! V/ |$ T6 u. `
221. #hotcommentfile, #hotfile, #newlink, #hotlink { height: 220px; }*/
     
222. 
     ' X+ a& G2 ^8 P  }8 B8 u
223. 
     
224. 
     
225. 
     2 W. m9 D9 u7 t# i! b6 T2 _  Z4 ~
226. /*信息列表*/
     
227. .articlelist li { padding-left: 60px; }
     & l/ H8 i* |) c/ R
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; }
     % o. ^# j6 Y; Z5 H1 k
230.        
     
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; }
     
233.         .articlelist h4 { margin: 0; background: #F0F9FF; font-size: 1.2em; padding: 0.2em 0.5em; cursor: pointer; }
     9 P# H* g/ D: U$ V
234.                 .articlelist h4 em { font-style: normal; font-weight: normal; font-size: 0.8em; color: #B353B3; margin-left: 0.3em; }
     $ _* k! |" @& O4 m8 a( G; _
235.                 .articlelist h4 a { color: #000099; }
     $ b$ M) ?: \0 R  D. T, V' K+ l
236.                 .articlelist li img { position: absolute; left: 0!important; left: -67px; top: 0; border: 3px solid #9FC8DF; width: 48px; height: 48px; }
     
237.                
     
238.                 .articlelist li strong { font-weight: normal; color: #999; line-height: 2em; padding-left: 0.5em; }
     
239.                         .articlelist li strong a { color: #999; }
     6 ?+ @/ W3 g. _
240.                 .articlelist li p { margin: 0.3em 0; line-height: 1.6em; }
     
241.                         .articlelist li p a.more { float: none !important; }*/
       a& P# y$ c: m% \
242. 
     # t% S4 R3 p3 c/ e. g4 @7 V
243. 
     . ^# d% H. I5 D& X
244. .catepic { text-align: center; }
     4 }% C! x2 O( F* C9 e  _# S+ {
245.         .catepic img { margin-top: 10px; padding: 3px; background: #F0F9FF; border: 1px solid #B9D0ED;
     ' A# T5 o4 E- X- X! D0 F
246.                 max-width: 150px; max-height: 150px; width: expression(this.width > 150 ? 150: true); height: expression(this.height > 150 ? 150: true); }
     
247.         .catepic p { text-align: left; margin: 0.5em; }
     ! U- ~: I3 ]5 M4 c
248. 
     
249. /*专题列表*/
     - N7 w4 m& V& j$ D+ F0 a8 p
250. #subjectlist { border-color: #86B9D6; padding: 2px; }
     6 j$ P- a. Q/ O& |
251.         #subjectlist h3 { border: none; background: #9FC8DF; }
     ! `/ I  g& W, `8 c% _' v
252.         #subjectlist li { border-bottom: 1px solid #E2F0F9; text-align: center; padding: 3px; }
     2 s- f' m/ a# U7 ?  A+ [
253.                 #subjectlist p { margin: 0; line-height: 1.2em; }
     
254. 
     ; l. {, F' K, `" Z
255. 
     ) l+ ]7 q) P3 ]- P: p: R0 l  a' l
256.         #xspace-rates { height: 2em; }
     
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; }
     ) M* s- c  _' K( c( _; S* x
259.                         #xspace-rates a:hover { border-color: #CCC; }
     3 ^5 q. T. D3 F" f' K3 v
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. 
     
262. 
     - S) |9 \# v# p, I
263. #panel { width: 600px; overflow: hidden; margin: 1em auto; }
     
264. 
     ) P+ z0 i2 l7 x' x/ t( p
265. 
     
266. /*Pages*/
     * Q. ^* D8 ^1 P8 a
267. .pages { text-align: right; border-top: 1px solid #9FC8DF; }
     7 Q( B- X" n$ h7 m
268.         /*.pages table { margin: 3px 0 3px auto; text-align: center; }
     
269.                 .pages td { padding: 0 5px; border: 1px solid #B9D0ED; background: #FFF; }
     & u0 p% p6 O# W: O; f) s
270.                 .pages a { text-decoration: none; }
     7 p" x4 `" C- @& J2 Y" P
271.                 .pages .currentpage { background: #F0F9FF; border-color: #86B9D6; font-weight: bold; }*/
     
272. 
     9 y. O- I  [0 s  _4 y
273. /* 分页 */
     # p8 Z# A" v  W3 T" U: v7 F
274. .xspace-page { margin: 2px 2px 2px auto; }
     & p3 \& d" H! H
275.         table.xspace-page a { display: block; background: #E2F0F9; padding: 0.3em 0.5em; text-decoration: none; }
     ! v8 a" l% F$ M2 m2 F" K0 l# W$ k; ]
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; }
     
278.         table.xspace-page td.xspace-totlerecord, .xspace-page td.xspace-totlepages { background: #E2F0F9; padding: 0.3em 0.5em; }
     
279. 
     
280. .smalltxt { font-size: 12px; color: #999; font-weight: normal; }
     ) T$ J% W2 M+ S. Y- w9 X7 ~
281.         .smalltxt a, .smalltxt a:visited { color: #999 !important; }
     
282. 
     - b9 N6 b  [4 N  l  E
283. /*-----------------------------------------------------------------------------------页脚 Footer*/
     ; T2 H2 m- O/ c# i7 |
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; }
     4 L, A* A+ c9 w$ i# x; B; b
288.        
     
289. .imglogolist { margin: 0; padding: 0; list-style: none; text-align: center; }
     
290.        
     7 g( }$ x; O, f. W
291. #articledetail { border: 1px solid #86B9D6; text-align: center; }
     # @* S: Q6 }; W9 d! B0 [, \$ N6 k
292. .articletitle { font-size: 1.6em; margin: 1em 0 0.5em; }
     
293. .articleinfo { border-bottom: 1px solid #9FC8DF; margin: 0;}
     2 o% I, |6 i: m" J
294. .articlectrl { margin: 0.5em 0 1.5em; }
     
295. 
     ; a: R; ~) X3 H9 l
296.         #articlebody { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; font-size: 1.2em; }
     1 M, ~& a' L) [1 k. y: O$ j8 J% L
297.         #articlebody * { line-height: normal; }
     
298.                 #articlebody  p, #articlebody  div { line-height: 1.8em !important; margin: 10px 0; }
     - @3 v5 W& }0 z* o, J/ a" F
299.                         #articlebody  p *, #articlebody  div * { line-height: normal !important; }
     ) z- t3 A% b8 G$ i
300.        
     ' g- [5 P, J3 T0 s3 O; h$ N
301.         #articlebody .addoninfo { border: 1px solid #EEE; }
     5 y! `& y- _6 p9 s: B* }
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; }
     
304.                         #articlebody .addoninfo li { line-height: 1.6em !important; }
     
305.        
     
306.         #articlebody img { width: expression(this.width > 500 ? 500: true); max-width: 500px;  }
     + V3 `# ^: G, t0 h+ X3 K% T
307.        
     ' T% w, ?2 x* L! H. |9 c6 X! I7 |
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; }
     * T! `; B) o! p: O( u4 {% J- v4 S
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); }
     
312.                         #commentlist .messagelist li div { width: 98%; margin: 0 auto; overflow: hidden; text-align: left; overflow-y: hidden; line-height: 1.8em; }
     
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; }
     # c' d1 @4 m4 O' s+ R4 @
315.                                                 #commentlist .messagelist li div  p *, #commentlist .messagelist li div  div * { line-height: normal !important; }
     
316. 
     
317. /*发表评论*/
       \( I) W( h/ j- r/ d+ ?$ \& V1 j
318. #comment { margin-top: 4px; }
     ; N. T; C) x8 L5 R) x% L6 M
319.         #comment h3 { margin: 0 5px; font-size: 1em; line-height: 2em; }
     / K% Z, f- U8 F9 g$ k0 `) s
320.         #comment form { background: #FFF; margin: 0; padding: 5px; }
     
321.         #comment p { margin: 0.3em 0; }
     / b! T. K$ ^2 Z1 x5 S
322.         .seccodeline * { vertical-align: middle; }
     % s3 Y, \& X" g1 D; P% o4 d
323.         #xspace-rates { height: 2em; }
     
324.                 #xspace-rates label { float: left; line-height: 24px; margin-right: 5px; }
     9 S! j* y- j1 G
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; }
     ' E% K' B% v) Y9 ^7 {9 v, C
326.                         #xspace-rates a:hover { border-color: #CCC; }
     3 f& ?+ z5 D: t4 B8 Z5 k
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. 
     
329. /*AJAX div*/
     
330. .xspace-ajaxdiv { position:absolute; padding: 5px; border: 1px solid #BBB; background: #FCFFEF; text-align: left; }
     * j6 u# T% H* G+ x& Y( }. u
331.         .xspace-ajaxdiv h5 { line-height: 24px; font-size: 1em; margin: 0; }
     
332.                 .xspace-ajaxdiv h5 a { float: right; font-weight: normal; }
     % m+ {9 z- @  _( p! s' @  P0 C8 ~
333.         .xspace-ajaxcontent { background: #FFF; border: 1px solid #EEE; }
     : _, m( t% h% G6 }2 l: @( P& ]
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; }
   * d' [7 s# E0 ~# `: m0 u1 S. X
4. #wrap { background: #FFF; margin: 0 auto; text-align: left; width: 910px; padding: 0 4px; w\idth: 910px; }
   
5. 
   " L0 P& v6 [4 S" M, I; n

复制代码

4 T  Z- }$ r. A' \. _- l% m
分析
' T/ ^6 ?/ t1 U

1. margin属性说明：
   
2. 
   
3. 检索或设置对象四边的外延边距。
   
4. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
   3 p0 T" R( l1 c( e* M8 o/ d
5. 如果只提供一个，将用于全部的四边。
   
6. 如果提供两个，第一个用于上－下，第二个用于左－右。
   
7. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
   
8. 内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
   
9. 在IE4+，margin属性不可用于td和tr对象。
   - \5 E. _" M" f5 a: {% d
10. 外延边距始终透明。
    ) D2 J5 D. ~# P
11. 
    
12. color : 　指定颜色
    ; ?/ ~% `/ q, V
13. text-align:文本的对齐方式。(left : 　左对齐,right : 　右对齐,center : 　居中,justify : 　两端对齐)
    0 Z1 z! v* r. i5 A: N, q3 l: p
14. font: 12px Arial, Helvetica, sans-serif;  :这段是字体相关的
    
15. 
    0 U4 x" h  B3 O' b/ s
16. 
    

复制代码

傲天♂浪子追风

1. /*链接样式*/
   
2. a { color: #000; text-decoration: none; }
   % Q6 L! f4 @) J+ G
3.         a:hover { text-decoration: underline; color: #000098; }
   
4.                 a:visited { color: #666;}
   ! s* w, t2 F7 S
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; }
   
7.         a img { border: none; }
   
8. li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
   & L0 r* F, c/ ]1 y/ J/ R
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; }
    
12. 
    

复制代码

) j2 g- M9 W8 v  _5 n# G. ^
* q; W7 o5 P+ K分析

! v5 t5 D0 H, T( N' A# e0 V* F8 m

1. 
   2 m9 G5 j9 W" H; J' W3 P
2. text-decoration:文本连接的属性,一般有以下几种参数:
   , u) ^( m1 Y' Y' ?- N. z. x& K
3. none : 　无装饰
   
4. blink : 　闪烁
   
5. underline : 　下划线
   2 u# k' [& B" m. @/ }! q
6. line-through : 　贯穿线
   
7. overline : 　上划线
   
8. 
   
9. 
   % P3 W. e: Z" B( \( a* I
10. hover:设置对象在其鼠标悬停时的样式表属性。
    
11. 
    
12. visited:对象在其链接地址已被访问过时的样式表属性。
    
13. 
    
14. #topmenu a, #menu a, .imglist a, #hotspace li a { text-decoration: none; }
    
15. #topmenu a:hover, #menu a:hover, .imglist a:hover, #hotspace li a:hover { text-decoration: underline; }:
    
16. 上面这两行是与鼠标相关
      c1 X9 M4 @9 j
17. 
    
18. a img { border: none; }图片连接相关
    
19. 
    
20. 
    7 A* g' s/ ~0 ^! S- @6 v; S; D
21. cite:这个一般是引用标签的时候用的,不知道用来这里做什么
    
22. 
    
23. 
    
24. font-style:字体式样,一般常用参数有:
    3 E+ A0 l# o2 K
25. normal : 正常的字体
    
26. italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
    
27. oblique : 倾斜的字体
    4 H9 t( A; i- T5 u7 r
28. 
    
29. 
    
30. float: right 该属性的值指出了对象是否浮动及如何浮动。常用参数如下:
    
31. none : 　对象不浮动
    
32. left : 　对象浮在左边
    
33. right : 　对象浮在右边
    % b) T3 I7 x2 C9 b) z+ f$ y* p
34. 
    
35. 
    ' D9 x+ w% }% D
36. important:样式表条目,提升指定样式规则的应用优先权。
    
37. 
    + u5 O/ r( a- M: \# |0 t
38. 
    
39. background: transparent 这个的意思就是背景透明...
    3 u, G8 @7 }1 X# |. i
40. 
    # m) L( I* S, Y* v% u- x
41. 
    / q4 a7 D3 u( z3 o' t6 z" i
42. 
    
43. font-weight: normal :文本字体的粗细,常用参数如下:
    8 p+ B7 ?+ S/ ?, Q$ j7 O# e
44. normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
    " n: ?9 W: @* k3 M
45. bold : 粗体。相当于number为700。也相当于b对象的作用
    + F( y( Q- z& C$ S" Q4 t0 M3 w
46. bolder : IE5+　特粗体
    ' s% N7 H* W3 ?, C, P
47. lighter : IE5+　细体
    + A1 L6 u* a; O2 u5 X
48. number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    * J7 G4 M, @6 C$ \! r8 X/ J
49. 
    2 S1 O! o+ Y7 [+ h/ l! ?8 p; l
50. cursor: pointer:这个是鼠标放在对象中的状态,简单点来可以这样说,也就是鼠标放在连接上的时候显示的鼠标形状,一般有以下N种参数,这个真的是TMD的多啊
    2 K/ }; T) h% }* W2 s7 |# h
51. 语法：(每一竖隔开为一个状态)
    
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. 
    0 Z2 u- Z# b! ]8 B4 Y+ \' p
54. 
    
55. 
    
56. 
    
57. 
    
58. 
    8 y( r* |- L5 q6 z" b
59. 
    

复制代码

傲天♂浪子追风

1. /*-----------------------------------------------------------------------------------表单通用样式*/
   . I# Q3 P2 W- f5 o# h  D
2. 
   ' P7 u$ s" ?$ X0 b& w
3. form { margin: 0; }
   
4.         input, textarea, button, select { font: 1em Arial, Helvetica, sans-serif; }
   * M$ W: E' r( D* F* A
5.         button { height: 1.8em; padding: 0 0.3em; background: #9FC8DF; cursor: pointer; border: 1px solid;
   
6.                 border-top-color: #C9E3F0; border-right-color: #2A8ABA; border-bottom-color: #2A8ABA; border-left-color: #C9E3F0; }
   
7.         fieldset { border: 0; padding: 0; }
   
8.                 legend { display: none; }
   - t6 `" k: x7 i( \4 Z' f, ^
9.         label { cursor: pointer; margin-right: 0.5em; }
   

复制代码

bronwen

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

傲天♂浪子追风

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

傲天♂疯紫

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