BB模版CSS中文注释

[ Time:2007/03/11 10:59 ]
[indent]第一段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 这几个的背静,组成的整体风格背静,下面再改的就是上面一层的东西,其实上面那些也是存在层和层的关系的,只不过直观的看来他们是拼在一起的。
[/indent]
内文分页: [1] [2] [3]
| |