【学村CSS】教你如何美化自己的空间。

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
8 `7 [8 f0 ?& j9 t$ Q* y
                          
9 Q& j* h2 J+ e8 F                         你将看到一个空白地方，现在我们就将编程写到里面：
" {) ?! K# o0 H9 v3 o
                          
& P7 j; v- z9 F5 a/ s# X9 Q                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
8 ?. a$ k( Y3 O$ E                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
& x0 [6 [  q( Z6 U5 J! @7 Q' W, n                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。
, E" \& x" p. F0 R$ ?

                        
. E* C: u. l4 z! C                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
% ]/ e; F- I/ P3 h8 h$ e: m( L' O8 D                         color：是颜色。你可以自己去搜css颜色代码。
                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
( X8 y9 w+ f9 o% Z# a                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
( X9 \! L! v2 t. H1 z9 S                         放在font-size：的下面。跟上面的对齐。


9 [- U3 F2 U* H2 n# _6 P1 {
) e9 {5 \' U, M( Y9 \& z                        
) l- V: Z  z2 t! y) l- c1 ]$ M# p                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。
# p" F4 a  ]& l0 U
% e; p+ z+ X$ O% w0 ?% \0 a# m$ m
( A; ~1 a' j. j$ R3 b; U
                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。


6 u* }1 O% a6 h, V! i

                        
% p  w5 g/ Q9 ^. j% \6 l% |                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
. V0 T3 b2 J; L$ F                        这个代码去掉就好。。。
6 Y9 Z6 L: E  m/ ?9 e- t
; t( W8 b' {' {# |4 `2 q1 A9 s0 _
0 N7 D+ ~6 l4 ?( d  t; ^
, w& a- [) }# z7 w5 V) P' \6 G8 X/ R
                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
2 e  E1 X( j# \7 ~! q$ c                       后面还会继续更新。。。关于模板变换等等一系列。。。。
, e- g5 Z  w% }# s3 I
, v* h! j+ f/ m8 z! z- d
6 X: ~- y* O) }7 R/ M# N
8 j/ k6 C2 m4 ~8 T" ~5 s9 Q, a                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）
0 ^& A' E+ n9 G6 \( i
* Y* r  I& g! p7 e6 p
' p9 \( d) C% B; M( I
: Z- V  m4 p  |' ]! M5 w                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。
7 ]# N' s! J7 Z( r# l

