新浪博客模板完全解析——CSS注解

sinablog

我们都知道网页的外观是通过css来控制的，修改css就可以完全更改网页的外观。
所以我们这篇来讲讲新浪博客的css文件，已经修改方法，一般其他的博客都是可以自己修改css文件的以方便用户自己定义博客样式，但是新浪不行，所以我们只有自己来弄了。
如果你不知道css是用来干什么的也没有关系，总之记住css是最重要的修改你的博客的外观的东西。

1，css文件定义方法：
有点概念化了吧，对于高手呢，这个就是小儿科，但是我还是要让所有人都懂，所以我尽量要写的简单一些。
css文件有两种调用方法，一种是直接把css代码放在新浪博客里面，还有一种就是把代码写好成文件，然后通过代码调用文件就好了，这种的方便之处就是这个css文件就可以到处调用，可以公用，也方便修改，不用到处复制代码。所以我们推荐用这种方法，不过如果你的代码很少的话也可以直接把代码放在空白面板里。

（1）直接放代码方法：

<style type=text/css>
 
把样式定义放在这里就可以了
 
</style>

（2）文件调用方法：

<LINK media=all href="你的css文件地址" type=text/css rel=Stylesheet>

（3）这个就是css样式的定义：

.bodyBox {
background:#fff;
}

用第一种方法就是直接把代码都放在空白面板里
第二种方法就是把代码放在空白面板里，然后把css定义的都放在“你的css文件地址”里,你想把css文件放在哪里也是个问题，我是申请的bokee.com的，可以自定义css，然后把这里的样式放在那里，然后调用文件就可以了，如果有个人空间也可以
我的是这样的

<LINK media=all href="http://gaobukai.bokee.com/default.css" type=text/css rel=Stylesheet>
<LINK media=all href="http://gaobukai.bokee.com/catalog.css" type=text/css rel=Stylesheet>
<LINK media=all href="http://gaobukai.bokee.com/diary.css" type=text/css rel=Stylesheet>

关于css文件的定义我已经讲的差不多了，但是不一定讲的够清楚。

2，新浪博客的css文件
根据我不完全查找，新浪用了很多个css文件，我查到的有以下几个
1.css ,feeds.css ,ubb.css ,article.css ,
comment.css ,gbook.css ,serial.css
但是其中有几个是用不着修改的，ubb.css,gbook.css,serial.css
所以我们的入手点是剩下的几个文件里面的内容，我把几个文件都贴出来
其中把所有的功能作了简单的注释，如果你需要修改哪里，就复制那块代码就可以了
1.css

body,td,a{
 color:#333333;
 font-size:12px;
 line-height: 150%;
}
//定制整个博客的颜色，字体大小，行距

a{
 text-decoration:none;
}
//定义全文连接的样式

.foot{
 color:#7F7F7F;
}
.foot p a,.foot center a{
 color:#7F7F7F;
}
//定义下面的版权的样式

form{
 padding:0px;
 margin:0px;
}
定义表单的样式

.sysHand{
 cursor:pointer;cursor:hand;
}
.sysBr{
 word-wrap:break-word;
 table-layout:fixed;
 overflow:hidden;
 text-overflow:ellipsis;
}
.sysBr180{
 word-wrap:break-word;
 table-layout:fixed;
 overflow:hidden;
 text-overflow:ellipsis;
 width:180px;
}
.sysBr210{
 word-wrap:break-word;
 table-layout:fixed;
 overflow:hidden;
 text-overflow:ellipsis;
 width:210px;
}
.sysBr476{
 word-wrap:break-word;
 table-layout:fixed;
 overflow:hidden;
 text-overflow:ellipsis;
 width:476px;
}
.sysBr500{
 word-wrap:break-word;
 table-layout:fixed;
 overflow:hidden;
 text-overflow:ellipsis;
 width:500px;
}
.sysLeft{
 float:left;
}
.sysBoth{
 clear:both;
}
.sysW770{
 width:770px;
}
//上面很多的都是定义模块的，一般不需要修改
.box_1{
 width:210px;
 text-align:left;
}
.box_1 .margin{
 padding-left:3px;
}
//box_1是定义框架窄栏的

