松亮的博客

来源于网络：转载

很喜欢j-spring这个样式，虽然有很多的人都在使用，但是他们也未必清楚这个样式的全部内容，在官方论坛里面看到有人把zblog默认的CSS样式做了一下说明，这里我也就本人使用的j-spring样式，给大家注明一下它的全部内容，因为本人在里面做了不少的修改，为了方便大家，我将以默认的j-spring的CSS为例。

/*--------------------------全--局-------------------------------*/

/*----关于页面的设置[边距、字体颜色、大小、背景颜色]----*/

body{
 margin:0;
 padding:0;
 color:#000000;
 font-size:12px;
 background:#f0ece0 url("j-spring/bg2.gif") repeat-x top;
 text-align:center;
}

/*----字体链接变换的定义----*/
a{
 text-decoration: none;
}
a:link {
 color: #4e0a13;
}
a:visited {
 color: #4e0a13;
}
a:hover {
 color: #FF7850;
 text-decoration: underline;
}
a:active {
 color: #FF7850;
 text-decoration: underline;
}

/*----以下为正文 列表 段落 图片的定义----*/
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;
}

/*--------------------------------主要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:#f6f4e9 url("j-spring/bg.gif") repeat-y center;
}

#divMiddle{
 width:778px;
 margin:0;
 padding:0;
 text-align:left;
 float:left;
 background:#eeeade;
}

/*----顶部图片的大小、边距、颜色、背景的定义----*/

#divTop{
 width:778px;
 margin:0 auto;
 padding:0;
 text-align:left;
 float:left;
 height:130px;
 background:#f6f4e9 url("j-spring/toppic.jpg") 0 0;
 border-bottom:1px solid #666;
}

/*----侧栏宽度、边距、浮动位置的定义----*/

#divSidebar{
 width:200px;
 margin:0 0 0 0;
 padding:0 0 10px 0;
 text-align:center;
 float:left;
 background:#eeeade;
}

/*----主栏栏宽度、边距、浮动位置的定义----*/

#divMain{
 width:568px;
 margin:0 0 0 0;
 padding: 0;
 text-align:left;
 float:right;
 background:#f6f4e9;
}

/*----底部大小、边距、浮动位置、背景的定义----*/

#divBottom{
 width:778px;
 margin:0 auto;
 padding:0;
 text-align:center;
 float:left;
 height:70px;
 background:#484848 url("j-spring/bg_bottom.gif") repeat-x 0 0;
}
#divBottom a{
    color:#CCCCCC;
}
 

/*----------------------------侧栏模块的参数定义-----------------------------------*/

/*----侧栏总体定义[浮动方向、宽度、边距等]----*/
div.function {
 float:left;
 width:190px;
 margin:10px 0 0 0;
 padding:0 0 0 0;
 text-align:left;
 border-left:10px solid #eeeade;
 border-right:10px solid #eeeade;
}

/*----侧栏标题的定义----*/
div.function h3{
 font-size:12px;
 height:16px;
 margin:0 0 0 0;
 padding:5px 0 0 5px;
 color:#484848;
 background:url("j-spring/nav_bg1.gif") repeat-x;
}

/*----侧栏正文的定义----*/
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("j-spring/pointblue.gif") no-repeat 3px 4px;
}

/*----侧栏图标汇集的定义----*/

#divMisc{
 padding:10px 0 5px 0;
}

/*----侧栏图标汇集的标题隐藏----*/
#divMisc h3{
 display: none;
}

/*----侧栏图标汇集的列表定义----*/
#divMisc li{
 padding:2px 0 2px 15px;
 background-image : none;
}

/*----侧栏控制面板列表定义----*/

#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:538px;
 padding:4px 0 4px 10px;
 margin:2px 0 2px 0;
 font-size:14px;
 color: #284259;
 height:14px;
 border-top: 1px dashed #91895b;
 border-left: 3px solid #91895b;
 border-bottom: 1px dashed #91895b;
}

/*----文章日期的定义----*/
div.post .post-date{
 width:538px;
 margin:0 0 0 0;
 padding:5px 5px 5px 5px;
 font-size:12px;
 color: #333;
}

/*----文章底部的定义----*/

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;
}

/*----文章正文文字的定义----*/

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%;
}

/*----文章正文内媒体标签的定义----*/

div.post-body div.media a{
 padding-left:16px;
 background:#FBFBFB url("j-spring/media.gif") no-repeat 0 center;
}

/*----文章内图片的定义----*/

div.post-body img{
 padding:4px 4px 4px 4px;
 border:1px solid #D5D4CD;
 clear : both;
 float : none;
}

/*----文章正文段落的定义----*/

div.post-body p{
 margin:10px 0 15px 0;
 padding:0;
}

/*----文章正文文字段落内图片标签的定义----*/
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;
}

/*----文章正文内1级标题标签的定义----*/

div.post-body h1{
 color: #000000;
 margin:0;
 padding:0;
 font-size:16px;
}

/*----文章正文内二级标签的定义----*/
div.post-body h2{
 color: #000000;
 margin:0;
 padding:0;
 font-size:14px;
 }

/*----文章正文内三级标签的定义----*/
div.post-body h3{
 color: #000000;
 margin:0;
 padding:0;
 font-size:13px;
}

/*----文章正文内四级标题标签的定义----*/
div.post-body h4{
 color: #000000;
 margin:0;
 padding:0;
 font-size:12px;
}

/*----文章正文内五级标题标签的定义----*/
div.post-body h5{
 color: #000000;
 margin:0;
 padding:0;
 font-size:11px;
}

/*----文章正文内六极标题标签的定义----*/
div.post-body h6{
 color: #000000;
 margin:0;
 padding:0;
 font-size:10px;
}

/*-------------blog名称及版权的定义----------------------*/
 

/*----blog名称的总体定义----*/

#BlogTitle{
 font-size:32px;
 margin:54px 0 0 20px;
 padding:0;
 font-weight:bold;
 font-family:"黑体","宋体";
}

/*----blog名称的链接变换定义----*/
#BlogTitle a{
 color:#484848;
}
#BlogTitle a:hover {
 color: #DC143C;
 text-decoration: none;
}
#BlogTitle a:active {
 color: #DC143C;
 text-decoration: none;
}

/*----blog名称下副标题的定义----*/
#BlogSubTitle{
 color: #484848;
 font-size:12px;
 margin:2px 0 0 20px;
 padding:0;
}
#BlogPowerBy{
 color:#CCCCCC;
 font-size:12px;
 height:20px;
 margin:0;
 padding:20px 10px 0 10px;
 text-align:right;
 font-weight:normal;
}

/*----blog版权的定义----*/
#BlogCopyRight{
 color:#CCCCCC;
 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:0 0 2px 16px;
 border-bottom:1px solid #aaaaaa;
 background: url("j-spring/quote.gif") no-repeat 0 center;
}

/*----评论底部部分的定义----*/
p.postbottom {
 margin:0 0 10px 0;
 padding:2px 0 0 16px;
 border-top:1px solid #aaaaaa;
 background: url("j-spring/trackback.gif") no-repeat 0 center;
}

#frmSumbit{
 padding:0;
 margin:0;
}

#frmSumbit p{
 padding:5px 0 5px 0;
}

/*----评论按钮的定义----*/
input.button{
 border: 3px double #909090;
 border-left-color: #c0c0c0;
 border-top-color: #c0c0c0;
 color: #333;
 padding: 0.05em 0.25em 0.05em 0.25em;
}

/*----评论文字的定义----*/

input.text {
 padding: 0.15em 0.25em 0.20em 0.25em;
 border: 1px dashed #909090;
 width: 200px;
 background:#FFFDF1;
}

/*----评论文字框的定义----*/

textarea.text {
 padding: 0.15em 0.25em 0.20em 0.25em;
 border: 1px dashed #909090;
 width: 80%;
 height: 80px;
 width: 520px;
 height: 120px;
 background:#FFFDF1;
}

/*-----------侧栏日历的定义------------*/

/*----日历的总体定义----*/
#divCalendar{
 padding:0 0 0 0;
 text-align:center;
}

/*----日历标题部分进行了隐藏----*/

#divCalendar h3{
 display:none;
}

/*----日历div的定义----*/

#divCalendar div{
 margin:0 0 0 0;
 padding:0 0 5px 8px;
 float:left;
}

/*----日历各月份背景图片的定义----*/
#divCalendar div.month1{
 background:url("j-spring/month1.gif") no-repeat center 10px;
}
#divCalendar div.month2{
 background:url("j-spring/month2.gif") no-repeat center 10px;
}
#divCalendar div.month3{
 background:url("j-spring/month3.gif") no-repeat center 10px;
}
#divCalendar div.month4{
 background:url("j-spring/month4.gif") no-repeat center 10px;
}
#divCalendar div.month5{
 background:url("j-spring/month5.gif") no-repeat center 10px;;
}
#divCalendar div.month6{
 background:url("j-spring/month6.gif") no-repeat center 10px;
}
#divCalendar div.month7{
 background:url("j-spring/month7.gif") no-repeat center 10px;
}
#divCalendar div.month8{
 background:url("j-spring/month8.gif") no-repeat center 10px;
}
#divCalendar div.month9{
 background:url("j-spring/month9.gif") no-repeat center 10px;
}
#divCalendar div.month10{
 background:url("j-spring/month10.gif") no-repeat center 10px;
}
#divCalendar div.month11{
 background:url("j-spring/month11.gif") no-repeat center 10px;
}
#divCalendar div.month12{
 background:url("j-spring/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;
 border-top:1px solid #aaaaaa;
 border-bottom:1px solid  #aaaaaa;
}

/*----日历年份的定义----*/

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;
 text-decoration : line-through;
 color:#4e0a13;
 font-weight : bold;
}

/*----没有文章的日期的定义----*/
p.nd{
 float:left;
 width:25px;
 height:18px;
 margin:0 0 0 0;
 padding:2px 0 0 0;
 text-align:center;
 vertical-align :middle;
}

/*------------相关文章和引用的定义------------*/

ul.msg{
 width:548px;
 margin:10px 0 40px 10px;
 padding:0 0 0 0;
 text-align:left;
 list-style-position : outside;
}
li.msgname{
 border-bottom:1px solid Silver;
 padding:2px 0 2px 5px;
 margin:0px;
}
li.tbname{
 border-bottom:1px solid Silver;
 padding:2px 0 2px 5px;
 margin:0px;
}
li.msgurl{
 text-align:right;
 padding:2px 10px 2px 10px;
 margin:0;
 background:#E6E5DC;
}
li.msgarticle{
 list-style-position : outside;
 padding:15px 10px 15px 10px;
 margin:0;
 background:#F6F4EE;
 line-height:150%;
}

/*----发表时间的定义----*/
li.msgtime{
 text-align:right;
 padding:2px 5px 0 10px;
 margin:0 0 0 0;
 border-bottom:1px solid Silver;
 background:#F6F4EE;
}

/*--------------------------导航栏的定义-------------------------------------*/

/*----导航栏的大小、背景总体定义----*/

#divNavBar{
 float:left;
 width:778px;
 border-bottom:1px solid #969EA4;
 background:url("j-spring/nav_bg.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("j-spring/nav_bgline.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: #f7eec7;
}
#divNavBar a:visited {
 color: #f7eec7;
}
#divNavBar a:hover {
 color: white;
 background:#540909;
}
#divNavBar a:active {
 color: white;
 background:#333;
}

当然我在里面做出了不少的修改，修改内容将会在下篇文章里面给大家详细讲解，通过上面的注释，可以方便大家对模版做一些简单的修改，当然，如果要大量修改的话还得借助工具等。

该主题默认的下载地址为：http://bbs.rainbowsoft.org/attachment.php?aid=121请用软件下载。如果链接失效，你可以在评论中留下你的邮箱并发邮件到我的邮箱索要该样式。