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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。

' O. ^: p6 v7 h                          
. ~8 J- l6 Y/ g* I/ g5 ]! _5 P                         你将看到一个空白地方，现在我们就将编程写到里面：
5 q6 B( X$ [* l$ Z6 `5 h. ^+ k. d! m. ~
                          
$ K" R( m7 t- }0 n4 {                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
) |6 g( K! l9 N. X                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
' ~% c2 I8 y5 e1 P. m8 D1 H                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。


$ G. \/ z% X1 {                        
                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
4 N. [9 Z; ~$ b                         color：是颜色。你可以自己去搜css颜色代码。
& j& f. z: t! |- q) O                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
( W4 M2 m2 F3 [# }$ M                         放在font-size：的下面。跟上面的对齐。
- Y2 Q) z( `) |" G# W' N

4 z9 v# C, C5 i
                        
                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。
5 i1 L! G; {" P( N2 H' W

+ R- ]" I4 `- K$ T2 d! i
. Z# E; Z. o) U# x; v7 z                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。



7 H) q1 W7 P+ \: J6 `
) ~. _* q1 y! L$ q0 G' m                        
  ?3 b/ m; j$ V" O  n; o2 N! q                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
2 }% A2 t. @6 O& q) ?% l3 u                        这个代码去掉就好。。。

- J5 R0 p) A' a( p4 j% f) q
5 h; K8 p& t+ Y2 r: L1 |4 Y

# z3 t2 G# R  g                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
$ W( \' J& R5 |, q                       后面还会继续更新。。。关于模板变换等等一系列。。。。
3 e2 J2 W. T0 ~2 `- x- A( {+ r


                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）
8 Q7 e  c" L1 S


                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。


; k7 h' P! x$ p& Z

为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。
9 \3 j- G" ^& D% o7 E" N: n# r
8 @- [( C5 }- {+ ?4 y
  s, E7 J- D! `8 i. a

1. body {
   % K2 p' `6 D' F' b# T8 {; b
2. 
   
3. 
   
4. background: url(图片地址);
   
5. 
   
6. }
   ' I- A; o- P0 R4 D! K" e0 L: `
7. 
   8 [% o$ b! w- D6 ?4 A0 m1 }
8. 
   : v1 i. L3 v. J+ I
9. 
   " Y4 B# N4 ~& e/ I# W! _. V
10. 
    & T3 G- b5 o" y, m
11. body,td,th,div,ul{
    
12. color: #0044BB ;
    
13. font-family: 楷体_GB2312;
    2 \, C$ T2 d9 u, n4 Z9 Y
14. font-size: 17px;
    
15. 
    
16. 
    9 |: G! g% c: Y% j5 m, F, y
17. 
    8 E* @2 C9 `4 x
18. 
    
19. }
    7 @. ]: d. ]( Z( N3 Q
20. 
    2 U- @, Y" @6 p+ y* j# W
21. a {
    . r; G. s- |9 L9 x: S. U
22. font-family:楷体_GB2312;
    1 m7 `1 |# G7 h" T  j7 a' `" F" a
23. font-size: 14px;
    
24. color: #0044BB ;
    
25. }
      [1 r0 r# `- O; v% ]2 d
26. a:link {
    
27. text-decoration: none;
    0 I2 ]5 L7 t" F0 G, F
28. color: #0044BB  ;
    1 c1 r" E) |, k
29. }
    + g' m0 c/ j0 a: I/ I
30. a:visited {
    
31. text-decoration: none;
    / P2 u9 Q' i3 [) c7 f- `# Z" T
32. color: #0044BB ;
    
33. }
    
34. a:hover {
    
35. text-decoration: none;
    
36. color: #0044BB ;
    
37. }
    * Y2 o0 l9 [2 m! K8 m
38. a:active {
    
39. text-decoration: none;
    
40. color: #0044BB ;
    
41. }
    
42. 
    . r7 X7 i7 G7 R  \5 ]7 L0 {3 t
43. #header ul{
      Q7 E9 }3 u1 b1 x7 d. y2 N9 v2 @
44. background:none;
    
45. 
    " O& w/ }6 E5 s/ {! x
46. 
    
47. }
    # g; D3 S' o- t$ P" @
48. #header div{
    ' X, M9 L# P- ~0 \: o& }
49. background:none;
    + d6 c8 R# Q$ X* V  n5 x7 _
50. 
    ( j* i4 ^$ Y: p9 d; ~- \
51. 
    
52. }
    # h! m, U) }6 s7 `: f
53. #header h1{
    $ e6 y4 Y: `8 i' U
54. visibility:hidden;
    ( [6 c  [# U" Z! e5 M% r
55. {top:8px; left:40px;width:100px;height:300px;}
    
56. 
    6 e3 \8 m& l" m' f6 _; }0 a
57. 
    * Q* Q, U) g1 f; ^% y/ E
58. }

复制代码

AK47

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

% v2 }) e9 k) n3 W: K. X

1. /*登录条*/
   0 V3 b$ n# l; ~- n  R
2. 
   ' ~9 C) }  L4 N% N# P7 @
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;}
   
4. html body center div#usrbar a:hover{color:#999!important}
   5 s9 ]/ d& L% X% ^
5. img.down-arrow{border:1px solid #888888!important;filter:gray!important;background:url(http://.jpeg) no-repeat 50% 50%}
   
6. #hi_index{}
   
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   
8. 
   1 [3 q$ q1 H5 ^, V6 @
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   
10. 
    / J. H: W% J; e) P( C
11. BODY {scrollbar-face-color: #B91A07;
    ! R& K& p/ A' i6 n7 f' R7 v! E
12. scrollbar-shadow-color: #F7F1D9;
    $ v# P" l: H/ {8 c( U" `
13. scrollbar-highlight-color: #F7F1D9;
    
14. scrollbar-3dlight-color: #F7F1D9;
    + ?" t0 n, y  h9 n. c9 p+ l5 t
15. scrollbar-darkshadow-color:#F7F1D9;
    . @, u4 ~3 a$ ?2 ~% b; H& I7 C% w
16. scrollbar-arrow-color: #F7F1D9;
    . A" f% {6 h" O9 H
17. scrollbar-base-color:#F7F1D9;
    
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    
19. 
    " i$ C0 E, T, @5 H6 j+ @9 S
20. 
    4 k, m  ]6 A9 I1 b
21. /*定义超级链接文字默认样式*/
    - V& B( l/ ?7 x# G8 h/ j6 M
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    6 X6 [* {4 U, Q+ }8 C
24. 
    % P9 S2 U, S6 y9 B9 t, i9 E
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;}
    7 W4 U4 v+ y, ?/ ^8 s
27. 
    9 U2 I% D) q4 y; t, K5 Z/ g2 s
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    
29. 
    ) Z& R% F8 h) @! W) @2 @% L
