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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
& F2 k0 P* w- D0 p1 ?7 u) t+ I
$ w; [/ u  X% A" |* Z                          
" O6 u, `, D$ @' m9 T: _  S5 M                         你将看到一个空白地方，现在我们就将编程写到里面：

                          
                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
: {8 J3 ?: H- h  o" d                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
* D) ]9 Q9 W: F4 ^) X                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。
- c  }9 u9 N1 z

- U  s8 W) `" t$ R* ^! K" P                        
                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
                         color：是颜色。你可以自己去搜css颜色代码。
% r  B, x2 C7 ^4 d                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
" }; q% t6 C+ Q, {$ J! p                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
                         放在font-size：的下面。跟上面的对齐。

5 N; e1 u/ J6 x6 G2 h  j+ {
. y8 c: E: b  q9 [0 S; l! B
                        
7 Y7 Y  W6 A2 U% }1 `' Y                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。


* Q8 m+ ~3 |, W, n3 F! S
                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
6 W7 w8 I3 Q0 I6 N5 W( }                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。
" w+ C7 i1 `+ V+ w( P
, f5 L* U1 p; u, o" Q" b


                        
6 L; H3 C+ x6 d8 `                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
                        这个代码去掉就好。。。

, F3 H! _, `; i: n/ [
% {# K8 N; u) l$ b' i( I* `/ H
- C0 b9 M3 x" t/ G; O
                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
                       后面还会继续更新。。。关于模板变换等等一系列。。。。

; J' g" x8 I2 ?+ e+ ~

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


6 @2 S6 E8 c" s: v. \, O7 |; n  r) ]
/ u) S' H% B% ?1 k. I/ s& N) h                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。


" l' `$ ?/ a6 t! H

3 H# |1 D( {; j( G) W为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。

5 j2 x- z8 i. C* s- l6 |
  b: s: O0 _4 R2 m0 p! I

1. body {
   , G4 l- N4 ^3 \9 U/ b/ P
2. 
   
3. 
   
4. background: url(图片地址);
   
5. 
   * Y2 o/ V; I& q5 ^& L
6. }
   
7. 
   
8. 
   
9. 
   
10. 
    0 b' y6 f/ O" _) w/ P; p
11. body,td,th,div,ul{
    ; e) p. v& q" e4 r/ j
12. color: #0044BB ;
    6 z* r$ S2 Z; g7 p" L" ]: t
13. font-family: 楷体_GB2312;
    
14. font-size: 17px;
    1 w* L4 \4 l4 j3 l) ]
15. 
    
16. 
    - r' v1 d5 _7 v
