2008-9-18 9:31:50
首先,我们从动望的默认CSS来解释,这个是默认的default.css
首先,我们从动望的默认CSS来解释,这个是默认的default.css
一:
/* copyright 2007 dvbbs, all rights reserved.*/
/* 全局定义 */
html, body { background: #fff url("../images/bodybg.gif") repeat-x; color: #333; line-height:18px; }
这个地方我们可以定义论坛的背景颜色 background: #fff url("../images/bodybg.gif") repeat-x; #fff就是颜色,你可以改个颜色,url("../images/bodybg.gif") repeat-x;背景图片,你把这个图片换个看看效果,当然,您也可以不使用图片,那么可以把 url("../images/bodybg.gif") repeat-x删除,然后修改background: #fff中的颜色代码,刷新首页看下效果吧~ 这个是论坛整体文字的颜色：color: #333
html, body, h1, h2, h3, h4, ul, li, dl, input { font-family:Arial, Helvetica, sans-serif; font-size:12px; list-style:none; margin:0px;padding:0px; }
div, p{ font-family:Arial, Helvetica, sans-serif; list-style:none; margin:0px;padding:0px; }
div, table {margin: 0 auto; }
a { color:#0365BF; text-decoration: none; }
color:#0365BF这里是论坛有连接的文字颜色text-decoration: none;无属性
a:hover { color:#f60; text-decoration: underline; }
color:#f60有连接文字鼠标悬停后的颜色text-decoration: underline;属性带下划线
hr { height:0px; border:0px; border-bottom:1px solid #E7F0F5; }
这个用在很多地方,比如友情连接中间那条线的颜色
img { border:0px; vertical-align: middle; }
.chkbox,.checkbox, .radio, button, input, select,textarea { vertical-align: middle; font-size:12px; }
.radio {border:none;}
二:
/* font style */
.white, .white a { color:white; }
.white a:hover { color:#ff7; }
.grey, .grey a, a.grey { color:#858D92; }
.green, .green a { color:#008000; }
.yellow, .yellow a { color:#f60; }
a.yellow:hover, a.green:hover { color:#666; }
.font10 { font-size:11px; color:#AFAFAF}
这个文字大小和颜色使用的地方就比较多了,例如帖子列表页的发帖日期,人气那的文字颜色等
.redfont {color:#ff0000; }
.bluefont {color:#0000ff; }
.font14 { font-size:14px; padding:10px 10px 0px 10px; line-height:24px; }
a.newlink { color:#333; text-decoration: none; }
首页版块名称颜色
a.newlink:hover {color:#f60;text-decoration:underline}
首页版块名称鼠标悬停后的颜色
a.testlink { color:#D35701; }
a.post_vote { background:url("../images/post/post_vote.gif") no-repeat; height:31px; line-height:31px; width:99px; display:block; margin-right:2px; text-align:center; text-decoration: none; margin-left:103px; margin-top:13px; }
a.post_vote:hover { background:url("../images/post/post_vote.gif") no-repeat; color:#222; }
a.post_reply { background:url("../images/post/post_reply.gif") no-repeat; height:31px; line-height:31px; width:99px; display:block; margin-right:2px; text-align:center; text-decoration: none; margin-left:103px; margin-top:13px; }
a.post_reply:hover { background:url("../images/post/post_reply.gif") no-repeat; color:#222; }
.checkbox { border:0px; }
回复,投票按钮图片式样
.limitinfo {overflow:hidden;clear:both;float:left;display:inline;padding:5px 10px;border: 1px solid #9CC3D9;margin:5px;border-top:3px double #9CC3D9;text-align : center;color:#00008B;background-color : #EDF5F9;}
.info {overflow:hidden;clear:both;float:left;display:inline;padding:5px 10px;border: 1px solid #9CC3D9;margin:5px;border-top:3px double #9CC3D9;text-align : center;color:#00008B;background-color : #EDF5F9;}
input { border-bottom:1px solid #BDC5CA; border-right:1px solid #BDC5CA; border-top:1px solid #6F787E; border-left:1px solid #6F787E; padding:3px 2px; font-size:12px; }
这里是输入框的式样,你可以修改成这样,.input { border:1px solid #BDC5CA;padding:3px 2px; font-size:12px;background:#fff; }
.input0{background:url("../images/button_bg.gif");border:1px solid #BDC5CA}
button { height:28px; line-height:28px; border:1px solid #C6D2E3; background:url("../images/button_bg.gif"); font-size:12px; }
.button_on { background:url("../images/button_bg2.gif"); border:1px solid #c3a336; }
.input_on { background:url("../images/button_bg2.gif"); border:1px solid #c3a336; }
按钮式样变换比如登陆,OK发表等按钮的变换
.mainbox, .header, .tablebox, .copyright { margin-top:10px; width:97%;min-width:960px; clear:both;}
整体表格宽度width:97%
.tablebox { margin-bottom:6px; margin-top:0px; }
.tablebox span a { padding:4px 6px; }
.topic {width:97%;}
.topic span a { padding:4px 6px; }
.bbslist{margin-bottom:10px; width:97%;}
.border { background:#fff; border:1px solid #C6D2E3; }
.borderthree { background:#fff; border:1px solid #C6D2E3; border-bottom:1px solid #C6D2E3; }
small { color:#858D92; font-size:12px;}
small a { color:#666; }
h1 { padding-left:15px; }
h3 { line-height:32px; background:#F1F7FB; margin-bottom:10px; border:1px solid #fff; }
h3 em { float:right; font-size:12px; font-weight:100; padding-right:10px; }
.padding { padding:8px; display:block; line-height:20px; }
br { line-height:10px; }
三:
/* 头部样式定义 */
.header { margin-top:0px; }
.header table { margin-bottom:15px; }
.menu { padding-left:20px; padding-top:2px; height:27px; background:url("../images/navmenubg.gif") repeat-x; border:1px solid #C0D3DE; font-family:"宋体" }
.menu span { float:right; padding:4px 10px 0 0 }
height:27px; background:url("../images/navmenubg.gif") repeat-x; border:1px solid #C0D3DE;导航条的背景图片background:url("../images/navmenubg.gif,高度height:27px,边框颜色border:1px solid #C0D3DE
四:
/*帖子列表、正文样式*/
.tableborder { background:#fff; border:1px solid #C6D2E3; }
列表页背景色background:#fff,边框border:1px solid #C6D2E3
.tableborder td { border-top:1px solid #E9EFF4; padding:6px 4px; line-height:16px; }
.heightd td { padding-top:4px; padding-bottom:4px; }
.topline { background:#F7FCFE; color:#222; text-indent:10px; line-height:24px; padding:0px; margin:0px; }
.list1 { width:50px; text-align:center; }
.list2 { text-align:left;font-size:14px; }
.list2 span { float:left; color:#858D92; padding-right:5px; }
.list3 { width:80px; text-align:left; }
.list4 { width:90px; text-align:left; color:#666; }
.list4 span { width:40px; display:block; float:left; text-align:right; color:#3D8324; }
.list5 { width:120px; text-align:left; color:#666; }
这里定义列表的状态,主题,作者,回复/人气,最后更新的宽度,字体颜色等等
th { background:#EEF7FC; line-height:32px; text-align:left; padding-left:5px; color:#333; }
状态,主题,作者,回复/人气,最后更新的背景颜色,你也可以用图片来显示,比如th { background:#fff; background-image : url("风格图片文件/bg.gif");height:25px;line-height:25px; text-align:left; padding-left:5px; color:#333; }
th span { float:right; font-weight:100; padding-right:10px; }
.thematic { line-height:24px; padding:4px 0px; margin-top:-11px; }
.thematic ul li { display:inline; line-height:24px; padding-left:5px; padding-right:5px; }
.username { font-weight:bold; height:24px; line-height:24px; }
.username div{float:left;}
.username img { float:right; padding-right:5px;}
font.showtools {color : white; background-color : #b88ffc; }
.usermenu { border-bottom:1px solid #E9EFF4; padding:2px 10px; height:26px; color:#858D92; }
.usermenu a { padding:4px 6px; }
.usermenu a:hover { padding:4px 6px; background:#FAFDFF; }
.usermenu2 { border-top:1px solid #E9EFF4; text-align:right; padding:2px 10px; height:26px; line-height:26px; font-family:'宋体'}
.usermenu2 a {line-height:26px;}
div.quote {margin :5px; border : 1px solid #cccccc; padding : 5px;background : #f9f9f9; line-height : normal;}
div.htmlcode {margin : 5px 20px; border : 1px solid #cccccc;padding : 5px;background : #fdfddf;font-size : 14px;font-family : tahoma, 宋体, fantasy;font-style : oblique;line-height : normal;}
/*
.usermenu2 span { float:left; background:url("../images/arrow.gif") no-repeat left center; padding-left:24px; }
*/
.imp {float:left; background:url("../images/arrow.gif") no-repeat left center; padding-left:24px;}
帖间文字广告
.usermenu em { float:right; font-style:normal; }
.inforight { font-size:14px; padding:15px; line-height:150%; height:200px;font-family:'verdana,宋体';}
.inforight ,.inforight p,.inforight div,.inforight li,.inforight span {line-height:150%;/*font-size:14px*/}
.inforight .font10 { font-size:11px; color:#AFAFAF; font-family:'Arial'}
.inforight ul li {list-style:inside disc}
.inforight ol li {list-style:inside decimal}
.inforight *{ line-height:150%;}
.infoleft { width:170px; border-right:1px solid #E9EFF4; }
帖间个人信息宽度,右边那条竖线的颜色
.leftcolor { padding-left:20px; }
.leftcolor em {font-style:normal; color:#9D9D9B; font-size:11px;}
.leftcolor span { display:block;}
.leftcolor span img { margin:2px 0px; }
.signed { padding:5px 15px; color:#858D92; }
五:
/* 公告样式 */
.rollboder { border: #DBE1E9 1px solid; height:32px; margin-bottom:10px; background:#F7FAFD;overflow:hidden; }
公告边框,背景色
.rollboder ul li { line-height:32px; }
.rollleft { float: left; line-height:32px;}
.rollleft strong { color: #333}
.rollcenter { border-right: #DBE1E9 1px solid; border-left: #DBE1E9 1px solid; float:right; text-align: center; width:30px; }
右边上一条,下一条那2条竖线的颜色
.rollright { float: right; width:40px; text-align: center; padding-top:0px !important; padding-top:6px;}
.rollright img { vertical-align: middle}
六:
/*首页版块列表(竖排)样式*/
.bbs_column0 { text-align:left; }
.bbs_column0 h2 { background:url("../images/title_bg.gif"); line-height:25px; font-size:13px; padding-left:24px; border:1px solid #C6D2E3; border-bottom:0px; width:auto; }
首页版面列表一级版面标题的背景图片background:url("../images/title_bg.gif"),边框border:1px solid #C6D2E3
.bbs_column0 h2 em { float:right; margin:4px 10px 0px 0px; line-height:15px; }
.bbs_column0 h2 em img { margin-right:3px; }
.bbs_column0 ul { margin-bottom:10px; padding:0px; border:1px solid #C6D2E3; border-top:0px; background:#fff; padding-bottom:10px; }
版面的背景background:#fff以及边框色border:1px solid #C6D2E3
.bbs_column0 ul table { margin:0px auto; width:98%; }
版面之间间隔线的宽度,可以定义为100%
.bbs_column0 ul table span { display:block; color:#666; }
.bbs_column0 ul table td { padding:3px 0px;}
/*首页版块列表(横排)样式*/
.bbs_column1 { text-align:left; }
.bbs_column1 h2 { background:url("../images/title_bg.gif"); line-height:25px;padding-left:24px; font-size:13px; margin:0px;border:1px solid #C6D2E3; border-bottom:0px; width:auto;}
.bbs_column1 h2 em { float:right; margin:4px 10px 0px 0px; line-height:15px;}
.bbs_column1 h2 em img { margin-right:3px; }
.bbs_column1 ul { margin-bottom:10px; padding:0px; border:1px solid #C6D2E3; border-top:0px; background:#fff; padding-bottom:10px; }
.bbs_column1 ul table { margin:0px auto;width:98%; }
.bbs_column1 ul table span { display:block; color:#474747; }
.bbsboxon { background:#FAFDFF; }
.bbsboxon td{border-bottom:1px solid #E7F0F5;}
.bbsboxout { background:#fff; }
.bbsboxout td{border-bottom:1px solid #E7F0F5;}
版面整体背景颜色和底部那条线的颜色
.today { width:52px; height:51px; float:left; background:url("../images/digg_blue.gif") no-repeat center top; margin:5px; text-align:center; color:#217AB3; font-weight:bold; font-size:12px; line-height:23px; font-family: Georgia, "Times New Roman", Times, serif; }
.today p { display:block; font-weight:100; margin:0px; padding:0px; border:0px; color:#858D92; font-size:11px; }
.todaynew { width:52px; height:51px; float:left; background:url("../images/digg.gif") no-repeat center top; margin:5px; text-align:center; color:#f60; font-weight:bold; font-size:12px; line-height:23px; font-family: Georgia, "Times New Roman", Times, serif; }
.todaynew p { display:block; font-weight:100; margin:0px; padding:0px; border:0px; color:#858D92;}
今日有新帖无新帖的图片以及文字颜色
.underline td{border-bottom:1px solid #E7F0F5;}
七:
/*首页右边部分*/
.page_right { width:220px; float:right; background:#fff; }
.page_right ul { width:220px; border:1px solid #C6D2E3; margin-bottom:10px; }
右边整体背景,宽度以及边框颜色
/*首页圈子列表样式*/
.nav_group ul { border:0px; }
.nav_group ul li { margin:9px 0px; line-height:18px; color:#666; width:100%; }
.nav_group ul li em { float:right; padding-right:5px; }
.nav_group ul li div { margin:2px 5px 5px 5px; border:1px solid #ededed; padding:2px; width:48px; float:left;}
.nav_group2 { float:left; display:inline; width:49%; }
.nav_group2 ul li { margin:5px 0px; line-height:18px; color:#666; overflow:hidden; height:auto; }
.nav_group2 ul li div { margin:5px; border:1px solid #ddd; padding:2px; width:42px; float:left;}
/*首页右边帖子列表样式*/
.nav_topic ul { background:url("../images/hot_topic_bg.gif") no-repeat; border:0px; width:210px}
.nav_topic ul li { padding-left:30px; height:24px; line-height:24px; overflow:hidden;}
.nav_topic ul li em { float:right; padding-right:5px; }
八:
/*用户中心切换*/
#Tab{ width:auto; padding:0px; margin:13px auto 10px auto;}
.Menubox { width:auto; background:#fff url("../images/tab_bg.gif") repeat-x bottom; height:29px; line-height:29px; font-weight:bold; color:#f60; }
友情连接和当前在线互换,右边部分都用到,还有其他,比如专题,版面规则变换等
.Menubox ul{ margin:0px; padding:0px; }
.Menubox li{ float:left; display:block; cursor:pointer; width:auto; line-height:27px; line-height:27px; margin-right:3px; text-align:center; color:#666; padding:0px 12px; border:1px solid #C4D8ED; border-bottom:0px; background:#EEF7FD; font-weight:100; }
.Menubox li.hover{ padding:0px; width:auto; border:1px solid #C9DEFA; border-bottom:0px; background:#fff; color:#222; height:28px; line-height:28px; padding:0px 12px; font-weight:bold; }
.Contentbox{ margin-top:0px; border:1px solid #C4D8ED; border-top:0px; padding:8px; }
.subHover {line-height:26px; padding:0px 20px;background:#F1F7FB; color:#0365BF; font-weight:bold; line-height:28px;cursor:pointer;}
.subOut {line-height:26px; padding:0px 20px;cursor:pointer;}
九:
/* 首页底部友情链接和论坛统计样式 */
.friendlink { line-height:26px; padding:0px 10px; }
这里加一个height:100%可以解决友情连接表格断线的问题比如 .friendlink {height:100%; line-height:26px; padding:0px 10px; }
.friendlink ul { padding:5px 0px;}
.friendlink ul li {width:100%;line-height:18px;text-align:left; }
.friendlink ul li div {float:left; padding-right:3px;}
.friendlink ul li img { padding-right:5px;margin-bottom:5px}
.count { text-align:left; line-height:24px; }
.count ul { padding:5px 0px 0px 20px;}
/*控制面板*/
.control{line-height:26px;padding:0px 20px;cursor:pointer;}
/*.control ul { padding:10px 0px;}
.control ul li { width:100%; text-align:left; }
.control ul li div { width:65px; float:left; padding-right:3px;}
.control ul li img { padding-right:5px;}*/
这里的颜色等具体的后台模板里修改
十:
/* 底部版权信息部分样式 */
.copyright { border-top:1px solid #C6D2E3; padding-top:10px; padding-bottom:10px; line-height:18px; text-align:left; margin-top:15px; font-size:11px; color:#9D9D9B; }
版权和广告的间隔线颜色border-top:1px solid #C6D2E3居上,居下padding-top:10px; padding-bottom:10px;式样居左text-align:left,可以改成居中显示text-align:left;文字的颜色大小font-size:11px; color:#9D9D9B;
.copyright em { float:right; font-style:normal; padding-right:10px; }
.copyright span { padding-left:10px; display:block; }
.ad {padding:5px;text-align:center;}
底部广告居中显示
/*注册和登录界面样式*/
.tableborder li { padding:2px; height:30px; color:#999; }
.tableborder li p { float:left; width:140px; text-align:right; display:block; padding:2px 8px; color:#333; }
.titlebig { padding-left:20px; font-size:14px; }
.TextBoxFocus { background:#E3FAD5; border-bottom:1px solid #CDD8C0; border-right:1px solid #CDD8C0; border-top:1px solid #89A16E; border-left:1px solid #89A16E; }
.TextBox { background:#fff; }
输入框鼠标悬停颜色变换
.tron { background:#FAFDFF; }
.trout { background:#fff; }
很多人不知道帖子列表的颜色变换在哪,其实就在这里,你修改下颜色就知道了~
.forminfo{color:#C0C0C0;border:none;padding:1px;margin-left:5px;}
.forminfo1{color:#ff0000;padding:1px;margin-left:5px;}
.tb{width:152px !important;width:150px;text-align:right; font-size:14px;color:#333;}/*reg table*/
十一:
/*表格部分*/
table {width:97%}
.tabletitle1{background-color : #EDF5F9;border:1px solid #B4C6DA}
.tabletitle2{background-color : #EDF5F9;}
.tablebody4 {background-color : #fff;line-height : normal;padding:10px}
.tablebody1 {background-color : #fff;line-height : normal;border-right:1px solid #E7F0F5;}
.tablebody1 li{list-style:inside;}
.tablebody2 {background-color : #EDF5F9;line-height : normal;border-right:1px solid #E7F0F5;}
.tablebody3{background-color : #6E98C5}
.tableborder1{ border:0px;background-color : #C6D2E3; padding:0px}
.tableborder1 td{padding:3px 0px 3px 2px;color:#666}
.tableborder2{background:#F7FDFF;border:1px solid #9CC3D9;padding:3px 0px;}
.tableborder3{border-left : 1px solid #9CC3D9;border-right : 1px solid #9CC3D9;border-top : 0px;border-bottom : 0 solid #9CC3D9;background-color : #efefef}
.tableborder4 {border : 1px solid #9CC3D9}
.tableborder5 {border : 0px;}
.tableborder6{border : 0px;background-color : #fff}
这里的表格用到的地方很多,比如道具中心和其他未定义部分的表格等
其实,要制作简单的风格,你就只需要在颜色和图片上稍做修改即可,赶快动手吧,先自己做个风格看看
也许我的解释哪里有错误,请大家指出,谢谢~