5Q校内网班级主页美化代码及高级详细教程

其实原理和美化个人主页是一样的
进入: 管理班级-> 班级美化

1, 先来个简单的, 在输入框输入
<style type="text/css">
body{background: #f0f0f0;}
div{color: #ff0066}
</style>
然后保存看看效果

2, 复杂一点,
<style type="text/css">
body{background: #e8e8e8;}/*页面的背景色*/
*{color: #171717}/*一般的文字颜色*/
a{color:#E88BA2}/*链接的文字颜色*/
.box{border: 1px solid #9C1F68; }/*每个模块的边框色*/
.box h3{color: #E88BA2; background: #9C1F68}/*每个模块标题的文字颜色背景颜色,*/
.box .boxcont{background: #E8E8E8; }/*每个模块内容区的背景颜色*/
</style>

效果图如下:


 

3, 高级自定义
在这个样式里,实现了左右列交换位置,变化列宽度,修改导航颜色等等,

<style type="text/css">
body{background: #202328;}/*背景颜色*/
*{color: #fff}/*一般文字的颜色*/
a{color:#ffa740}/*链接文字的颜色*/
.box h3{color: #00a0c6; background: #2e3135; border:none; border-bottom:2px solid #333}/*模块标题的颜色、背景色，边框*/
.box .boxcont{background: transparent }/*模块中内容部分的背景色为透明*/

.talk .info { padding:0 5px; border:none ; background: #2e3135; line-height:20px; text-align:right;}/*每条留言中显示留言者、留言时间的横条的样式*/
.talk .picture img{border:1px solid #666}/*留言列表中头像的边框*/
.talk .info .author{color: #666}/*留言列表中留言者字体颜色，无链接时*/
#header{background: #00a0c6; height: 50px}/*顶部导航的背景色*/
#navigation{ background: #00a0c6; border:none}/*主导航的背景色，边框*/
#header #tagline,#utility{background: #00a0c6; border:none;}/*主导航上面的网站标语、欢迎信息的背景色，边框*/
.rapidlist td{background: transparent}/*忘了-_-!! */
#content{ float:right; overflow:hidden; padding:5px 0 0; width:760px;border-left:1px solid #2d3035; border-right:1px solid #2d3035;border-bottom:1px solid #2e3135;}/*主内容区样式*/
#sidebar{display:none;}/*隐藏左边的个人导航*/
#content .xui-gf  { float:right; width:520px; }/*设置主内容区右列宽度，右浮动*/
#content .xui-g  { float:left; width:210px; background: #35383E}/*设置主内容区左列宽度，背景色，左浮动*/
#inviteurl{background: transparent}/*设置班级链接文本框的背景为透明*/
textarea{color:#333}
</style>

效果图
 




最后推荐一个配色小工具,希望大家都能把自己的班级主页装点的漂漂亮亮
http://fm021.img.xiaonei.com/schoolclass/20070325/1415/A3534156FA.swf
工具预览图: