下面这个是默认的ZBLOG CSS样式表 里面附带有最全的CSS注释 让你一看就理解了。如果您觉得麻烦 可以下载我们提供的样式CSS文件,更加方便您的学习与修改。
下载地址:default.zip /*--------------------------博客全局设置-------------------------------*/
/*----关于页面的设置[边距、字体颜色、大小、背景颜色]----*/ 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; } /*--------------------------blog名称及版权的定义-------------------------------------*/ /*----blog名称的总体定义----*/ #BlogTitle{ font-size:32px; margin:54px 0 0 10px; padding:0; font-weight:bold; }
/*----以下为blog名称的链接变换定义----*/ #BlogTitle a{ color:#F0FFF0; } #BlogTitle a:hover { color: #DC143C; text-decoration: none; } #BlogTitle a:active { color: #DC143C; text-decoration: none; }
/*----blog名称下副标题的定义----*/ #BlogSubTitle{ color: #F0FFF0; font-size:12px; margin:2px 0 0 10px; padding:0; } /*----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; } |