.box_2{
 text-align:center;
}
.box_2 .margin{
 padding-left:3px;
 padding-right:3px;
}
//box_2定义右边文章列表的

.logo{
 padding-left:5px;
}
//定义logo的样式

.man{
 margin:0px 5px;
}
.dashed{
 border-bottom:1px dashed #6A6A6A;
}
//定义虚线的样式

.line{
 height:2px;
}

.bodyBox{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/bg/1.gif");
 text-align:center;
 margin-left:0px;
 margin-right:0px;
 padding-left:0px;
 padding-right:0px;
}
//定义整个博客的背景图片或颜色的

.bodyTop{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/bodyTop.gif");
 width:770px;
 height:40px;
}
//定义头部的样式和背景的

.bodyBg{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/bodyBg.gif");
 width:770px;
}
//定义中部的样式和背景的
.bodyBottom{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/bodyBottom.gif");
 width:770px;
 height:40px;
}
//定义底部部的样式和背景的
.banner{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/banner/1.gif") #fff no-repeat center;
 width:764px;
 height:102px;
}
.banner table{
 background:#fff;
 line-height:30px;
 -moz-opacity:0.7;
 filter:alpha(opacity=70);
 border:1px solid #000;
}
.banner .title{
 margin-left:100px;
 font-size:16px;
 font-weight:bold;
}
.banner .title td{
 font-size:16px;
}
.banner .link{
 margin-left:130px;
 margin-top:5px;
}
.banner .link a{
 color:#000;
}
//头部的各种样式的，标题，背景等
.menu{
 width:764px;
 height:32px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/menu/1.gif") no-repeat center;
 padding:0px 10px;
}
.menu .home{
 color:#fff;
}
.menu .text{
 color:#fff;
}
.menu a{
 color:#fff;
 font-size:10px;
 font-family:Arial,Serif;
}
.menu .text a{
 font-size:12px;
}
//定义home，登陆等的样式

.zone{
 width:210px;
}
.calendar{
 width:210px;
}
.calendar .mid{
 height:236px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/calendar/1Bg.gif");
}
.calendar .top{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/calendar/1Top.gif");
}
.calendar .bottom{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/calendar/1Bottom.gif");
}
//定义日历的样式
.label{
 width:210px;
}
.label .mid{
 line-height:normal;
 padding:8px;
 text-align:left;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Bg.gif");
}
.label .top{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Top.gif");
}
.label .bottom{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Bottom.gif");
}
//定义空白面板的样式
.photo{
 width:210px;
}
.photo .mid{
 padding:15px 0px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Bg.gif");
}
.photo .image{
 overflow:hidden;
 width:200;
}
.photo .top{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Top.gif");
}
.photo .bottom{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/photo/1Bottom.gif");
}
.photo .infoText{
 padding:4px 0px;
 margin:8px 0px;
 text-align:center;
 border-top:1px dashed #6A6A6A;
 border-bottom:1px dashed #6A6A6A;
}
.photo table{
 color:#333333;
}
//定义个人头像的样式
.callboard{
 width:210px;
}
.callboard table{
 width:100%;
 font-size:12px;
}
.callboard .title{
 color:#ffffff;
}
.callboard .bold td{
 height:24px;
 font-weight:bold;
 padding-top:2px;
 padding-left:6px;
}
.callboard .up{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Up.gif");
}
.callboard .down{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Down.gif");
}
.callboard .mid{
 line-height:normal;
 padding:8px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Bg.gif");
}
.callboard .mid img{
 margin-left:2px;
}
.callboard .bottom{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Bottom.gif") repeat-x top;
}
.callboard .front{
 width:29px;
 height:13px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/callboard/front.gif");
}
.callboard .back{
 width:29px;
 height:13px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/callboard/back.gif");
}
//定义公告栏的样式
.links{
 width:210px;
}
.links .up{
 height:24px;
 color:#fff;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Up.gif");
}
.links .down{
 height:24px;
 color:#fff;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Down.gif");
}
.links .text{
 color:#fff;
 font-weight:bold;
 height:22px;
 padding-top:2px;
 padding-left:6px;
}
.links .mid{
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Bg.gif");
}
.links .wd{
 width:200px;
}
.links .wd tr{
 height:22px;
}
.links .bottom{
 height:1px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_1/1Bottom.gif");
}
.links .dashed{
 border-bottom:1px dashed #9A9A9A;
 color:#333333;
}
.links .more{
 height:18px;
 width:38px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/more.gif") no-repeat right;
}
.links .a{
 color:#333333;
}
.links .desc{
 color:#999999;
}
.links .ico{
 color:#333333;
}
//定义其他的模板的统一样式
.add{
 text-align:right;
 height:30px;
 padding-top:5px;
 padding-right:3px;
 line-height:30px;
}
.add .ico{
 text-align:right;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/addIco.gif");
 width:20px;
 height:20px;
}
.add .text{
 font-family:"Courier New", "Courier", "monospace";
 color: #CD3F3F;
 font-weight:bold;
}
.add img{
 margin-right:6px;
}
.add a{
 padding-top:4px;
 margin-right:3px;
}
//定义发表文章的样式
.sort{
 color:#333;
}
.sort td{
 padding:14px;
}
.sort a{
 color:#333;
 padding:14px;
}
.sort span{
 font-weight:bold;
}
//定义分类样式
.aList .up{
 color:#000000;
}
.aList .down{
 color:#000000;
}
.article .up{
 color:#000000;
}
.article .down{
 color:#333333;
}
.comment .up{
 color:#000000;
}
.comment .down{
 color:#000000;
}
.comment .iUp{
 color:#000000;
}
.comment .iDown{
 color:#000000;
}
.feeds .up{
 color:#000000;
}
.feeds .down{
 color:#000000;
}

