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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
( b' B4 w8 Z9 C* r8 R
* t* p5 a; v' H/ q$ @5 c                          
, M5 \% r& ^$ z; o7 Y                         你将看到一个空白地方，现在我们就将编程写到里面：
+ d/ V+ P+ d3 M4 u6 ]0 j
6 D9 [; F; i6 w- \                          
% N$ [- S% O% W  L! z' Y                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
9 J* [# i4 j% n. N# a2 U1 J                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。
2 J) s& V" X4 k0 i  e6 E0 B! _

" K' [. h6 G* x                        
- |. L' n* a7 b/ L, x& |                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
' m/ K5 ]! \0 e5 u8 P( Y                         color：是颜色。你可以自己去搜css颜色代码。
                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
1 ^- |1 Y& |2 p' B( W                         font-size：是字体的大小。你可以随意调整。
$ V9 V$ f' ]+ z2 I8 o                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
                         放在font-size：的下面。跟上面的对齐。

. V; R& Z: w/ Y- V, q/ H

                        
0 E  l- |( g  K9 [: H                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。


& q0 r5 ]2 A. P1 K7 ?, O
                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。

  G9 R6 e9 q- H2 h; l6 F


                        
                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
- ?% g! m( I6 q7 D' ?                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
6 `  O# p- _0 K                        这个代码去掉就好。。。
( W1 i% o2 L& f& t% J/ u# O

3 [0 |2 O6 L, R

                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
                       后面还会继续更新。。。关于模板变换等等一系列。。。。

$ y6 b5 w! u9 M- l9 e
/ y3 q- K% Y* o* X1 r( g
                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）



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


6 I( F8 s0 L4 I7 i
) J, z/ p/ t! r- t
为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。
( K6 e  g5 j( a; k% V: P- Y7 A
3 ?1 x  H4 W( S- o4 j& [+ y

1. body {
   1 v+ J% m# V% F. e, s1 Y8 E
2. 
     f% e9 S1 e# r) m* m) E( v, z
3. 
   
4. background: url(图片地址);
   
5. 
   . t& y3 z* Y0 ]$ Y( X0 a4 ^
6. }
   
7. 
   
8. 
   9 t0 k' c& g, `: i$ D7 C8 p& t
9. 
   5 ?! a) m7 o6 c: _0 v
10. 
    
11. body,td,th,div,ul{
    ! f; k9 ]/ E( b6 G, t# z
12. color: #0044BB ;
    / D( h* h( q% i. X) n* j7 t5 g7 w
13. font-family: 楷体_GB2312;
    
14. font-size: 17px;
      q* v5 {. R3 i4 R
15. 
    
16. 
    6 c  W6 ~$ R; L
17. 
    + I$ t# A' @5 C) Z; f' Y
18. 
    ' Y6 i! C8 x$ |! B( @. n
19. }
    5 g: W' X  J) _6 k4 w9 u  [7 N
20. 
    
21. a {
    
22. font-family:楷体_GB2312;
    * s: _4 y- \& U$ r5 F
23. font-size: 14px;
    * t+ l5 C% O! v" Z- D, z
24. color: #0044BB ;
    
25. }
    ' F3 |! e0 p  R1 u7 S4 A: ?! w0 T
26. a:link {
    
27. text-decoration: none;
    ! M; O% z0 h6 a$ P. U$ H  \
28. color: #0044BB  ;
    3 \: M) t; e2 l, U3 S
29. }
    
30. a:visited {
    8 n0 \7 E, m5 t, u4 O3 e- I
31. text-decoration: none;
    
32. color: #0044BB ;
    
33. }
    
34. a:hover {
    ( Z- s9 V2 ?1 M0 |# \7 }/ f
35. text-decoration: none;
    
36. color: #0044BB ;
    
37. }
    3 Y' M! c2 B# i8 |
38. a:active {
    
39. text-decoration: none;
    
40. color: #0044BB ;
    
41. }
    
42. 
    $ ?8 A! H4 H* K3 ^0 d$ p1 B
43. #header ul{
    
44. background:none;
    0 U  E/ g3 o7 w' B( G
45. 
    
46. 
    ) ^/ n" G+ k) q( s9 j8 H
47. }
    
48. #header div{
    ; i$ W  ^$ u+ r! l
49. background:none;
    / {0 c& h. E& x; c0 s) n+ {* |
50. 
    
51. 
    3 a  ?) e/ J% o- h: Q! G
52. }
    3 B' I) E( N0 }
53. #header h1{
    - S0 R$ {# ^; O* m8 e" b7 ^
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    
56. 
    
57. 
    
58. }

复制代码

AK47

这里还有个我自己做的 古剑奇谭 的风格代码。不过底部代码一直改不过来，显示不出，很是郁闷。
. q( t1 z3 `+ g% ~: n

1. /*登录条*/
   
2. 
   & Z2 L' Q. V. N+ x8 Z! I
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}
   4 k/ G( G% E, V4 w8 h' T7 p% U7 K
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. 
   0 ~( L5 E2 n) a7 {$ e
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   
10. 
    
11. BODY {scrollbar-face-color: #B91A07;
    $ ^2 N4 W/ K- Q* q; Y5 [& ?
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;
    5 J$ E+ l/ g- p  S; F
17. scrollbar-base-color:#F7F1D9;
    2 N! B3 M5 G+ H: K3 T
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    3 D! G4 C9 Z# l5 B. u& d
19. 
    
20. 
    
21. /*定义超级链接文字默认样式*/
    
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    ! N0 J6 i9 P. p" W5 o
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    3 }1 R" r  R+ X! T0 n/ O9 _
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. 
    
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    & B1 F. U* u( }9 W- z0 a1 c
29. 
    2 I/ s( ~9 o. e# R
30. /*底部*/
    : V! z5 D+ ]7 y2 A4 m
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; }/*底部背景*/
    9 M5 p' x2 c4 ?' U$ R/ J
33. 
    2 ^$ ]7 M% r9 e0 ~5 k( w
34. /*头部*/
    " F" O+ K0 U& W
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;}
    % B8 E+ ?: Q0 t- a) P7 L
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;}
    . V; l1 j% r1 f; q9 a! K' L6 ^
39. 
    0 Y0 p1 O3 l6 `1 X1 U2 s) v% S
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:微软雅黑;}
    $ k7 _% e. _  |# d3 y  V2 H: }8 z
43. 
    & t% |5 ?5 s* f9 y
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    
45. 
    7 T$ d4 i/ @* ~) Z' Z) x1 ^. S* d4 x
