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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
8 N5 p3 B2 l$ i" }
% I! d: j+ T% U2 T/ l. l                          
                         你将看到一个空白地方，现在我们就将编程写到里面：

                          
5 u! K3 W% {! W; B/ g                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
5 g+ z+ f3 J( y                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
* Y7 R; A4 ]& z  U2 j& K& g                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
; o# r8 o; F# g, j' H8 V( x                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。

  Y3 n3 {; ~* d3 t/ x9 Y
                        
                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
& J+ Y# N, v5 E4 c6 T                         color：是颜色。你可以自己去搜css颜色代码。
3 w3 z/ z- V4 I0 t7 q8 S" F                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
1 r$ u( ?+ O/ C8 Z& D0 e2 p                         font-size：是字体的大小。你可以随意调整。
                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
                         放在font-size：的下面。跟上面的对齐。


6 }( J( _6 a1 g  \5 X- ]
                        
: y: ?9 p4 O" Z! }' [% {* H+ A                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。
! e$ p6 |& G2 @+ u( L

1 c7 m! p* g* ?0 k7 g
! I% k  a( t: M9 o; [! X                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。
  I3 M. l: }" c/ X9 `
8 B1 `% o- f* v1 J

. m0 h* Q! d0 r+ r! C
4 J, s- f0 \% q7 D8 ]                        
' Z( T1 x9 z+ q5 g% |% t5 ~                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
% L0 o4 H0 W% k                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
1 N7 `/ F8 Y2 S& q; Q                        这个代码去掉就好。。。

: A7 Z/ A5 ~' }0 Q/ h4 D

0 T& c' ]7 D3 g7 u8 m
                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
# ]* j- x1 G* _, K0 V$ i8 Y                       后面还会继续更新。。。关于模板变换等等一系列。。。。



                     （PS：本帖转自工会一个姑娘的教程，非专业人士，不过很适合新手学习。有专业人士看到请在后面跟帖指教。）
: i" q  d. j3 y: ^+ [2 ?7 ]5 f: L

9 R3 m% H$ a9 h
* ~5 S' j2 r* R& W9 Z                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。
9 q1 S/ _( @$ |; a" n

, w% _5 e" j/ _) w! R
/ s% W& v  v  _. r$ u( q
为了大家方便，本人就直接把代码发出来，大家复制就好了，如果有想要调整的，就照着上面解说的改正好了。

1. body {
   
2. 
   * s' {# R8 K3 {- _( c) m( e
3. 
   $ e( V* f6 I7 K4 h# L: l' j
4. background: url(图片地址);
   
5. 
   4 c. V4 c6 U& J& G: V2 b
6. }
   9 }5 \) M) I, G) w$ X
7. 
   ! f6 j$ C  g4 O, B5 @0 v9 @! L) L
8. 
   9 ^! P% ^) s# W: l' E, x, w; x
9. 
   : Y, y+ ~% m, e5 m; f' u
10. 
    4 U# n8 d! ]3 L% _
11. body,td,th,div,ul{
    * n# t- u; T+ q3 ~, m1 R$ F( }6 ]
12. color: #0044BB ;
    
13. font-family: 楷体_GB2312;
    
14. font-size: 17px;
    
15. 
    . d4 ^: G7 o- c) y  ~
16. 
    
17. 
    ! }/ b* }5 e# i  N
18. 
    
19. }
    
20. 
    
21. a {
    
22. font-family:楷体_GB2312;
    2 i; H% j: I0 _, ~3 E0 p5 `
23. font-size: 14px;
    
24. color: #0044BB ;
    / u7 {& m1 o; S# H( `# o5 ^
25. }
    
26. a:link {
    
27. text-decoration: none;
    + k% x, `) B$ A: A- R/ v( o( ~
28. color: #0044BB  ;
    
29. }
    
30. a:visited {
    . N$ C4 s: F2 ^6 g! f0 H3 j; P
31. text-decoration: none;
    
32. color: #0044BB ;
    
33. }
    
34. a:hover {
    : S% C8 @$ I* {7 w7 V
35. text-decoration: none;
    
36. color: #0044BB ;
    - `. N& t" u& M. B3 F+ Q" Z* r
37. }
    
38. a:active {
    ( [; |9 t$ [: f, `( d
39. text-decoration: none;
    1 X6 ?* E# O% s- t
40. color: #0044BB ;
    
41. }
    
42. 
    
43. #header ul{
    
44. background:none;
    ! D. Z8 @; }2 O+ x" y9 D& }) Z
45. 
    
46. 
    2 z" O; S2 h! G+ r7 O, c9 G) m
47. }
    
48. #header div{
    
49. background:none;
    
50. 
    
51. 
    2 ]) m+ O( o8 {" v& f- C
52. }
    
53. #header h1{
    + j: T* I, z6 k- z
54. visibility:hidden;
    
55. {top:8px; left:40px;width:100px;height:300px;}
    / I6 S# \: s8 f: r7 z
56. 
    
57. 
    
58. }

复制代码

AK47

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

. G  D/ R8 |8 _

1. /*登录条*/
   * X2 E- ~4 l, ^+ _) q+ b& `
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;}
   . }  H3 ]) _* q( x! U
4. html body center div#usrbar a:hover{color:#999!important}
   2 d  g, G- I  s; Z) h; n$ m
