【学村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;}
} 这里还有个我自己做的 古剑奇谭 的风格代码。不过底部代码一直改不过来,显示不出,很是郁闷。
/*登录条*/
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;}/*模块标题区(如文章列 吃了N久的前列康,好不容易这病情刚有点好转,一看这帖,这蛋又开始隐隐作疼了!歌,你这不是作孽么? 顶楼主!
钓鱼岛是我们的!
页:
[1]