这几天，郎少这个新手找了很多ZBLOG方面的资料，准备把ZBLOG好好整改一番。新手就是新手，呵呵。好不容易找到了徐师傅的ZBLOG。照抄一些好的办法，现在也把这篇资料保存到我的ZBLOG.
1.所谓ASP程序是Z-Blog的核心部份，而模板则会决定程序会生成什么样的HTML代码，CSS样式决定生成的HTML代码是如何显示在你的浏览器里
。
2.无论你是修改Z-Blog还是美化Z-Blog，先后顺序都是CSS->模板->ASP程序.即能用CSS解决的就不要修改模板，能修改模板解决的就不要改程序。切记
3.默认模板与程序是完全配套的，你下载的其它模板或修改过的模板可能会让你的程序不能正常工作。如果你不能确定原因，那么请换上默认模板试试。所以建议大家做好备份工作，以免出现程序上的错误。讲了那么多，新手朋友还是不知道具体的哪些是程序，哪些是css，这么来说吧，简单的来说就是TEMPLATE 是模板文件夹 STYLE就是CSS文件夹 即样式.
有朋友发问说：要更换侧边栏里几个栏目的位置，是要更改CSS 还是更改模板?比如把收藏地址放上面，友情链接放中间，日历放最下。当然是更换模版了，因为只有模版才能控制博客的位置，一般css代码主要用在美化博客上的.程序的东西按早忘完了，就是记得几个字也急不全，算了，从网上整一些资料，加一些注释，一块看看z-blog的CSS样式、模板。
一、z-blog中默认CSS样式的讲解与注释
/*--------------------------博客全局设置-------------------------------*/
/*----关于页面的设置[边距、字体颜色、大小、背景颜色]----*/
body{
margin:0;
padding:0;
color:#000000;
font-size:12px;
background:#FFFFFF;
}
/*----以下为字体链接变换的定义----*/
a{
text-decoration: none;
}
a:link {
color: #095C83;
}
a:visited {
color: #095C83;
}
a:hover {
color: #DC143C;
text-decoration: underline;
}
a:active {
color: #DC143C;
text-decoration: underline;
}
/*----以下为ul li 段落 图片的定义----*/
ul{
list-style-type:none;
list-style-position : outside;
margin:0 0 0 0;
padding:0 0 0 0;
word-break:break-all;
}
li{
margin:0 0 0 0;
padding:0 0 0 0;
}
p{
margin:0 0 0 0;
padding:0 0 0 0;
word-break:break-all;
}
img{
border:0;
}
/*--------------------------------3个主要div模块的定义-------------------------------*/
#divAll{
width:790px;
margin:0 auto;
padding:0
}
#divPage{
width:778px;
margin:0;
padding:0 6px 0 6px;
text-align:left;
float:left;
background:url("default/bg.gif") repeat-y center;
}
#divMiddle{
width:778px;
margin:0;
padding:0;
text-align:left;
float:left;
}
/*----顶部图片的大小、边距、颜色、背景的定义----*/
#divTop{
width:778px;
margin:0 auto;
padding:0;
text-align:left;
float:left;
height:115px;
background:#1D99D3 url("default/topbacking.gif") repeat-x 0 0;
border-bottom:1px solid #808080;
}
/*----侧栏宽度、边距、浮动位置的定义----*/
#divSidebar{
width:210px;
margin:0 0 0 0;
padding:0 0 10px 0;
text-align:center;
float:left;
}
/*----主栏栏宽度、边距、浮动位置的定义----*/
#divMain{
width:568px;
margin:0 0 0 0;
padding: 0;
text-align:left;
float:left;
}
/*----底部大小、边距、浮动位置、背景的定义----*/
#divBottom{
width:778px;
margin:0 auto;
padding:0;
text-align:center;
float:left;
height:80px;
background:url("default/bottom.png") repeat-x 0 0;
border-top:1px solid #D0D0D0;
}
/*----------------------------侧栏模块的参数定义-----------------------------------*/
/*----侧栏总体定义[浮动方向、宽度、边距等]----*/
div.function {
float:left;
width:190px;
margin:10px 0 0 0;
padding:0 0 0 10px;
text-align:left;
}
/*----侧栏标题的定义----*/
div.function h3{
font-size:12px;
height:15px;
margin:0 0 0 0;
padding:5px 0 0 5px;
color:black;
}
/*----侧栏正文的定义----*/
div.function ul{
text-align:left;
width:190px;
margin:2px 0 0 0;
padding:5px 0 0 0;
list-style-position:outside;
list-style-type:none;
border-top:1px solid #d0d0d0;
}
/*----侧栏正文项目列表的定义----*/
div.function li{
margin:0 0 0 0;
padding:2px 0 1px 15px;
background:url("default/pointblue.gif") no-repeat 3px 4px;
}
/*----侧栏项目列表的定义----*/
#divCatalog li{
background:none;
padding:2px 0 1px 4px;
}
/*#divCatalog li span.feed-icon{
display:none;
}*/
/*----侧栏图标汇集的定义----*/
#divMisc{
padding:10px 0 5px 10px;
}
/*----侧栏图标汇集的标题隐藏----*/
#divMisc h3{
display: none;
}
/*----侧栏图标汇集的正文模块定义----*/
#divMisc ul{
border:none;
}
/*----侧栏图标汇集的项目列表定义----*/
#divMisc li{
padding:2px 0 2px 15px;
background-image : none;
}
/*----侧栏目录项目前的图标----*/
div.function li span.feed-icon a{
background:url("default/feed.png") no-repeat 0 3px;
margin:0 0 0 0;
padding:0 0 0 0;
font-size:14px;
height:12px;
width:12px;
}
div.function li span.feed-icon img{
height:12px;
width:9px;
visibility:hidden;
margin:0;
padding:0;
}
/*----侧栏控制面板的项目列表定义----*/
#divContorPanel li{
background-image : none;
}
/*----侧栏搜索的项目列表定义----*/
#divSearchPanel li{
background-image : none;
}
/*-----------------------------主栏正文的定义----------------------------------*/
/*----正文的总体定义----*/
div.post {
width:548px;
margin:10px 0 10px 10px;
padding:0 0 0 0;
text-align:left;
}
/*----上下文章的总体定义----*/
div.post-nav {
width:100%;
clear:both;
float:left;
}
/*----上文的定义----*/
div.post-nav a.l{
float:left;
padding-right:10px;
padding-bottom:5px;
}
/*----下文的定义----*/
div.post-nav a.r{
float:right;
padding-left:10px;
padding-bottom:5px;
}
/*----文章标题的定义----*/
div.post .post-title{
width:519px;
padding:5px 0 2px 28px;
margin:2px 0 2px 0;
font-size:18px;
color: #284259;
border-top:1px dashed #D0D0D0;
border-bottom:1px dashed #D0D0D0;
background:#fafafa url("default/title-bg.gif") no-repeat 3px center;
}
/*----文章日期的定义----*/
div.post .post-date{
width:538px;
margin:0 0 0 0;
padding:5px 5px 2px 0;
font-size:12px;
color:gray;
}
/*----文章底部的定义----*/
div.post .post-footer{
width:546px;
margin:10px 0 30px 0;
padding:2px 0 0 0;
font-size:12px;
color:gray;
height:20px;
text-align:right;
}
/*----tags的定义----*/
div.post .post-tags{
width:541px;
margin:2px 0 2px 5px;
padding:2px 0 0 0;
font-size:12px;
color:gray;
height:20px;
text-align:left;
}
body.multi div.post .post-tags{
/*display:none;*/
}
/*----文章正文文字的定义----*/
div.post div.post-body{
width:520px;
margin:0 0 0 0;
padding:0 0 0 5px;
font-size:13px;
word-break:break-all;
text-align:left;
line-height:150%;
}
/*----文章正文内media标签的定义----*/
div.post-body div.media a{
padding-left:16px;
background:#FBFBFB url("default/media.gif") no-repeat 0 center;
}
/*----文章img标签的定义----*/
div.post-body img{
padding:4px 4px 4px 4px;
border:0;
clear : both;
float : none;
}
/*----文章正文段落的定义----*/
div.post-body p{
margin:10px 0 15px 0;
padding:0;
}
/*----文章正文文字段落内img标签的定义----*/
div.post-body p.img{
margin:0;
padding:0;
text-align:center;
}
/*----文章正文文字段落内inscript标签的定义----*/
div.post-body p.inscript{
margin:0;
padding:0;
padding-right:20px;
text-align:right;
}
/*----文章正文文字段落内code标签的定义----*/
div.post-body p.code{
padding:5px;
border:1px dotted black;
}
div.post-body div.code{
padding:5px;
border:1px dotted black;
}
/*----文章正文内h1标签的定义----*/
div.post-body h1{
color: #000000;
margin:0;
padding:0;
font-size:16px;
}
/*----文章正文内h2标签的定义----*/
div.post-body h2{
color: #000000;
margin:0;
padding:0;
font-size:14px;
}
/*----文章正文内h3标签的定义----*/
div.post-body h3{
color: #000000;
margin:0;
padding:0;
font-size:13px;
}
/*----文章正文内h4标签的定义----*/
div.post-body h4{
color: #000000;
margin:0;
padding:0;
font-size:12px;
}
/*----文章正文内h5标签的定义----*/
div.post-body h5{
color: #000000;
margin:0;
padding:0;
font-size:11px;
}
/*----文章正文内h6标签的定义----*/
div.post-body h6{
color: #000000;
margin:0;
padding:0;
font-size:10px;
}
/*-------------------------z-blog名称及版权的定义-------------------------------------*/
/*----z-blog名称的总体定义----*/
#BlogTitle{
font-size:32px;
margin:54px 0 0 10px;
padding:0;
font-weight:bold;
}
/*----以下为z-blog名称的链接变换定义----*/
#BlogTitle a{
color:#F0FFF0;
}
#BlogTitle a:hover {
color: #DC143C;
text-decoration: none;
}
#BlogTitle a:active {
color: #DC143C;
text-decoration: none;
}
/*----z-blog名称下副标题的定义----*/
#BlogSubTitle{
color: #F0FFF0;
font-size:12px;
margin:2px 0 0 10px;
padding:0;
}
/*----z-blog版权的定义----*/
#BlogPowerBy{
font-size:12px;
height:20px;
margin:0;
padding:25px 10px 0 10px;
text-align:right;
font-weight:normal;
}
#BlogCopyRight{
font-size:12px;
height:20px;
margin:0;
padding:0 10px 0 10px;
text-align:right;
float:none;
clear:both;
font-weight:normal;
}
/*--------------------------评论的定义-------------------------------------*/
/*----评论顶部部分的定义----*/
p.posttop {
margin:10px 0 0 0;
padding:3px 0 2px 12px;
background: url("default/pointblue.gif") no-repeat 0 center;
}
/*----评论底部部分的定义----*/
p.postbottom {
margin:0 0 10px 0;
padding:5px 0 0 0;
}
#frmSumbit{
padding:0;
margin:0;
}
#frmSumbit p{
padding:5px 0 5px 0;
}
/*----评论按钮的定义----*/
input.button{
background: white;
border: 1px double #284259;
color: #333;
padding: 0.05em 0.25em 0.05em 0.25em;
}
/*----评论文字的定义----*/
input.text {
padding: 0.15em 0.25em 0.20em 0.25em;
border: 1px double #284259;
width: 200px;
background: white;
}
/*----评论文字框的定义----*/
textarea.text {
padding: 0.15em 0.25em 0.20em 0.25em;
border: 1px double #284259;
width: 80%;
height: 80px;
background: white;
width: 520px;
height: 120px;
}
/*---------------------------侧栏日历的定义------------------------------------*/
/*----日历的总体定义----*/
#divCalendar{
padding:0 0 0 10px;
text-align:center;
}
/*----日历标题部分进行了隐藏----*/
#divCalendar h3{
display:none;
}
/*----日历div的定义----*/
#divCalendar div{
margin:0 0 0 0;
padding:0 0 5px 4px;
float:left;
}
/*----日历各月份背景图片的定义----*/
#divCalendar div.month1{
background:url("default/month1.gif") no-repeat center 10px;
}
#divCalendar div.month2{
background:url("default/month2.gif") no-repeat center 10px;
}
#divCalendar div.month3{
background:url("default/month3.gif") no-repeat center 10px;
}
#divCalendar div.month4{
background:url("default/month4.gif") no-repeat center 10px;
}
#divCalendar div.month5{
background:url("default/month5.gif") no-repeat center 10px;;
}
#divCalendar div.month6{
background:url("default/month6.gif") no-repeat center 10px;
}
#divCalendar div.month7{
background:url("default/month7.gif") no-repeat center 10px;
}
#divCalendar div.month8{
background:url("default/month8.gif") no-repeat center 10px;
}
#divCalendar div.month9{
background:url("default/month9.gif") no-repeat center 10px;
}
#divCalendar div.month10{
background:url("default/month10.gif") no-repeat center 10px;
}
#divCalendar div.month11{
background:url("default/month11.gif") no-repeat center 10px;
}
#divCalendar div.month12{
background:url("default/month12.gif") no-repeat center 10px;
}
/*----日历各月份背景图片的定义----*/
p.w{
float:left;
width:25px;
height:16px;
margin:4px 0 0 0;
padding:2px 0 1px 0;
text-align:center;
vertical-align :middle;
font-size:9px;
text-decoration : underline;
}
/*----日历年份的定义----*/
p.y{
text-align:center;
height:14px;
margin:2px 0 0 0;
padding:0 0 0 0;
float:left;
width:175px;
font-size:12px;
font-weight:bold;
}
/*----日历日期的定义----*/
p.d{
float:left;
width:25px;
height:18px;
margin:0 0 0 0;
padding:2px 0 0 0;
text-align:center;
vertical-align :middle;
}
/*----有文章的日期的定义----*/
p.yd{
float:left;
width:25px;
height:18px;
margin:0 0 0 0;
padding:2px 0 0 0;
text-align:center;
vertical-align :middle;
font-weight:bolder;
color:#6090c0;
background: url("default/links_r.gif") no-repeat 1px 1px;
}
/*----没有文章的日期的定义----*/
p.nd{
float:left;
width:25px;
height:18px;
margin:0 0 0 0;
padding:2px 0 0 0;
text-align:center;
vertical-align :middle;
}
/*----当日日期的定义----*/
p.cd{
float:left;
width:25px;
height:18px;
margin:0 0 0 0;
padding:2px 0 0 0;
text-align:center;
vertical-align :middle;
font-weight:bold;
}
/*---------------------------相关文章和引用的定义------------------------------------*/
ul.msg{
width:548px;
margin:10px 0 40px 10px;
padding:0 0 0 0;
text-align:left;
list-style-position : outside;
}
li.msgname{
padding:2px 0 2px 5px;
margin:0px;
border-bottom:1px dashed #D0D0D0;
}
li.tbname{
padding:0 0 0 5px;
margin:0px;
border-bottom:1px dashed #D0D0D0;
}
li.msgurl{
text-align:right;
padding:2px 10px 2px 10px;
margin:0;
border-left:1px dashed #D0D0D0;
border-right:1px dashed #D0D0D0;
}
li.msgarticle{
list-style-position : outside;
padding:15px 10px 15px 10px;
margin:0;
line-height:150%;
border-left:1px dashed #D0D0D0;
border-right:1px dashed #D0D0D0;
}
/*----发表时间的定义----*/
li.msgtime{
text-align:right;
padding:2px 5px 0 10px;
margin:0 0 0 0;
border-bottom:1px dashed #D0D0D0;
border-left:1px dashed #D0D0D0;
border-right:1px dashed #D0D0D0;
}
/*----引用的列表名字----*/
ul.trackback li.tbname{
border-bottom:none;
background: url("default/pointblue.gif") no-repeat 0 center;
padding:3px 0 2px 12px;
margin:0px;
}
/*----引用的定义----*/
ul.trackback{
margin:5px 0 10px 10px;
}
/*----相关文章的定义----*/
ul.mutuality{
margin:5px 0 10px 10px;
border-bottom:1px dashed #D0D0D0;
}
/*----相关文章名称的定义----*/
ul.mutuality li.tbname{
background: url("default/pointblue.gif") no-repeat 0 center;
padding:3px 0 2px 12px;
margin:0px;
border:none;
}
/*----相关文章的列表----*/
ul.mutuality li.msgarticle{
background:#ffffff;
padding:0 10px 10px 16px;
border:none;
}
/*-------------------留言回复的定义------------------------------*/
li.msgarticle div.quote{
padding:10px;
background:#f0f0f0;
}
li.msgarticle div.quote-title{
margin:2px;
padding:3px;
font-size:120%;
border-bottom:1px #f8f8f8 solid;
}
/*--------------------------导航栏的定义-------------------------------------*/
/*----导航栏的大小、背景总体定义----*/
#divNavBar{
float:left;
width:778px;
border-bottom:1px solid #C0C0C0;
background:url("default/navbg.gif") repeat-x 0 0;
height:24px;
}
#divNavBar h3{
display:none;
}
#divNavBar ul{
margin:0;
padding:0;
}
/*----导航栏项目列表的定义----*/
#divNavBar li{
float:left;
padding:0 0 0 0;
margin:0 0 0 0;
font-family:"宋体","黑体";
background:url("default/navbg2.gif") no-repeat right 0;
}
/*----以下为导航栏小项目的链接变换样式----*/
#divNavBar a{
float:left;
margin:0;
padding:6px 10px 4px 10px;
height:14px;
text-decoration: none;
}
#divNavBar a:link {
color: black;
}
#divNavBar a:visited {
color: black;
}
#divNavBar a:hover {
color: white;
background:#DC143C;
}
#divNavBar a:active {
color: white;
background:#DC143C;
}
二、TEMPLATE文件夹中的各个模块如下：
1. default.html
首页显示模板，引用b_article-istop.html显示置顶文章，引用b_article-multi.html显示日志摘要，引用b_pagebar.html显示分页条，我改
东西一般都是在这里改的，新手嘛，还不太了解，只能先从这修改了，细节问题我还不会呢，慢慢来吧！
2. single.html
日志页显示模板，引用b_article-single.html显示日志
3. catalog.html
分类页显示模板，与首页模板相似
4. search.html
搜索页模板，显示搜索页面
5. tags.html
标签页模板，显示TagCloud
6. b_article-guestbook.html
留言页模板
7. b_pagebar.html
页面底部分页条模板，可以改分页条样式
8. b_article-multi.html
首页摘要文章模板
9. b_article-single.html
日志页文章模板，分别引用 b_article_trackback.html、b_article_mutuality.html、b_article_comment.html、
b_article_commentpost.html 显示日志后的 引用列表，相关文章，评论内容，评论发表框
10. b_article-istop.html
置顶文章模板
11. b_article_nvabar_l.html
日志页面文章导航，显示“上一篇”日志链接
12. b_article_nvabar_r.html
日志页面文章导航，显示“下一篇”日志链接
13. b_article_tag.html
每个tag 的显示样式
14. b_article_trackback.html
每条引用通告显示模板
15. b_article_mutuality.html
每条相关文章显示模板
16. b_article_comment.html
每条评论内容显示模板
17. b_article_commentpost.html
评论发表框模板
18. b_article_commentpost-verify.html
评论验证码显示样式