30. /*底部*/
    
31. #main{ width:1024px!important;
    0 N- w# Z. J! a) j9 O+ W
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; }/*底部背景*/
    + k, h. C5 O+ C" Y: N9 D
33. 
    
34. /*头部*/
    
35. #header {height:550px!important;
    6 m$ ]/ d1 u! K/ c
36. background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}
    3 ^- f, V4 C" A+ _
37. 
      J* }, Q  i/ w6 S7 R
38. #header DIV.lc {BACKGROUND:       repeat;left:50px;width:900px;height:300px!important;filter:Alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;}
    
39. 
    ! ^/ k( Z/ L4 A6 N/ g
40. #header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
    
41. #header div.tit a.titlink{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    
42. #header div.tit a.titlink:visited{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    
43. 
    ! [6 L* _. u& k! ?3 {0 D& m, g
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    
45. 
    
46. /*  导航栏  */
    
47. #tabline{display:none;}
    : ^/ v. P( B0 t3 Y5 n
48. #tab{left:620px;top:503px;position:center}
    - i2 c; V: O5 _& ]
49. 
    ! C6 u; {4 \: F: {5 r% q# U
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;}
    1 e( F$ ~6 D, H
51. #tab span{display:none;}
    1 o* p5 u8 b8 _5 [
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    ' ^- L4 ~4 |3 M- U, z! ]
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    $ M8 ]3 Q7 R( T: l+ W! y
55. 
    
56. #tab2{background:       repeat-y;top:0px;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    8 Z. V( c7 T' U5 f+ D
58. #tab2 { background-image: url(-);
    
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. /*中部*/  
    4 s) m/ q5 O7 N, }7 S' k
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    # s4 B/ p1 `% B" G7 G4 A. [
66. .stagepad{ width:auto;margin:0 auto;}
    3 F- s. d( X* r  u% i; b
67. 
      Z) V/ h! c( H. p' q
68. #layout{  }
    
69. 
    
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    & z/ Y& J5 z. T9 Y, P. H
72. #comm_info div.line{
    
73. background-image:url(-);background-repeat: no-repeat;background-position: center;background-attachment:;margin-top:5px;line-height:96px;border-top:2px}
    
74. #m_comm_info img{display:none}
    , O! J6 I$ t0 b+ {) y
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    3 G! b$ o! x# {; m% C! S9 A
77. 
    9 a$ n, ]) D) I
78. /*页码区域*/
    2 k8 F4 L2 B& l0 B) {
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
    
80. #page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
    / V! ~  Q% Q( t
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    
82. #page a.pc:visited{}
      h; K! z' m2 O. s2 m
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    
85. 
    : s  _% S( ^7 G  ~! V! U. ?
86. /*模块*/
    . L  P. }/ ~3 n- N- D% ?2 o9 _
87. 
    
88. .mod {margin-bottom:0px;}
    
89. .modhandle{cursor:move}
    8 L. f) x) L  s- l' k
90. .modth{height:33px;}
    
91. .modhead{padding:0px 4px 5 4px;}
    
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
    
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

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

听樊

顶楼主！
6 ^5 H5 m/ v0 _2 S钓鱼岛是我们的！