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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
0 P# g( }( Y8 A; H2 X; o
: P+ z% Y$ m; C6 H9 o' F                          
                         你将看到一个空白地方，现在我们就将编程写到里面：
3 u# e, h! Q0 t) V  v5 R
                          
                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
1 z7 J9 _5 M. m: `9 E5 A* D( X                          background-repeat: repeat-x;     横向重复
: j: k/ v1 `; P9 t% s0 ?; d                          background-repeat: repeat-y;     纵向重复
                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
8 i! w+ j! w( k; a* s, Y& b2 U) v0 H                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。

- R, ?* f: X- J8 k) q
                        
                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
9 O& d5 y* T1 ~5 k# Q8 Z                         color：是颜色。你可以自己去搜css颜色代码。
                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
# ?" U( H% G% k# k. }                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
                         放在font-size：的下面。跟上面的对齐。
! j6 H7 |* W) M) A* g% m


7 w$ p' j: \, ~                        
                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。



                        
8 G% y+ l4 j4 g4 [* c                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。
3 M6 F4 k5 @. G3 C* d) u/ m) K
0 R0 Y0 C5 L6 Q/ s% R
5 H/ s8 t% s( K6 A

                        
                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
: h8 z( ^% Q) I; m4 p                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
5 i4 ^9 ]& o8 |7 z" y5 a/ X                        这个代码去掉就好。。。

9 W- E* t/ K; x7 l# O" V


" g& f2 n8 _$ G0 F, {  H# V                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
$ q* |" y6 j8 R                       后面还会继续更新。。。关于模板变换等等一系列。。。。

, i) M/ V9 C1 Y% u- b# D5 i
1 V' m" a4 d6 m; Q" g/ z# i
. B3 d1 |5 n& f( M& x5 B" m- R  ]                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）

. ~; R. D& K/ X! K" f0 B7 `# L

, J, Z4 \8 f  b5 X$ v# p                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。

& l5 l' ~$ X+ Z& ~3 f
: o3 R- f) w' J2 S
; r# o, t/ S0 P2 |  d/ n
: c; Z9 {8 w' w8 M9 V# T为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。
/ D; A7 J4 H4 [) }

0 R$ |* H6 y& ?) s

1. body {
   6 |; G/ a+ N* }9 X, P7 b
2. 
   
3. 
   
4. background: url(图片地址);
   
5. 
   ) I" N( O1 v4 q0 s9 r$ ~5 ?* ~% {
6. }
   5 a: N8 x' l9 }; ]0 o6 I: s3 w& Z
7. 
   
8. 
   8 ^2 ?& T- D- J7 T2 e7 X& y; n! ~
9. 
   
10. 
    ( U) ^# \% n1 Y% s0 X4 d) I
