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

AK47

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

                          
                         你将看到一个空白地方，现在我们就将编程写到里面：
' v4 y' @0 n: W5 t" M
1 m' l7 ^/ M7 ~) [8 [6 O                          
$ }0 c+ K9 i* W1 p6 X- E+ v                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
" R# M/ Z; |% y2 d                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
5 Z( Y& h( _7 @, c' B( a' c9 n                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。


+ b. N% y/ F' h( Y+ `1 J3 ?                        
                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
                         color：是颜色。你可以自己去搜css颜色代码。
! W  y5 s, R3 {                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
  G. Q. l/ [1 R" ~7 Q1 `( M' T                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
; S3 ?  z( i7 f/ r6 W6 O                         放在font-size：的下面。跟上面的对齐。
6 M6 e; O( L2 b

4 t+ b- |$ Z8 K. W
5 O1 k" J9 q6 C& R7 X- X                        
3 |: M' `% f# i7 t                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。



4 P. C; M0 T% V# r                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。


, Y5 d+ ?1 n" [9 f6 L

                        
                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
4 C2 N( K* _& p& V2 M                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
* [! L% A6 q, L3 y4 c  c                        这个代码去掉就好。。。



4 v4 o# ?6 y3 k; n: L  o. P5 c
. T/ I' R1 I9 w! ~0 _" [# D6 N                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
( f* D0 G# S" H0 W1 M& k" [                       后面还会继续更新。。。关于模板变换等等一系列。。。。


% N9 p+ h$ M- A( M; G; O3 K
% d+ n5 L: v0 I                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）

  n9 l1 r9 G1 _3 w* l
4 T" K% J+ L) W
                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。
& \8 S: K& S6 }8 n" T

; c5 \0 @5 `# m8 \/ k$ t2 Q

为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。


9 c% O7 s: r) [0 i3 y

1. body {
   ; g/ n, m4 ^0 `6 B
2. 
   
3. 
   # V7 l4 {( z6 R1 p. m1 G* K
4. background: url(图片地址);
   
5. 
   - ^' ?# j: d  {; G" S5 R
6. }
   8 A* B) |! c( D" E
7. 
   
8. 
   
9. 
   
10. 
    
11. body,td,th,div,ul{
    " a* l. {) z; ^. [% r# O
12. color: #0044BB ;
    & u7 U& a6 k$ a# X+ c: x0 N
13. font-family: 楷体_GB2312;
    
14. font-size: 17px;
    ; M* `2 u6 K: o9 y6 d: P( \
15. 
    $ `% d9 i* H2 u1 H% A
16. 
    ) T! K4 {. _( Z1 P/ G# q( @3 ]
17. 
    
18. 
    
19. }
    6 ~# k  F: J) ]4 O* m% Z
20. 
    0 x3 f7 i! `7 t6 Q. R( b$ c/ H
21. a {
    : i6 |+ t6 s+ N) W. U
22. font-family:楷体_GB2312;
    5 b7 I. O( E1 j3 Q
23. font-size: 14px;
    - c* r- L7 T; G2 C; M5 }
24. color: #0044BB ;
    # Z; Y0 @( I2 L2 V: m
25. }
    1 I) e% a' W7 T# h2 k! _# v9 t* K
26. a:link {
    
27. text-decoration: none;
    + t- @) B" d- N0 |$ }
28. color: #0044BB  ;
    6 z' N) Q3 X; r5 \! ]
29. }
    . @5 j/ l  A. ^' X! e9 j
30. a:visited {
    8 @* ]. g8 B' ^
31. text-decoration: none;
    : H' i+ [: d# D0 |. K
32. color: #0044BB ;
    2 s. w0 }  r# |" O1 G  E7 ?4 `
33. }
    
34. a:hover {
    0 ]5 ^3 m+ L' B2 ^' W
35. text-decoration: none;
    4 ]* [2 x. F5 y0 I
36. color: #0044BB ;
    
37. }
    
38. a:active {
    # ~; n2 F6 B' i* ?: Q# j  {4 l8 W
39. text-decoration: none;
    
40. color: #0044BB ;
    : {. }2 k/ r4 \- i- r
41. }
    
42. 
      b$ r" i, O5 Z/ v: s! F
43. #header ul{
    
44. background:none;
    
45. 
    " ^7 U2 Q, a( N% j9 F) [
46. 
    
47. }
    : j. p- q/ ~6 N# K) ~. r
48. #header div{
    
49. background:none;
    
50. 
    
51. 
    
52. }
    
53. #header h1{
    + ]+ N. [4 U* \; Q$ V1 j0 j
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    7 S( Y2 J4 L( G% D! Z5 F0 r
56. 
    
57. 
    3 r# `8 m  Y" I" ]6 z# ^
58. }

复制代码

AK47

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

4 ^2 y! P1 M: o( V0 o. a$ d- }0 K

1. /*登录条*/
   & p6 ]* Q/ C5 `1 Q7 o
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%}
   ! _7 H2 `* C2 o& Z
6. #hi_index{}
   
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   
8. 
   1 G: A: n) u( \6 ^5 C. T: X8 Z" L/ y
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   8 R( w, ~' \6 W- s
10. 
    2 E- c: w6 s( P; D
11. BODY {scrollbar-face-color: #B91A07;
    
12. scrollbar-shadow-color: #F7F1D9;
    ( `* s4 g- z  m& O8 S& Y# W4 ^
13. scrollbar-highlight-color: #F7F1D9;
    
14. scrollbar-3dlight-color: #F7F1D9;
    
15. scrollbar-darkshadow-color:#F7F1D9;
    ' [, M6 D  w% m- D
16. scrollbar-arrow-color: #F7F1D9;
    
17. scrollbar-base-color:#F7F1D9;
      _, P" L3 p# D- s
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    
19. 
    
20. 
    
21. /*定义超级链接文字默认样式*/
    % L/ I  l7 F5 Y' p& N/ U4 U
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    ' D3 q7 T- J: x$ a) P% J
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    3 Q/ d( Z9 E2 U9 i' b7 z! p
24. 
    
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;}
    
27. 
    & d: `! c# ]) C# l8 U
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    
29. 
    / }7 v$ v6 i1 j* h4 N0 L  P0 p
30. /*底部*/
    8 x% B6 Z5 p) J# X4 _/ p+ _
31. #main{ width:1024px!important;
    * u* N5 z, D) x7 O
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. 
    4 |& k2 |0 N" ]. q# H! j: \
34. /*头部*/
    
35. #header {height:550px!important;
    ) z! R4 k) p0 Y7 k% @. O
36. background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}
    0 S5 F# H/ k& F, D0 K6 |. R; p% z
37. 
    * f7 ]- [  \0 c8 U4 Y3 ?: w
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. 
    5 `& \' T( h1 X% L
40. #header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
    ( }6 W5 L$ F" _$ K  o
41. #header div.tit a.titlink{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    % N- `# K9 I2 X6 Z+ o
42. #header div.tit a.titlink:visited{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
    4 `4 \5 p9 w/ e! K; n- U( _
43. 
    
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    
45. 
    
46. /*  导航栏  */
    1 `  j3 u8 N8 i2 i. O3 b. P
47. #tabline{display:none;}
    : [( w3 h5 Z1 z7 r8 M& T
48. #tab{left:620px;top:503px;position:center}
    ! D4 w5 g5 ?, f2 }3 b. N! W
49. 
    
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;}
    $ n5 S+ R% }+ |$ p: }
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    5 b! [1 c8 W  D( l; i
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    
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;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    % c# k0 ?- j; m' `3 X
58. #tab2 { background-image: url(-);
    
59. background-position: center top;}/*设置TAB菜单主体*/
    ' W8 c1 w) n5 `& E4 K, \: }
60. #tab2 span { color:#dddddd; }/*TAB选中状态*/
    1 J( r; O' F8 _! s
61. #tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/
    . L2 \& ?+ T: t  s& t
62. 
    4 s3 ~+ i1 U9 E8 o2 ]
63. /*中部*/  
    
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    ' Q, o+ [' R3 \; L$ ~
65. 
    
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    
68. #layout{  }
    2 ^, R  I# S# M2 K
69. 
    
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
      l5 a7 G) s( `1 F: q+ O) q, j
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}
    . C0 K5 r! V# R% v2 E0 D
74. #m_comm_info img{display:none}
    
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    # f! F1 u+ x' S# M# l( {
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    
77. 
    
78. /*页码区域*/
    9 t2 U8 |$ M, g, S
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;}/*当前页码(不可点击)*/
    
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    / C9 L$ z% T/ X. `" [
82. #page a.pc:visited{}
    
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    
85. 
    
86. /*模块*/
    
87. 
    * X4 l7 i# Q$ ]4 i: _* U2 U: ?" A# D
88. .mod {margin-bottom:0px;}
    
89. .modhandle{cursor:move}
    , f# _7 a; q. a# M
90. .modth{height:33px;}
    6 i: _' `. x8 r% S3 z9 ?/ f
91. .modhead{padding:0px 4px 5 4px;}
    ) }6 I) }. B! B% K! y5 n; k
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
    2 y( a. `0 e3 q! M# c
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

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

听樊

顶楼主！
) D2 t! ~; Z1 b" y1 ~" j5 _钓鱼岛是我们的！