& [! {; B# ^& Y( O' s+ \
  ^( Y& Y& ^# X, A" h
! i: B9 l0 X* ~6 D' a, n为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。


8 p7 y4 k$ J+ ~) e6 s5 R, t

1. body {
   
2. 
   # y, C' h/ }8 t+ p9 `
3. 
   & ]4 c, C# Q, W9 A. I
4. background: url(图片地址);
   7 g. R9 Z; n$ i. L
5. 
   ! C4 I1 W6 G. H8 _( ?" q
6. }
   
7. 
   1 Q8 ^" d# S/ d/ d1 ?: }
8. 
   9 f8 `( k6 k$ t2 H, i) p
9. 
   
10. 
    1 B- g  c2 u+ ^4 }& H
11. body,td,th,div,ul{
    
12. color: #0044BB ;
    9 b& W8 n' [5 i  Y
13. font-family: 楷体_GB2312;
    
14. font-size: 17px;
      t- d- H/ }- u2 L$ a
15. 
    * _) F* X- r# s8 L! I% d1 @' M9 _
16. 
    
17. 
    
18. 
    
19. }
    4 I5 N% \5 G- v# }+ W
20. 
    
21. a {
    
22. font-family:楷体_GB2312;
    0 E" l9 q3 O$ e8 [  z/ ]$ T& p
23. font-size: 14px;
    
24. color: #0044BB ;
    
25. }
    
26. a:link {
    9 ]* D$ @" Y# `
27. text-decoration: none;
    
28. color: #0044BB  ;
    
29. }
    4 q  Q# ?! K" \$ o8 S: G$ m  I0 Q
30. a:visited {
    
31. text-decoration: none;
    2 n1 \  V0 d% n  p! T$ ~1 x0 r
32. color: #0044BB ;
    * C8 p$ l* K7 u- U
33. }
    
34. a:hover {
    
35. text-decoration: none;
    
36. color: #0044BB ;
    * d- A+ h* S( T- ~; Y' W+ b
37. }
    9 M" |9 d: ?, I# t1 k
38. a:active {
    
39. text-decoration: none;
    
40. color: #0044BB ;
    9 U9 z* n" [: }6 g3 B/ E
41. }
    
42. 
    2 `0 I5 q3 k* q6 R+ V
43. #header ul{
    - t+ G, h5 t- e9 [/ z* j
44. background:none;
    
45. 
    4 i% w7 O% J/ i
46. 
    : x% o: x. B* z; a
47. }
    
48. #header div{
    & n/ m( ?; w" i) E/ R2 q5 n
49. background:none;
    
50. 
    ! e  K" D! Q' r0 f/ r' c
51. 
    
52. }
    - D* Y# A$ O/ M
53. #header h1{
    1 M* s9 q5 Y! g0 @$ C
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    + z5 p* W# J" A: i
56. 
    8 [6 [7 k  |" G1 ~
57. 
    ( n* F% ^+ z1 w* M. f8 A% h
58. }

复制代码

AK47

这里还有个我自己做的 古剑奇谭 的风格代码。不过底部代码一直改不过来，显示不出，很是郁闷。

  g% q3 U, Z8 x, S7 f

1. /*登录条*/
   ) K( h5 x1 u2 Q( t! F
2. 
   
3. html body center div#usrbar,html body center div#usrbar a,html body center div#usrbar a:link,html body center div#usrbar a:visited,html body center div#usrbar nobr{color:#545454!important;text-decoration:none!important;background:url(http://www.xuecun.org/attachment/201001/23/12173_1264256252DlYm.gif) repeat-x!important;-moz-opacity:1!important;filter:none!important;}
   ' j2 D3 |, q  Z7 h) K- b( Q
4. html body center div#usrbar a:hover{color:#999!important}
   ! d( z  j, o" J6 C
5. img.down-arrow{border:1px solid #888888!important;filter:gray!important;background:url(http://.jpeg) no-repeat 50% 50%}
   
6. #hi_index{}
   # a6 n  f0 `8 y2 B
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   : B3 u* m) H1 ^: o2 }' R: Q
8. 
   2 s' I7 V5 ?# ~, q: s% A' m
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   2 `  Y0 f1 k( y2 |0 V
10. 
    5 `0 K2 B* N: C. f& D( d: w9 L1 ^
11. BODY {scrollbar-face-color: #B91A07;
    
12. scrollbar-shadow-color: #F7F1D9;
    
13. scrollbar-highlight-color: #F7F1D9;
    
14. scrollbar-3dlight-color: #F7F1D9;
    
15. scrollbar-darkshadow-color:#F7F1D9;
    
16. scrollbar-arrow-color: #F7F1D9;
    
17. scrollbar-base-color:#F7F1D9;
    
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    
19. 
    ( g, P' H$ B0 F( a
20. 
    4 t- T/ n" P! m: f; C% B( }/ o
21. /*定义超级链接文字默认样式*/
    ! H0 D- k0 Z" I9 g, e
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    $ \% }. r6 J& n9 A! |4 z7 \
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    
24. 
    7 q+ u4 }' A% [' N
25. td.c2t3 a:link,td.c2t3 a:visited { font-size:12px; color: #6E5D4D; text-decoration: none;}
    
26. td.c2t3 a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #BA3836; text-decoration: underline;}
    $ q8 b- @# S; d% q& i" z7 z
27. 
    ( q1 Y; t. }' A8 T# O" `9 e4 E
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    % q8 c9 x/ K0 y: Z7 `
29. 
    
30. /*底部*/
    7 a5 n2 x  G* V5 o5 n* I
31. #main{ width:1024px!important;
    
32. background-image: url(http://www.xuecun.org/attachment/201001/23/12173_12642569443mHF.jpg); background-repeat: no-repeat; background-position: center bottom;margin: -0px 0px -50px 0px!important; padding: 0px 0px 163px 0px!important; }/*底部背景*/
    
33. 
    3 T4 d% n5 x5 J. h6 ~
34. /*头部*/
    " c& q  O, N8 c2 b9 h
35. #header {height:550px!important;
    
36. background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}
    6 Y- g3 S/ M$ |( m
37. 
    7 n* F' \( S9 ^: Q. }" ^
38. #header DIV.lc {BACKGROUND:       repeat;left:50px;width:900px;height:300px!important;filter:Alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;}
    : I+ d% R6 w+ `: w9 f
39. 
    
40. #header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
    / F' ]2 P4 }$ p7 i9 s% Q
41. #header div.tit a.titlink{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    3 C: w: `# D/ w& ]. W/ W( L1 u- j
42. #header div.tit a.titlink:visited{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    
43. 
    
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    1 l+ n8 ^- V2 l/ N4 R8 X# C
45. 
    
46. /*  导航栏  */
    
47. #tabline{display:none;}
    - T" D; {* R* o& e* F
48. #tab{left:620px;top:503px;position:center}
    
49. 
    ' |% q- C5 U- O6 P0 Z' e" Z! O
50. #tab a.on,#tab a.on:link,#tab a.on:visited{color: #F7F1D9;text-decoration:none;font-size:14px;font-weight:bold;BACKGROUND:#B91A07;}
      m" {& {- e- \" H3 f$ }8 p
51. #tab span{display:none;}
    0 C8 E' \2 @' ^& G* z5 X  t
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    , O1 s! P8 ?+ F* {, m1 F0 d( s  ?
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    
55. 
    + N7 p. r  l& P+ n4 E4 u3 m
56. #tab2{background:       repeat-y;top:0px;}
    ) k& p4 S5 r4 S2 r' X% B
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    
58. #tab2 { background-image: url(-);
    6 \3 X1 ]- W, r1 v
59. background-position: center top;}/*设置TAB菜单主体*/
    
60. #tab2 span { color:#dddddd; }/*TAB选中状态*/
    
61. #tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/
    
62. 
    
63. /*中部*/  
    ; O; Q* D+ m% N8 f2 m
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    0 s) V7 h+ P+ d- q% S2 O, M
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    4 w: l% ^) C8 y2 {
68. #layout{  }
    
69. 
      T7 Y) i; a% [4 ^7 B# n% e* R! E( z
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    
72. #comm_info div.line{
    # B. L9 {1 O0 n4 G/ Q1 W3 I' I4 [  x
73. background-image:url(-);background-repeat: no-repeat;background-position: center;background-attachment:;margin-top:5px;line-height:96px;border-top:2px}
    ) ]6 W: T8 ?! n5 j6 t6 X
74. #m_comm_info img{display:none}
    & {/ t. z; @1 q9 d
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    - `6 `7 C/ A; Z) U0 M
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    
77. 
    
78. /*页码区域*/
    7 l+ T- j) d) @5 i6 J& u& G
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
      |! L. K& @6 r5 ^8 U# s( u3 a3 \
80. #page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
    
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    
82. #page a.pc:visited{}
    ; u6 G8 e4 H9 Z% U. E& w/ L
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    / ~- @0 n7 d3 Y) _6 {5 U: o$ h) H
85. 
    3 z9 |) a2 I: p8 c6 L& S1 [% t" D
86. /*模块*/
    
87. 
    
88. .mod {margin-bottom:0px;}
    / _: a% s( T3 k9 C
89. .modhandle{cursor:move}
    
90. .modth{height:33px;}
    9 D2 D7 t& C: n; Q. f+ T
91. .modhead{padding:0px 4px 5 4px;}
    
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
    / N1 Y; _" o( G5 B  K+ r
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

吃了N久的前列康，好不容易这病情刚有点好转，一看这帖，这蛋又开始隐隐作疼了！歌，你这不是作孽么？

听樊

顶楼主！
4 b" y; ?2 B$ s8 o钓鱼岛是我们的！