AK47 发表于 2010-1-30 20:04:25

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

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

                        http://home.yiduo.org/attachment/201001/29/3644_1264775948Ro10.jpg
                         你将看到一个空白地方,现在我们就将编程写到里面:

                        http://home.yiduo.org/attachment/201001/29/3644_12647761355gtJ.jpg
                        这是整个页面背景,括号里面放上你需要的图片背景。有几种模式的,比如横向、纵向等重叠:
                        background-repeat: no-repeat;   不重复
                        background-repeat: repeat;      重复
                        background-repeat: repeat-x;   横向重复
                        background-repeat: repeat-y;   纵向重复
                        不用这些代码时,背景的图片编程就是默认的,如果你照片比较小,它就会自动重复。
                        如果你不需要重复,就把不重复的代码放在括号的后面,但是在大括号的里面。


                         http://home.yiduo.org/attachment/201001/29/3644_1264776705GWzt.jpg
                         接下来的这个,就是代表整个页面的行,列,字体,颜色等。
                         color:是颜色。你可以自己去搜css颜色代码。
                         fone-famil:是字体。你也可以更换你所喜欢的几种字体。
                         font-size:是字体的大小。你可以随意调整。
                         如果有喜欢字体加粗的朋友,可以加上:font-weight: bold;    这个代码。
                         放在font-size:的下面。跟上面的对齐。



                         http://home.yiduo.org/attachment/201001/29/3644_12647770995EWi.jpg
                         这个前面加a的,是超链接的字体颜色的。跟上面一样。。。只是换了下秩序。



                         http://home.yiduo.org/attachment/201001/29/3644_1264777299k5g3.jpg
                         而这四个不用管,照着填上就好了。只是需要改变颜色的时候,不要忘记了在
                         color:这在后面都加上代码。只要看着是放颜色的,后面都放上你需要的颜色代码。




                        http://home.yiduo.org/attachment/201001/29/3644_1264777638QMbq.jpg
                        而这个就是我们的顶部所需要的了。横幅透明化。不用更改,直接照着填上就好。
                        如果你不喜欢顶部有空白,那么就把{top:8px; left:40px;width:100px;height:300px;}
                        这个代码去掉就好。。。




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



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



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




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


body {


background: url(图片地址);

}




body,td,th,div,ul{
color: #0044BB ;
font-family: 楷体_GB2312;
font-size: 17px;




}

a {
font-family:楷体_GB2312;
font-size: 14px;
color: #0044BB ;
}
a:link {
text-decoration: none;
color: #0044BB;
}
a:visited {
text-decoration: none;
color: #0044BB ;
}
a:hover {
text-decoration: none;
color: #0044BB ;
}
a:active {
text-decoration: none;
color: #0044BB ;
}

#header ul{
background:none;


}
#header div{
background:none;


}
#header h1{
visibility:hidden;
{top:8px; left:40px;width:100px;height:300px;}


}

AK47 发表于 2010-1-30 20:04:58

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