很多地方不需要修改，也不好解释，如果你懂css就不需要我解释，不懂的话，看了解释还是不懂的。

feeds.css

.feeds{
 width:550px;
 text-align:center;
 margin-bottom:2px;
}
//定义文章列表的样式
.feeds table{
 width:100%;
 color:#626262;
 font-size:12px;
}
.feeds .up{
 height:28px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_2/1Up.gif") no-repeat center;
}
.feeds .down{
 height:28px;
 background:url("http://image2.sina.com.cn/blog/tmpl/v3/theme/1/images/box_2/1Down.gif") no-repeat center;
}
//定义文章列表标题的背景
.feeds .title{
 font-weight:bold;
 text-indent:26px;
}
.feeds .title a{
 font-size:14px;
 color:#000000;
}
//标题的字体样式
.feeds .time{
 font-size:11px;
}
//发表时间的样式
.feeds .itemBox{
 text-align:center;
}
.feeds .itemBox table{
 width:498px;
}
.feeds .author{
 text-align:right;
 height:24px;
}
.feeds .text{
 color:#222222;
 padding:14px 0px 18px 2px;
 word-break:break-all;
 overflow:hidden;
 width:500px;
 font-size:14px;
 line-height: 24px;
}
.feeds .text font{
 line-height:normal;
}
.feeds .text a{
 color:#222266;
 text-decoration:underline;
}
//.feeds .text定义文章内容的样式，仅限于首页
.feeds .function{
 height:30px;
 color:#6a6a6a;
 text-align:right;
}
.feeds .page a{
 margin:0px 5px;
}
.feeds .page span{
 margin:0px 5px;
 color:red;
 font-weight:bold;
}
//定义文章分页的样式

上面两个文件定义了首页的所有的样式，所有的修改都可以通过上面来修改
文章页的css文件要多下面的两个，

comment.css

http://image2.sina.com.cn/blog/tmpl/v3/theme/1/css/comment.css

article.css

http://image2.sina.com.cn/blog/tmpl/v3/theme/1/css/article.css

所有可以修改的样式都在上面了，没有什么其他可以修改的不在上面的了
没有做多少解释

新浪博客模板完全解析——CSS注解

添加新评论（文明上网理性发言，请遵守评论服务协议）

分类列表

热点标签

热门推荐

新浪博客模板完全解析——CSS注解

添加新评论（ 文明上网理性发言，请遵守评论服务协议 ）

分类列表

热点标签

热门推荐

添加新评论（文明上网理性发言，请遵守评论服务协议）