颜色bo blog模板CSS中文注释.doc

bo-blog模版CSS中文注释

用户 kelly_alin积分 4213第一段bodybody {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;

1

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;

}

/***这是版权文字的高字体大小位置左中右 颜色***/

2

.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这几个的背静组成的整体风格背静下面再改的就是上面一层的东西其实上面那些也是存在层和层的关系的只不过直观的看来他们是拼在一起的。

3

#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;co l or: #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;

4

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 {co l or: #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;

5

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;co l or: #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;

6

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;

}

/***文章底部管理栏的字样式***/

7

. 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 ;co l or: #FFFFFF;font-weight: bold;

8

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;

}

/***上面是文章中 引用的样式 引用的外描边字颜色等***/

9