46. /*  导航栏  */
    
47. #tabline{display:none;}
    
48. #tab{left:620px;top:503px;position:center}
    
49. 
    ! |, t$ Z& T$ V3 Z: h
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;}
    ; ~) p, }' b, i6 J9 p6 w
51. #tab span{display:none;}
    
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    ; I0 q1 s) k# B; E1 R/ U
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    4 g) G( Z+ w4 H( L
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    8 b8 `9 e: j4 K+ Z$ ]* t
55. 
    
56. #tab2{background:       repeat-y;top:0px;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    ' _" @* J. A  b2 L! H
58. #tab2 { background-image: url(-);
    1 Q; k& y) ^( P3 J' F
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未选中状态*/
    ; _0 I  ^3 O: Y$ C
62. 
    5 p/ h* l2 h& @7 w4 \% b7 d- A
63. /*中部*/  
    
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    : Q5 r  A$ L7 D* B
68. #layout{  }
    $ ^! k" S: U  b
69. 
    
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    
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}
    
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    * L- {7 P' P, N) F/ `$ Q' [) V2 m! s
77. 
    
78. /*页码区域*/
    , U. F$ o) K  x8 s9 r) G3 E! s
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
    6 ?5 G4 m9 _- I
80. #page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
    & a3 ], X5 S# D
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    
82. #page a.pc:visited{}
    ) \% U' P! ^# ]5 H* l
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    
85. 
    1 a( Z9 [0 O5 Y; j& y5 J0 }6 P0 J  \- g
86. /*模块*/
    
87. 
    $ ]7 v; b" t5 [
88. .mod {margin-bottom:0px;}
    . L) E( w( V% h. q
89. .modhandle{cursor:move}
    
90. .modth{height:33px;}
    
91. .modhead{padding:0px 4px 5 4px;}
    
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
    * _# v& ?5 [: ^' `+ F* v8 h# d
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

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

听樊

顶楼主！
7 a9 V$ q! ^5 J7 _钓鱼岛是我们的！