有关Bo-blog模板制作（一）
定义ＣＳＳ样式，代码如下：
.first {FONT-WEIGHT: bolder; FONT-SIZE: 230%; FLOAT: left; COLOR: #990000; LINE-HEIGHT: 1.3em; background-color: #E4E4E4}
代码介绍如下：
Font-weight:bolder 定义字体的粗细，我们这里设置成特粗；
Font-size:230% 定义字体的大小；
Float:left 定义字体的浮动方式，这里设置左对齐；
Color:#990000: 定义字体的颜色值；
Line-height: 定义字体的行高；
Background-color: 定义字体的背景颜色。
你也可以使用ＤＷ定义ＣＳＳ的方法，一一进行设置。
至此，我们的效果便制作好了，你不仿试试！
[file][attach]21[/attach][/file]
BO-BLOG模版CSS中文注释[转]
转自BOBLOG论坛 作者：g100870516
第一段body
body {
font-size: 12px;
font-family: Tahoma, Arial;
background: #CFD7DB url(\’images/bg.jpg\’) repeat-x;
margin: 2px;
padding: 0px;
margin-bottom: 10px;
text-align: center;
}
/*** body是整个网页的属性，font-size,background,margin 等 这些代码都可以才css手册里查到用处，只不过有的解释的太专业，看了也是不明白。background这段中 #CFD7DB 是代表颜色，颜色代码可以用颜色吸取工具查到，url(\’images/bg.jpg\’)是带表背静图片。看了我要改的那个风格的页面，背静图片自己改截下来，背静色是#5DC4F2，改代码覆盖图片 ***/
table {
font-family: Tahoma, Arial;
color: #000000;
font-size: 12px;
}
/*** 这里改的是列表页面的字大小，改这个的时候，日历上面的年和月也变，-。- ，这里我不改***/
td{
word-break: break-all;
}
/*** 这里是改英文单词换行那方面的，不需要改 ***/
a {
text-decoration: none;
color: #CC3333;
}
/*** 这里是 含有连接的文字的颜色，因为侧边框内的文字改了那里的颜色，有连接的颜色还是在这里改的，为了美观，建议改到那的时候回来改一下 ***/
a:hover {
text-decoration: none;
color:#CC3333;
}
/*** 连接文字 鼠标移动上去的时候变的颜色 ***/
hr {
height: 1px;
border: 0;
border-top: 1px solid #CCCCCC;
}
/*** 这段第一次出现1px solid #CCCCCC这个代码，这个代码的意思就是描边，但我改了颜色没发现哪里变了，后面在说，只要是再后面 ***/
input.button {
height: 20px;
border: 1px solid #FFDCE9;
border-top: 1px solid #FFDCE9;
border-left: 4px solid #FFDCE9;
color: #000000;
background-color: #FFFFFF;
}
/*** 这里是搜索框内按扭的属性，height是按扭的高，border是按扭右边和下面的描边，top是上边，left是左边，color是字颜色，background-color是按扭的背静色，这些代码在下面就很常见了，而且大多数改的就是他们，这里我把边框颜色改为#FFDCE9，文字黑，背静白 ***/
select {
font-family: Tahoma, Arial;
font-size: 12px;
color: #564148;
background-color: #FFFFFF;
border: 1px solid #7F9DB9;
}
/**** 这里是下拉菜单的属性 这我改了文字颜色和描边颜色 **/
#wrapper {
margin:0 auto;
margin-top: 5px;
width: 900px;
/*position: relative;*/
text-align: left;
}
/*** 这是整体页面的框架，margin-top 是整体和上面的距离，因为我插入的是5象素高的背景图片，所以这里不改。宽我改成900px，1024觉得有点宽.text-align是页面文字的位置，就是居中，左右对齐 ***/
#innerWrapper {
background-image: url(\”images/warpperBg.jpg\”);
width: 100%;
}
/*** 这里我把背静颜色改为了图片，用的是background-image 代码 ***/
#header {
background: #FFFFFF url(\’images/headerBg.jpg\’) top no-repeat;
}
/*** 这里是 页面 最上面 头部的背静图片， 因为这个头部图片的 问题 我把页面的宽 又设成1001了，因为找不到 和背静融合的好的图片***/
#innerHeader {
padding-top: 75px;
height: 121px;
vertical-align: bottom;
}
/*** 这里是 菜单以下部分和页面上边的距离，先改为75，121，一会改下面的时候，看图片再改，这些只要自己一点点试着改，达到最好效果就可以了***/
#footer {
background: #FFFFFF url(\’images/footerBg.jpg\’) top no-repeat;
clear: both;
padding-top: 19px;
height: 79px;
color: #92A05A;
}
/*** 这是最底部的属性，版权部分的背静颜色图片，高，字颜色，我改了height，padding-top，这两个也是看着图片大小的效果定的 ***/
#footer a{
color: #0000FF;
font-weight: bold;
}
/*** 这里下面版权里作者的名字字体的颜色和加粗，加粗代码是 font-weight: bold ***/
#innerFooter {
padding: 20px;
font-size: 12px;
text-align: center;
color: #000;
}
/*** 这是版权文字的高，字体大小，位置（左中右），颜色 ***/
.blog-header {
padding: 0px;
padding-left: 20px;
padding-right: 20px;
}
/**** 这里是 BLOG名称和介绍 的位置（上下左右的距离） ***/
h1 {
padding: 0px;
margin: 0px;
color: #2467AF;
font-size: 34px;
font-weight: bold;
}
/*** font-size是标题字体大小 ***/
.blog-desc {
padding-top: 0px;
padding-left: 120px;
color: #841111;
}
/*** BLOG介绍的 位置，颜色***/
#menu {
width: 100%;
margin-top: 21px;
height: 45px;
background: url(\’images/menuBg.jpg\’) repeat-x;
}
/*** 这里是 整个标题框的属性 位置和背静，因为我的背静此次选用的都是图片，所以位置很重要， 层次错一点就会出现空位，这里我上下改了好几次才吻合好 ***/
#menu li{
list-style: none;
width:80px;
float: left;
text-align: center;
padding: 0px;
margin: 0px;
}
/*** 这里是菜单按扭的属性，width这是每个的宽度，太宽了如果在后台天加新菜单的时候会变超出来，太窄了开关侧边栏那5个字也是问题。float是菜单左对齐，右对齐,同理，txt-align是每个按扭left,center,right。在这里要说一下float如果添center的话，菜单不会居中，而是竖直排列，我见过一个风格是用到竖直排列的，是菜单整体在头部的右侧***/
#menu a{
padding-top: 25px;
display: block;
color: #564148;
height: 20px;
padding-left: 15px;
padding-right: 4px;
}
/*** 这些是 首页，RSS文字的位置 颜色***/
到这里，我这次的整个页面部分的背静已经搞定了，是 body #innerWrapper #header #footer #menu 这几个的背静，组成的整体风格背静，下面再改的就是上面一层的东西，其实上面那些也是存在层和层的关系的，只不过直观的看来他们是拼在一起的。
#mainWrapper {
background: #FAFAFA;
margin-top: 15px;
margin-left: 25px;
margin-right: 30px;
}
/*** 这里改的是主体，也就是侧边板和右侧主内容框架的背静颜色，与上左右端距离，***/
.sidebar {
padding-top: 0px;
padding-left: 5px;
float: left;
width: 195px;
}
/*** 这是整个侧边框架的位置和宽度 ***/
.content {
float: right;
width: 100%;
margin-left: -200px;
}
.content-wide {
width: auto;
margin-left: -200px;
}
.content-only {
width: 100%;
margin-left: -180px;
}
/*** 上面三个是主体内容框架，现在已经很美观，所以没有修改***/
.panel{
border: 1px solid #86B9D6;
padding:0px;
margin-bottom: 10px;
}
/*** border是侧边栏中，每个框的描边，1px是代表1象素 后面是颜色***/
.panel h5 {
text-align: left;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding-top: 4px;
padding-left: 25px;
margin:0px;
height: 20px;
background: url(\’images/modHeaderBg.jpg\’) no-repeat left top;
cursor: pointer;
cursor: hand;
}
/*** 这些是侧边框的标题栏属性，字的颜色，标题框背静等，其他是位置结构 ***/
.panel-content{
background: #FFFFD9;
width: 181px;
margin:0px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
line-height: 120%;
color:#92A05A;
border-top: 1px solid #D8E7EE;
}
/*** 这里是框内的背静色 宽度 位置，框内字颜色等 ***/
#calendar {
width: 95%;
margin-top:1px;
}
/*** 日历占的宽度百分比，对上距离 ***/
.calendar-year,
.calendar-month {
font-weight: bold;
}
/*** 这段意思是 年和月 字体加粗***/
.calendar-weekdays {
color: #FB4C71;
font-size:12px;
text-align: center;
width: 14%;
padding:2px;
}
/*** 星期一到星期五日期的字体颜色，大小，位置 ***/
.calendar-weekday-cell {
color: #FFFFFF;
font-size:12px;
text-align: center;
width: 14%;
padding:2px;
font-weight: bold;
}
/*** 年月星期的颜色 ***/
.calendar-saturday,
.calendar-sunday {
color: #FB4C71;
}
/*** 星期六日的颜色***/
.calendar-today {
color: #fff;
background: #9FCEE2;
font-weight:bold;
}
/*** 日历显示今天的时候，回在日期上有个小框，background就是小框的颜色 ***/
.calendar-day a, .calendar-saturday a, .calendar-sunday a {
color: #FB4C71;
font-weight:bold;
text-decoration: underline;
}
/*** 写过日记的那天在日历上会加粗 ***/
.search-field {
width: 125px;
margin-bottom: 5px;
border: 1px solid #BBE9FF;
}
/*** 这个是搜索框，输入文字那地方的属性，我改了下描边颜色 ***/
.announce-content{
word-wrap: break-all;
padding: 10px; color: #FB4C71;
}
/*** 公告框的描边，背静，字颜色等 ***/
.pages {
color: #FB4C71;
}
/*** 分页条文字颜色 ***/
.pagelink-current {
font-weight: bold;
}
/*** 当前页文字加粗 ***/
.listbox-header {
font-weight: bold;
text-align: center;
background-color: #FFFFFF;
background: url(\’images/menu_bg2.gif\’) repeat-x;
color: #FFFFFF;
height: 25px;
}
/*** 列表 标题栏字颜色 背静等 ***/
.listbox-entry {
word-wrap: break-all;
color: #076AA6;
border-bottom: 1px solid #FB4C71;
}
/*** 默认分类有个 [ ] 的颜色，和列表下面那条线的颜色***/
.textbox{
background: #FFFFFF;
padding-bottom: 25px;
margin-bottom: 10px;
}
/*** 文本框的背静色 ***/
.textbox-title{
background: #FFDCE9;
border: 1px solid #FB4C71;
word-wrap: break-all;
font-size: 14px;
padding-top: 3px;
height: 42px;
}
/*** 文本框内，文章标题框 ***/
.textbox-title h4{
margin-left: 7px;
color: #000000;
padding-left: 5px;
font-size: 14px;
display: inline;
}
.textbox-title h4 a {
color: #fc4c73;
}
/*** 文章题目的颜色 ***/
.textbox-label{
padding-top: 3px;
padding-left: 5px;
color: #fb4c71;
font-size: 12px;
}
/*** 文章题目下面日期的颜色 ***/
.textbox-fontsize{
color: #fb4c71;
float: right;
text-align: right;
padding: 3px;
font-size: 12px;
}
.textbox-fontsize a{
color: #fb4c71;
}
/*** 文章工具栏 字号选择那里的 字颜色 ***/
.textbox-content{
line-height: 120%;
color: #000000;
word-wrap: break-word;
padding: 10px;
}
/*** 文章正文部分的样式 ***/
.textbox-bottom{
border-top: 1px solid #FEDDE8;
padding: 5px;
padding-top: 3px;
padding-bottom: 4px;
font-size: 12px;
color: #FB4C71;
text-align:right;
}
/*** 文章底部分 下划线 字体样式 ***/
.textbox-bottom a {
color: #FB4C71;
text-decoration: none;
}
/*** 文章底部，默认分类，评论那些字的颜色 ***/
.textbox-adminbar {
padding: 0px;
padding-bottom: 4px;
font-size: 12px;
color: #FB4C71;
text-align:right;
}
/*** 文章底部，管理栏的字样式 ***/
.textbox-tburl {
padding-top: 3px;
font-size: 11px;
color: #3F67A5;
text-align:left;
padding-left: 15px;
background: url(\’./images/tb_bg.gif\’) no-repeat 0px;
}
/*** 这个不知道是哪，实在找不到这个颜色的字 ***/
.tags {
padding-top: 1px;
padding-bottom: 3px;
font-size: 11px;
color: #5EC4F4;
text-align:left;
padding-left: 15px;
}
/*** 文章的下面 tags的颜色 ***/
至此，一个风格的样子就出来了，我们也快大功告成了，剩下的就是其他页面也要按着这个风格改
.comment-pages{
padding:5px;
margin: 5px;
color: #FB4C71;
}
/*** 评论分页字体颜色 ***/
.commentbox{
word-wrap: break-word;
padding: 0px;
margin: 5px;
margin-top: 10px;
border-top: 1px solid #FEDDE8;
}
/*** 评论间那条线的颜色 ***/
.commentbox-label{
display: inline;
color: #FB4C71;
font-size: 12px;
}
/*** 评论日期颜色 ***/
.messagebox{
width: 500px;
margin-top: 200px;
border-top: 0px;
text-align: center;
background-color: #ffffff;
}
/*** 提示框整体 ***/
.messagebox-title{
background: #FB4C71;
color: #FFFFFF;
font-weight: bold;
padding: 5px;
}
/*** 提示框标题背静，字颜色，加粗 ***/
.messagebox-content{
color: #FB4C71;
background:#FFFFFF;
padding: 10px;
padding-bottom: 20px;
text-align: left;
}
/*** 提示内容的样式***/
.messagebox-bottom{
color: #FB4C71;
background-color: #E6EEF7;
padding: 5px;
}
/*** 提示框底部 ***/
.formbox-comment-title{
text-align: center;
color: #FB4C71;
font-weight: bold;
padding: 5px;
}
/*** 评论页面 发表评论那几个字在这改 ***/
.panel-smilies-title {
color: #FB4C71;
text-align: left;
border-bottom: 1px solid #FEDDE8;
}
/*** 表情栏 表情两个字 和下面那条线 ***/
.code {
word-wrap: break-all;
border-left: 3px solid #3F67A5;
background-color: #5EC4F4;
color: #000000;
margin: 5px;
padding: 10px;
}
/*** 文章 代码的样式，文章插入代码的时候的样式***/
.quote-content {
word-wrap: break-all;
color: #000000;
padding: 10px;
border: 1px solid #E6EEF7;
border-top: 0px;
}
/*** 上面是文章中，引用的样式，引用的外描边，字颜色等 ***/