5. img.down-arrow{border:1px solid #888888!important;filter:gray!important;background:url(http://.jpeg) no-repeat 50% 50%}
   " T" Y" ~* Y0 b$ s; H
6. #hi_index{}
   
7. #nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}
   
8. 
   2 U, i" l* B  [# h  u% o; y5 F
9. body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/
   
10. 
    
11. BODY {scrollbar-face-color: #B91A07;
    
12. scrollbar-shadow-color: #F7F1D9;
    3 ?$ k5 H- _; u/ ~7 }5 `
13. scrollbar-highlight-color: #F7F1D9;
    
14. scrollbar-3dlight-color: #F7F1D9;
    & D8 i3 z! ^! A. U
15. scrollbar-darkshadow-color:#F7F1D9;
    
16. scrollbar-arrow-color: #F7F1D9;
    ; u+ I3 `3 s* \5 R5 ~3 s4 K
17. scrollbar-base-color:#F7F1D9;
    " G9 B$ v1 ~8 X/ H
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
    9 ~1 y8 z  d8 c  _" v
19. 
    
20. 
    
21. /*定义超级链接文字默认样式*/
    ' T8 d" z1 H4 I+ m" x
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    : e3 Y% q: m+ M$ I( F$ g( l
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    ; ^' w' k! J- d1 O
24. 
    , h' }! L/ S+ q4 V& m1 j$ o: g# q
25. td.c2t3 a:link,td.c2t3 a:visited { font-size:12px; color: #6E5D4D; text-decoration: none;}
    / ?' A8 z: Q! F  e9 z
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; }
    + {/ i- ]9 B* T
29. 
    
30. /*底部*/
    
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; }/*底部背景*/
    
33. 
    2 `" @" I0 D2 m2 I. v5 ]5 b0 c
34. /*头部*/
    ! H6 b  O* k: U3 j/ _( K3 l+ ]
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;}
    " [# C8 f$ u, k: u; z
37. 
    & u$ P8 k' e' I' 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;}
    # o+ V9 G3 k0 B4 v
39. 
    . |/ ~  r/ b' J. ]2 g- e
40. #header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
    # D7 K# a2 |0 @7 B
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. 
    
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;}
    # U! v2 y3 i% B  @3 m) n: J
48. #tab{left:620px;top:503px;position:center}
    
49. 
    ( Z2 Q9 X6 F$ M# b
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;}
    , i' u! ~0 I- j8 A- m5 L- j5 b
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    
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. 
    5 T& Z& t* y/ v1 i0 S( |' F( L
56. #tab2{background:       repeat-y;top:0px;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    
58. #tab2 { background-image: url(-);
    
59. background-position: center top;}/*设置TAB菜单主体*/
    
60. #tab2 span { color:#dddddd; }/*TAB选中状态*/
    ! x) U9 f, J/ n6 G/ R: l3 i) E
61. #tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/
    2 ]0 D3 l( ?: J+ Y* U% L
62. 
    
63. /*中部*/  
    ) I- l. z- m! U% k! a0 a
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    * ^- W, M! f( P/ `' B' `
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    
68. #layout{  }
    ) c  p. g% F* m
69. 
    ' }; Q9 ~0 ?0 \, J5 G5 }0 K' r4 H/ ]
70. /*其它区域(即访问量等信息)*/
    
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
    
72. #comm_info div.line{
      B$ ~0 p8 j9 v2 Z/ u" \+ C: @
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}
    & j2 b" ]# F" K' T) S
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    : |8 z6 t2 W4 Z/ E
77. 
    
78. /*页码区域*/
    & n2 [/ u6 C: v' \; r( J% f, p( z2 a
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
    : H1 Z8 m0 K9 Z# v4 N# L6 D/ }! o0 ]
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}/*上一页和下一页*/
    
82. #page a.pc:visited{}
    ( e8 _! e2 J/ k+ c) w- h: f$ m
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    - N# x6 [: a. A. ]* E
85. 
    
86. /*模块*/
    
87. 
    2 S0 r8 Z+ o7 ~8 Z/ ~3 Q- y
88. .mod {margin-bottom:0px;}
    3 {0 j: v. F: B. `8 o* k7 Z; `
89. .modhandle{cursor:move}
    3 f0 f1 S& _) P! y% T
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 l6 [( ]! A+ F( `; v! `5 |钓鱼岛是我们的！