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

AK47

首先，我们打开集美学村网，点右上角的设置，点开个人设置里的主页风格。然后选进入自定义风格，进入设置界面。
/ P7 ]+ h) z* v* @3 D; }. W) x/ e
1 X2 D6 S' I8 g2 ]0 S! j                          
7 a& [" {" j# s" D& }' O' l; U                         你将看到一个空白地方，现在我们就将编程写到里面：
2 t6 b6 L/ U& O- H2 v- F2 R
                          
; {* Z% Q) p8 ]. b: @                          这是整个页面背景，括号里面放上你需要的图片背景。有几种模式的，比如横向、纵向等重叠：
                          background-repeat: no-repeat;   不重复
                          background-repeat: repeat;        重复
                          background-repeat: repeat-x;     横向重复
                          background-repeat: repeat-y;     纵向重复
9 r2 L* g5 V6 e1 @- N3 A                          不用这些代码时，背景的图片编程就是默认的，如果你照片比较小，它就会自动重复。
$ `7 j3 s) D9 C' _5 Y# P0 B                          如果你不需要重复，就把不重复的代码放在括号的后面，但是在大括号的里面。


                        
. h' \6 w9 S$ Z2 T. @0 A; t4 S                         接下来的这个，就是代表整个页面的行，列，字体，颜色等。
                         color：是颜色。你可以自己去搜css颜色代码。
7 E1 |  V; |5 A/ A( A1 i                         fone-famil：是字体。你也可以更换你所喜欢的几种字体。
                         font-size：是字体的大小。你可以随意调整。
                         如果有喜欢字体加粗的朋友，可以加上：font-weight: bold;    这个代码。
# n. P! \( a: D6 T& Z+ F0 \6 Q                         放在font-size：的下面。跟上面的对齐。

  g' a- x2 I3 M

                        
1 r* Y& I  e. d                         这个前面加a的，是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。
; D. v; P3 \" g& t1 @; Z0 l5 A


                        
                         而这四个不用管，照着填上就好了。只是需要改变颜色的时候，不要忘记了在
                         color：这在后面都加上代码。只要看着是放颜色的，后面都放上你需要的颜色代码。



) A4 r6 q* K3 e0 O' m$ j
                        
                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改，直接照着填上就好。
                        如果你不喜欢顶部有空白，那么就把{top:8px; left:40px;width:100px;height:300px;}
                        这个代码去掉就好。。。



! z: O6 l& O6 |8 N0 |. z. S
                       好了，我们的简易教程也完了。现在大家动手把我们的家弄成自己心目中的模样吧。。。。
+ D  G6 M9 v& V+ X' n3 ?                       后面还会继续更新。。。关于模板变换等等一系列。。。。
. z) q+ ?6 T5 L. i  _  q


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

2 o* ^. c) H2 @3 |" f- d3 S# v! a2 t

                  还有就是每个人电脑大小不一样，所以看到的图片也许会不完整。
% P8 v) K8 G* \* y+ J! N
' L/ D, a& U! q) n( v2 A' g7 O


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

* i- J. o% [+ F8 @9 F3 C0 D& w) ^) o

1. body {
   ! U# }  I  i) E5 D) P5 V
2. 
   
3. 
   
4. background: url(图片地址);
   # Q6 v1 V- ?. U) K/ T
5. 
   
6. }
   0 `5 J5 _6 j0 i3 A
7. 
   
8. 
   $ S* R( A0 A% G  b; h" @( y
9. 
   
10. 
    
11. body,td,th,div,ul{
    * Q9 A6 {& O+ N' |9 k' ^
12. color: #0044BB ;
    
13. font-family: 楷体_GB2312;
    ; O5 ^' F( ]( Q( a
14. font-size: 17px;
    
15. 
    
16. 
    , @9 S/ {+ C; Q/ W! J" k7 v
17. 
    $ Z) h4 j4 V3 d$ ~8 V( t8 v
18. 
    
19. }
    
20. 
    
21. a {
    
22. font-family:楷体_GB2312;
    1 ^3 v4 z9 e5 N+ F0 G) f
23. font-size: 14px;
    % ^5 X. u0 Z$ x0 J# j
24. color: #0044BB ;
    4 z( M6 G2 H5 l9 V& V4 ]$ ?
25. }
    ' |, N* p' b+ K( L, y) v
26. a:link {
    
27. text-decoration: none;
    
28. color: #0044BB  ;
    
29. }
    + }4 N$ x& D% v5 z9 E7 [8 `9 A; R
30. a:visited {
    " a" ~0 n1 L; g' {6 f+ a
31. text-decoration: none;
    
32. color: #0044BB ;
    
33. }
    ) ]7 f7 k" V" f( _% H
34. a:hover {
    3 ~+ l1 _" j- {: ]
35. text-decoration: none;
    
36. color: #0044BB ;
    2 i  z' M- `6 p* P
37. }
    
38. a:active {
    ) ~. J! R- Y- m% u
39. text-decoration: none;
    
40. color: #0044BB ;
    ) t- [' p. E" r! `  R2 L
41. }
    - q/ v. @( ^' v6 p. Y
42. 
    7 b' I  O/ S0 b" l. k, W+ \9 B
43. #header ul{
    
44. background:none;
    
45. 
    # |, D- W# Z5 A& d8 [6 n) x
46. 
    
47. }
    
48. #header div{
    
49. background:none;
    
