首先,我们从动望的默认CSS来解释,这个是默认的default.css

rwanboy17年前RWANBOY'S36
首先,我们从动望的默认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: #333html, 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}这里的表格用到的地方很多,比如道具中心和其他未定义部分的表格等其实,要制作简单的风格,你就只需要在颜色和图片上稍做修改即可,赶快动手吧,先自己做个风格看看也许我的解释哪里有错误,请大家指出,谢谢~

相关文章

Win2003下Asp配置技巧 http 500内部服务器错误

windows 2003粉墨登场,很多赶时髦的用户已经早就试用了,但尽管2003号称安全性有很大突破,但其默认支持.net架构,而抛弃使用了很久的大众化的Asp的路线缺饱受质疑,需要我们手动去配置很多...

打好民营企业内部报刊服务牌

打好民营企业内部报刊服务牌——在全省民营企业报刊座谈会上的的讲话丛建国听了大家的交流,我总的感觉是大家对办好内部报刊的意义认识十分清楚,民营企业内部报刊对宣传党的方针政策,促进...

漫步在青岛五四广场

漫步在青岛五四广场早就听人说,青岛的气候宜人,风光。一踏进青岛,果真名不虚传,天是湛蓝湛蓝的天,海是湛蓝湛蓝的海,海水清澈照人。在阳光的映照下,闪耀着耀眼的光亮。再加上绿树常青,绿草如茵,那红色的&n...

违法未处理

违法地点:瓯海大道西隧道出口(永强往市区方向)处 违法时间:2012-04-29 09:39:57 违法行为...

dos命令入侵大全

dos命令入侵大全#1 一: net use file://ip/ipc$ /user: 建立IPC空链接 net use file://ip/ipc$ 密码 /user:用户名 建立IPC非空链接...