11. body,td,th,div,ul{
    
12. color: #0044BB ;
    
13. font-family: 楷体_GB2312;
    : \6 L. k0 l% J  v6 A2 |
14. font-size: 17px;
    
15. 
    
16. 
    8 K. c+ f& {$ \/ B/ ]7 Y3 g* S4 T1 j
17. 
    ( v; o/ W1 U6 k8 T# g! T! ]
18. 
    
19. }
    
20. 
    
21. a {
    6 Q2 g/ B+ i/ F
22. font-family:楷体_GB2312;
    " @. Q4 a  o1 X% H; T  k
23. font-size: 14px;
    ' i+ D( J: c- O& v  y
24. color: #0044BB ;
    - M; F7 {; l" N5 a
25. }
    
26. a:link {
    
27. text-decoration: none;
    
28. color: #0044BB  ;
    2 t; k5 C# u! Z4 d  Z9 u
29. }
    ; Y7 C4 O! d! N3 [7 c/ x
30. a:visited {
    ; H( T! {: t% {; L1 D; Q+ M+ D
31. text-decoration: none;
    
32. color: #0044BB ;
    " O" G* H' A) Z: A) g! d
33. }
    
34. a:hover {
    
35. text-decoration: none;
    # @2 O/ c/ m+ A* x1 D6 K, m
36. color: #0044BB ;
    * T2 c# j# l; B) j
37. }
      m2 A0 V- \  e/ c- o, c
38. a:active {
    4 E, D0 ^' M! z; F6 T. Q. T
39. text-decoration: none;
      D& J3 X& z& t
40. color: #0044BB ;
    
41. }
    
42. 
    
43. #header ul{
    
44. background:none;
    
45. 
    
46. 
    5 v+ W/ r1 U0 `; u  u
47. }
    * O. i7 Y+ o7 ~$ ^0 d. a" b
48. #header div{
    
49. background:none;
    
50. 
    & z6 ]; i5 u7 c; z. P
51. 
    
52. }
      Q9 g& [6 S% T& @
53. #header h1{
    
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    9 q* }/ m# w' c$ g2 ~5 w
56. 
    . w: t4 Q0 O' y; e/ \
57. 
    
58. }

复制代码

AK47

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

! M# M: T1 p; A/ `$ S

1. /*登录条*/
   
2. 
   ( B+ r" [- p6 m; @+ E+ X5 `
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 M5 v+ G4 Y: v
6. #hi_index{}
   
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   ' R! ]" N' I; y
8. 
   . b1 S; B) W- H7 u0 m3 G3 E' z
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   1 b4 @4 _/ g7 B
10. 
    . [9 S# _3 K  W5 g# S
11. BODY {scrollbar-face-color: #B91A07;
    - E! J! k" l% L& U( |! g2 x
12. scrollbar-shadow-color: #F7F1D9;
    $ r. u) o1 Z  I7 a( C
13. scrollbar-highlight-color: #F7F1D9;
    " o9 F% ]1 X' ], j3 n% O: l! H
14. scrollbar-3dlight-color: #F7F1D9;
    
15. scrollbar-darkshadow-color:#F7F1D9;
    ! G: e8 q9 n6 j/ f; S1 A
16. scrollbar-arrow-color: #F7F1D9;
    
17. scrollbar-base-color:#F7F1D9;
    6 d8 ~! g" k5 T: A0 l, y
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    3 O; O% y8 D8 R9 M# I
19. 
    + R7 i0 |: S" f, e
20. 
    * P# P; H6 f4 G7 o. ]* T
21. /*定义超级链接文字默认样式*/
    ( d: S+ O' e) t2 h- C1 Q3 K" V
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 ;}
    
24. 
    
25. td.c2t3 a:link,td.c2t3 a:visited { font-size:12px; color: #6E5D4D; text-decoration: none;}
    5 g; e( b- Z* m! w  w: d
26. td.c2t3 a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #BA3836; text-decoration: underline;}
    ) d1 H! e) {) K$ C. M
27. 
    ' I1 ]9 C4 v1 r, }* J1 `
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    / Q) B4 `8 a4 J# i, k! F* [8 w
29. 
    
30. /*底部*/
    
31. #main{ width:1024px!important;
    1 f$ i- h. S9 r- Q- J6 X2 a$ ?
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; }/*底部背景*/
    ; @/ i3 }3 o, ^& J( J1 E, r
33. 
    
34. /*头部*/
    0 x* y" C6 I/ `6 i4 H  R* _
35. #header {height:550px!important;
    " ]$ @( C# A+ P% O) t. G- m
36. background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}
    
37. 
    - \* e" l  M8 T; ?
38. #header DIV.lc {BACKGROUND:       repeat;left:50px;width:900px;height:300px!important;filter:Alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;}
    , v5 D/ ^  A7 R/ g  v6 g/ x
39. 
    
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:微软雅黑;}
    8 y7 |" j$ @9 f4 D, k# ~( I8 y6 I8 |. C& Z
42. #header div.tit a.titlink:visited{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    8 b/ c. j% k. l# j
43. 
    
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    
45. 
    7 U; F. M3 Q# x
46. /*  导航栏  */
    
47. #tabline{display:none;}
    
48. #tab{left:620px;top:503px;position:center}
    4 }6 \" _* c0 B2 c9 Z% w. t( o
49. 
    1 e! s7 q$ H( c" q( X! c
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;}
    7 `& l7 ^% u$ @! T, L
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    
55. 
    
56. #tab2{background:       repeat-y;top:0px;}
    5 a1 _* I" Y/ P; ]
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    4 Q, K9 p. Z3 g, V" g
58. #tab2 { background-image: url(-);
    
59. background-position: center top;}/*设置TAB菜单主体*/
    7 a' u2 B# f4 ?8 j8 v* {3 p9 N# P
60. #tab2 span { color:#dddddd; }/*TAB选中状态*/
    ) g5 O3 w$ `) _3 n" i
61. #tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/
    
62. 
    + \% B8 H  ?- ^6 H  u9 b
63. /*中部*/  
    
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    : |! c$ c7 ^0 f: Z- E, ~. y# L
65. 
    
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    
68. #layout{  }
    ) Y) x" G: s6 m3 G; Y3 V- i1 v
69. 
    : y4 H( q9 T! l2 Z  \9 a  P
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    
72. #comm_info div.line{
    6 W, S+ L1 `# P: N
73. background-image:url(-);background-repeat: no-repeat;background-position: center;background-attachment:;margin-top:5px;line-height:96px;border-top:2px}
    . j$ c; @, H: B9 L" }6 u3 f
74. #m_comm_info img{display:none}
    
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    5 ?1 P  U/ g# j7 ]% u7 X7 w4 b; ^, n7 {# g
77. 
    6 N1 F2 M' t: o, G
78. /*页码区域*/
    
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
    . u2 ]$ H7 H: Z9 g0 z2 j
80. #page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
    % R" R: Q" q. Q( d5 I& F: H$ ?2 L
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    
82. #page a.pc:visited{}
    
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    
85. 
    6 l) I* |! ~1 ]/ C
86. /*模块*/
    
87. 
    
88. .mod {margin-bottom:0px;}
    3 s& K" }8 l1 o/ `8 X& l" e7 R/ ~6 E
89. .modhandle{cursor:move}
    
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久的前列康，好不容易这病情刚有点好转，一看这帖，这蛋又开始隐隐作疼了！歌，你这不是作孽么？

听樊

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