50. 
    ( n' K# j" Q3 U: h' A8 i8 Y- [" y
51. 
    
52. }
    
53. #header h1{
    
54. visibility:hidden;
    . P( L: W& ]& F5 [! y( V8 w' Q
55. {top:8px; left:40px;width:100px;height:300px;}
    ( C6 E( }2 ~- o& s, Z
56. 
    
57. 
    ) D* M$ I* m: j
58. }

复制代码

AK47

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

1. /*登录条*/
   
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;}
   + ]* b! H6 n( Y. @6 _, T
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. #hi_index{}
   * u0 v( o$ q( [1 P
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;}/*网页背景主体颜色*/
   + }" Y2 Q# N' s9 K: ?7 j; q
10. 
    0 U9 K, V# N' k9 _, y/ d( ~
11. BODY {scrollbar-face-color: #B91A07;
    
12. scrollbar-shadow-color: #F7F1D9;
    2 n* t! X- v* _5 |& u
13. scrollbar-highlight-color: #F7F1D9;
    + y0 p  ]6 Z# g2 F% ?
14. scrollbar-3dlight-color: #F7F1D9;
    ' n/ y% X6 f& T2 j5 [8 \
15. scrollbar-darkshadow-color:#F7F1D9;
    6 j, \, f. ~3 ~9 R! J! f  c
16. scrollbar-arrow-color: #F7F1D9;
    
17. scrollbar-base-color:#F7F1D9;
    # W- u) |1 E* B4 m
18. scrollbar-track-color:#F7F1D9}/*整个空间页面*/
      d% d% O0 I  b; F7 j
19. 
    - X; Q% \; d5 ?, {% C
20. 
    
21. /*定义超级链接文字默认样式*/
    
22. a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
    / S) ]7 t4 y2 j
23. a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}
    / Y/ w1 w! M8 ]  x# q3 D
24. 
    
25. td.c2t3 a:link,td.c2t3 a:visited { font-size:12px; color: #6E5D4D; text-decoration: none;}
    + Y/ e% R4 S% |# S, d5 E& F; Z
26. td.c2t3 a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #BA3836; text-decoration: underline;}
    
27. 
    6 F' p1 V- g; Z+ A% s
28. #phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }
    
29. 
    6 e7 y- t  S4 ~% \/ O% O' {  z
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; }/*底部背景*/
    2 }( i: Z" _; V* O! S0 P
33. 
    
34. /*头部*/
    5 B' {$ H2 t4 s, h  M, C
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;}
    
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:微软雅黑;}
    
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:微软雅黑;}
    $ g+ }9 ~% T9 @' L, p
43. 
    % k8 z2 {2 i' L+ o( q  T+ l
44. #header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/
    # v" {6 Z' o9 n- b8 J7 i+ [
45. 
    
46. /*  导航栏  */
    
47. #tabline{display:none;}
    ' X8 U, l& R2 n- y  f! |4 B2 T
48. #tab{left:620px;top:503px;position:center}
    
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;}
    0 q) f5 u. h/ Z8 O. g
52. #tab a:link{color:#362627;text-decoration:none;font-size:12px}
    6 {2 I* ]( ]* x3 n9 }. b
53. #tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
    ) h0 k! d0 x( p( W; c2 v
54. #tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}
    
55. 
    . @: }9 u4 G4 a0 {- f
56. #tab2{background:       repeat-y;top:0px;}
    
57. #tab2 span{color:#362627;font-size:12px;font-weight:bold}
    
58. #tab2 { background-image: url(-);
    6 |% R% ?7 T; B# z  J
59. background-position: center top;}/*设置TAB菜单主体*/
    6 d! L  {& A3 r/ X) c, {+ Q
60. #tab2 span { color:#dddddd; }/*TAB选中状态*/
    
61. #tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/
    " X) }0 a4 E! d3 H' M+ d( i
62. 
    . S9 ]+ }( v/ C# o
63. /*中部*/  
    
64. .stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/
    
65. 
    0 l8 x2 `( H/ m1 H6 W# D# @$ P
66. .stagepad{ width:auto;margin:0 auto;}
    
67. 
    $ r! Q( d, y6 y  J# K- N
68. #layout{  }
    
69. 
    / w$ Z2 ~1 z4 I( G5 U, @( R; u% O- w
70. /*其它区域(即访问量等信息)*/
    : c  K/ e& h% x2 u! x
71. #comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
      V8 B: z# y- U' Z" b) o
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}
    ) F2 N4 k9 \$ x& B% G' y
74. #m_comm_info img{display:none}
    ! x, ?8 U6 r6 ~2 N6 @
75. #comm_info a{text-decoration:none;color:#6E5D4D}
    3 ~. j& _% U0 C7 M" u6 e3 T
76. #pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}
    : j4 @: g' u4 }1 I" |* ?
77. 
    : V) o# p: t' f  S! F: c0 ~+ b
78. /*页码区域*/
    
79. #page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
    ! H! k* [' S1 w/ C$ v
80. #page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
    5 M: b! {* ^" B- U) K
81. #page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
    ' P) _; j- q4 D% a
82. #page a.pc:visited{}
    
83. #page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
    
84. #page a.pi:visited{}
    
85. 
    % D) }9 F! l& D4 e4 i6 x2 j
86. /*模块*/
    
87. 
    , T0 g8 X6 x7 |" n
88. .mod {margin-bottom:0px;}
    7 q6 ^. o, e) w6 i# ~+ o
89. .modhandle{cursor:move}
      U2 }3 ~3 V+ ^( L% E/ J
90. .modth{height:33px;}
    
91. .modhead{padding:0px 4px 5 4px;}
    
92. .modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
    4 K5 a5 I2 U/ s8 J4 j2 K
93. .modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

复制代码

胸毛哥哥

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

听樊

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