/*登录条*/

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;}
html body center div#usrbar a:hover{color:#999!important}
img.down-arrow{border:1px solid #888888!important;filter:gray!important;background:url(http://.jpeg) no-repeat 50% 50%}
#hi_index{}
#nav_extra .top a,#nav_extra .body a{color:#545454!important;text-decoration:none!important}

body{background: #F5D79B;overflow-x:hidden;color:#6E5D4D;}/*网页背景主体颜色*/

BODY {scrollbar-face-color: #B91A07;
scrollbar-shadow-color: #F7F1D9;
scrollbar-highlight-color: #F7F1D9;
scrollbar-3dlight-color: #F7F1D9;
scrollbar-darkshadow-color:#F7F1D9;
scrollbar-arrow-color: #F7F1D9;
scrollbar-base-color:#F7F1D9;
scrollbar-track-color:#F7F1D9}/*整个空间页面*/


/*定义超级链接文字默认样式*/
a:link,a:visited { font-size:12px; color:#6E5D4D; text-decoration:none ;}
a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #6E5D4D; text-decoration:underline ;}

td.c2t3 a:link,td.c2t3 a:visited { font-size:12px; color: #6E5D4D; text-decoration: none;}
td.c2t3 a:hover{ font-size:12px; position:relative;left:1px; top:1px; color: #BA3836; text-decoration: underline;}

#phx{FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=2, StartX=60, StartY=40, FinishX=5, FinishY=2) gray(); WIDTH: px; HEIGHT:66px; }

/*底部*/
#main{ width:1024px!important;
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; }/*底部背景*/

/*头部*/
#header {height:550px!important;
background-image: url(http://image215.poco.cn/mypoco/myphoto/20100123/23/450692520100123231913051.jpg); background-repeat:no-repeat;background-position: center top;}

#header DIV.lc {BACKGROUND:       repeat;left:50px;width:900px;height:300px!important;filter:Alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;}

#header div.tit{top:-100px;left:80px;font-size:20px;line-height:50px;color:#362627!important;text-align:center;font-family:微软雅黑;}
#header div.tit a.titlink{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}
#header div.tit a.titlink:visited{font-size:17px;text-decoration:none;color:#362627!important;font-family:微软雅黑;}

#header div.desc { top:-100px; left:80px; color:#362627; font-size:13px; width: 380px; text-align:left;line-height: 25px;}/*空间简介*/

/*导航栏*/
#tabline{display:none;}
#tab{left:620px;top:503px;position:center}

#tab a.on,#tab a.on:link,#tab a.on:visited{color: #F7F1D9;text-decoration:none;font-size:14px;font-weight:bold;BACKGROUND:#B91A07;}
#tab span{display:none;}
#tab a:link{color:#362627;text-decoration:none;font-size:12px}
#tab a:visited{color:#362627;text-decoration:none;font-size:12px;}
#tab a:hover{color:#F7F1D9;text-decoration:none;font-size:12px;font-weight:bold;BACKGROUND:#B91A07;}

#tab2{background:       repeat-y;top:0px;}
#tab2 span{color:#362627;font-size:12px;font-weight:bold}
#tab2 { background-image: url(-);
background-position: center top;}/*设置TAB菜单主体*/
#tab2 span { color:#dddddd; }/*TAB选中状态*/
#tab2 a, #tab2 a:link, #tab2 a:visited {font-size:12px!important; color:#dddddd}/*TAB未选中状态*/

/*中部*/
.stage{ background-image: #F5D79B }/*(TAB菜单与版权信息之间的区域)*/

.stagepad{ width:auto;margin:0 auto;}

#layout{}

/*其它区域(即访问量等信息)*/
#comm_info{color: #6E5D4D;font-family:Georgia;text-align:left}
#comm_info div.line{
background-image:url(-);background-repeat: no-repeat;background-position: center;background-attachment:;margin-top:5px;line-height:96px;border-top:2px}
#m_comm_info img{display:none}
#comm_info a{text-decoration:none;color:#6E5D4D}
#pvshow{font-family:Georgia;font-size:14pt;color: #6E5D4D}

/*页码区域*/
#page {height:30px;font-size:12px;font-family:Georgia;text-align:center}/*主体*/
#page span {padding:3px;color:#6E5D4D;font-size:14px;font-weight:bold;font-family:Georgia;}/*当前页码(不可点击)*/
#page a.pc {font-size:14px;font-weight:bold}/*上一页和下一页*/
#page a.pc:visited{}
#page a.pi {padding:3px;;font-size:12px}/*页码(可点击)*/
#page a.pi:visited{}

/*模块*/

.mod {margin-bottom:0px;}
.modhandle{cursor:move}
.modth{height:33px;}
.modhead{padding:0px 4px 5 4px;}
.modopt {padding:4px 4px 0 0}/*模块操作区(如写新文章)*/
.modtit, a.modtit, a.modtit:visited{color:#FFFFFF;font-size:13px;font-weight:bold;text-decoration: none;}/*模块标题区(如文章列

胸毛哥哥 发表于 2010-1-30 21:30:46

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

听樊 发表于 2010-1-30 23:01:26

顶楼主!
钓鱼岛是我们的!
页: [1]
查看完整版本: 【学村CSS】教你如何美化自己的空间。