17. 
    6 j0 p3 [/ K7 d9 B
18. 
    . {9 _4 T0 u4 `2 T
19. }
    
20. 
    : N3 O7 ?7 d) U$ M/ u) ]$ s
21. a {
    
22. font-family:楷体_GB2312;
    
23. font-size: 14px;
    
24. color: #0044BB ;
    4 n6 o, \7 }  O
25. }
    : i+ o  G8 H, @& P: m
26. a:link {
    
27. text-decoration: none;
      l% N- b. l. o4 b$ C4 ?
28. color: #0044BB  ;
    
29. }
    
30. a:visited {
    
31. text-decoration: none;
    
32. color: #0044BB ;
    ! F. x5 Z0 |( ]8 x" Z- d4 \
33. }
    * \. N6 }; h: X% i4 ^- r
34. a:hover {
    5 A7 S6 g2 z2 J" ?, V. W
35. text-decoration: none;
    
36. color: #0044BB ;
    6 B4 m5 T+ }# Q* H( G4 B
37. }
    ! k1 n# h2 L$ Y9 d
38. a:active {
    
39. text-decoration: none;
    4 J2 Q/ B* |; @9 O$ Y2 L. @
40. color: #0044BB ;
    ! F' t2 ]4 x4 g6 D
41. }
    6 y" a0 _5 @5 U4 v1 h
42. 
    * Z4 _8 j' G! I" \( x! \
43. #header ul{
    
44. background:none;
    
45. 
    
46. 
    
47. }
    2 v" U5 H) T7 l" I0 e
48. #header div{
    $ p# i3 p: O% S; r1 A9 X3 y1 p1 F
49. background:none;
    
50. 
    / A5 Y5 Q8 Y7 C1 m% o$ m
51. 
    
52. }
    
53. #header h1{
    
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    : }" h. z( g6 g7 L  X: y
56. 
    1 @& t5 H/ t5 s9 N
57. 
    
58. }

复制代码

AK47

这里还有个我自己做的 古剑奇谭 的风格代码。不过底部代码一直改不过来，显示不出，很是郁闷。
0 k0 T1 X: j! b2 R

1. /*登录条*/
   . J% K  x( m# D0 M' T+ ]2 K8 I
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;}
   
4. html body center div#usrbar a:hover{color:#999!important}
   
5. img.down-arrow{border:1px solid #888888!important;filter:gray!important;background:url(http://.jpeg) no-repeat 50% 50%}
   6 P' f  ~- u9 x) z/ m/ A
6. #hi_index{}
   
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   
8. 
   
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   
10. 
    
11. BODY {scrollbar-face-color: #B91A07;
    ) c1 h) D' o. }# y4 p) F
12. scrollbar-shadow-color: #F7F1D9;
    
13. scrollbar-highlight-color: #F7F1D9;
    ! V# m) j' a; M! d+ f: k/ o4 ~* f1 K( r
14. scrollbar-3dlight-color: #F7F1D9;
    * J$ X. J9 C) \4 q% H
15. scrollbar-darkshadow-color:#F7F1D9;
    8 {& m3 U8 P7 |  h
16. scrollbar-arrow-color: #F7F1D9;
    
17. scrollbar-base-color:#F7F1D9;
    
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    # D5 ]2 S8 s7 R5 K: K3 Q( ]: T
19. 
    
20. 
    & {" c5 n7 M+ X* r
21. /*定义超级链接文字默认样式*/
    
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    - w! @6 X) `/ B* b4 t5 |2 l" I9 P
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    
24. 
    ! ^" b& T$ |( p& R
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;}
    & G6 P' p" n5 I0 K; O( \0 T6 E3 _
27. 
    
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
      w: k. u) D* H7 N( ^5 Q! h3 g$ W1 m
29. 
    1 P7 L$ x: K( D- l6 O/ T4 |0 J! B
30. /*底部*/
    
31. #main{ width:1024px!important;
    1 K% s; w7 p+ x' [
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. 
    
34. /*头部*/
    ( h! d! p; c$ a# D' ?* v
35. #header {height:550px!important;
    - o1 n& A: \+ a. N  K6 P3 n, G" }! C
36. background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}
    
37. 
    
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. 
    
40. #header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
    + a1 k. _* n* W7 j# b4 p9 R
41. #header div.tit a.titlink{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    $ n( B* \0 m( Q% z: C+ Q
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;}/*空间简介*/
    + f+ U/ c" W% h7 Q
45. 
    
46. /*  导航栏  */
    
47. #tabline{display:none;}
    7 O. U; U' z) F$ ^; l2 d7 m9 n
48. #tab{left:620px;top:503px;position:center}
    , Q8 m1 I5 U0 @, G( f! S. A
49. 
    / U6 ~( r8 i; ?2 j9 N  I5 j8 [. D
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;}
    
51. #tab span{display:none;}
    
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    / X5 I% E' r# F" G
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    6 c" W9 w! f4 }) a
55. 
    
56. #tab2{background:       repeat-y;top:0px;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    ' [6 p: t, W5 u- k& o+ s
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. /*中部*/  
    
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    1 Z9 S- z5 h" ^% k
68. #layout{  }
    6 U+ F6 v1 C( r$ Y
69. 
    1 a" v$ d( i6 X4 |9 y
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    
72. #comm_info div.line{
    & u9 q$ N8 d& k2 P2 D6 w6 s
73. background-image:url(-);background-repeat: no-repeat;background-position: center;background-attachment:;margin-top:5px;line-height:96px;border-top:2px}
    ; v4 c& m* k+ v9 z- S
74. #m_comm_info img{display:none}
    8 Z5 [7 M# Y$ c# Z2 r
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    ' C" ?5 m; o. X5 ?
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    2 n; C: f! p0 f& A$ H* }5 Z
77. 
    # A6 A5 Z7 c( u0 F& R6 O6 N
78. /*页码区域*/
    
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;}/*当前页码(不可点击)*/
    . g% w6 j8 N% p# L; @
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    # G, @2 {  H: l
82. #page a.pc:visited{}
      ~+ b# }# b% @0 A+ x
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    8 g' _9 c/ f# O; f3 @* L, O
84. #page a.pi:visited{}
    
85. 
    # W1 M8 T! h) g3 o- d+ ?1 |3 ~
86. /*模块*/
    
87. 
    . I4 a; |& W( i/ `' y. P
88. .mod {margin-bottom:0px;}
    
89. .modhandle{cursor:move}
    
90. .modth{height:33px;}
    4 r) S! z3 ^' T& ~' f
91. .modhead{padding:0px 4px 5 4px;}
    3 P/ p$ t0 R" E2 M7 c, W$ q3 y$ Z
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
      _  U1 z8 R* g4 s7 w
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

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

听樊

顶楼主！
钓鱼岛是我们的！