发新话题
打印

sablog模板设计教程[3] - default/style.css文件分析

sablog模板设计教程[3] - default/style.css文件分析

我在前面说过,很多时候我们只修改style.css就可以做出很好的模板来.
关于css如何使用我就不在这里讲了,建议新手去网上搜一下.

----------------------------------------------------------        +                +
titlelogo                                |
                                 }pageheader
                         navlink         |
----------------------------------------------------------             +                |
        description        |     guestlink                }topmenu
----------------------------------------------------------+           +                 |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
left        |         right                  |                        |
        |                           |                        |
        |                           }page                }这部分是inmain 这之外是outmain
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |                           |                        |
        |        page**                   |                        |

-----------------------------------------------------------                        |
                 footer
-----------------------------------------------------------                         +

[ 本帖最后由 maker 于 2007-1-5 16:11 编辑 ]

TOP

body {//整体页面的样式
        margin: 0px;//外补丁设置为0,主要为了去掉页面内容和浏览器间的空隙       
        font: 12px "Verdana", "Tahoma", "sans-serif";//字体样式
        line-height: 140%;//行高
        color: #000;//字体颜色
        background-color: #cdd6dd;//最底层背景颜色
        text-align: center;//页面内容对齐方式,居中
}
form {//表单样式
        padding: 0px;//表单内补丁为0,为了去掉表单其他内容间的空隙
        margin: 0px;//表单外补丁为0,为了去掉表单其他内容间的空隙
}
h1 {
        font-size: 14px;
        color: #000;
        margin: 0px;
        padding: 0px;
}
ol li {//列表的样式
        list-style-position: outside;
        list-style-type: decimal;
}
a {//链接的样式
        color: #333399;
        text-decoration: underline;//默认有下划线
}
a:hover {//鼠标在链接上停留时链接的样式
        color: #CC0000;
        text-decoration: none;//停留时无下划线
}
td {//表格中的样式
        font: 12px "Verdana", "Tahoma", "sans-serif";
        line-height: 160%;
        color: #000;
}
textarea {//表单文本域的样式,添加评论时的文本域等都被这个控制着
        font: 12px "Verdana", "Tahoma", "sans-serif";
        padding: 4px;
}
input  {//控制文本框 密码框和按钮的样式
        background-color: #fff;
        color: #000;
        font: 12px "Verdana", "Tahoma", "sans-serif";
        padding: 3px;
}
hr {//输出一条横线  sablog中很多地方都是用这个来分隔内容的
        height: 1px;
        border: 1px solid #B3CBE1;
        margin-top: 15px!important;
        margin-top: 5px;
        margin-bottom: 15px!important;
        margin-bottom: 5px;
}
#description {//站点描述样式
        float: left;
        padding-top: 0px!important;
        padding-top: 3px;
        text-indent:2px;
        font: 12px "Verdana", "Tahoma", "sans-serif";
        color: #003366;
}
#guestlink {//菜单链接的样式   就是 注册 | 登陆 字样的样式
        float: right;
        font: 12px "Verdana", "Tahoma", "sans-serif";
        color: #003366;
}
#page {//中间部分整体样式
        width: 100%;
        background-repeat: repeat-y;
        margin: 0px;
        padding: 0px;
        float: left;
        background-color: #fff;
        background-image: url(sidebar_border        gif);
        border-bottom: 1px dotted #386792;
        margin-bottom: 1px;
        clear:both;
}
#viewmode {//浏览模式 标准 列表 字样的样式
        float: right;
}
#right {//中间右侧部分的样式
        float: right;
        width: 525px;
        padding: 12px 15px 15px 15px;
        text-align: left;
}
#top {
        padding-bottom: 12px;
        margin-bottom: 15px;
        border-bottom: 1px solid #386792;
}
#left {//中间右侧部分的样式
        float: left;
        margin: 0px;
        width: 180px;
        padding: 20px 15px 15px 15px;
        text-align: left;
}
#left h2 {//标题的样式 在default里用来控制左侧 日志分类 热门标签 日志归档 搜索文章 等字样的样式
        font-size: 14px;
        color: #999;
        padding: 15px 0px;
        margin: 15px 0px 0px 0px;
        border-top: 1px solid #B3CBE1;
}
#left ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
}
#left ul li {
        margin-bottom: 2px;
        overflow:hidden;
        display:block;
        width:178px !important;
        width /**/:178px;
        clear: both;
}
#left #icp {//备案信息样式
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #B3CBE1;
}
.formbox {
        line-height: 150%;
        padding: 5px 0px;
}
.title {//标题
        font-size: 14px;
        clear:both;
        position:relative;
        height:18px;
        font-weight: bold;
        text-indent: 5px;
        border-left: 6px solid #d6e3ef;
        border-bottom: 1px solid #d6e3ef;
        padding: 2px;
}
.newcminfo {
        font-size: 11px;
        padding-bottom: 7px;
        color: #606060;
        line-height: 13px
}
.formfield {
        color: black;
        background-color: #edf2f8;
        border:1px solid #bbb;
        padding: 3px;
}
.formbutton {//表单按钮
        color: black;
        background: #edf2f8;
        border:1px solid #bbb;
        padding-top: 0px!important;
        padding-bottom: 3px!important;
        padding: 3px 2px 0px 2px;
        height: 21px;
        border-left: 4px solid #bbb;
}

[ 本帖最后由 maker 于 2007-1-5 16:32 编辑 ]

TOP

.cal_day1 {//日历
        font-size: 11px;
        text-align: center;
}
.cal_day1 a {//日历
        text-decoration: underline;
}
.cal_day1 a:hover {//日历
        text-decoration: none;
}
.cal_day2 {//日历 今天的样式
        font-size: 11px;
        text-align: center;
        border: 1px solid #999;
        font-weight: bold;
}
.cal_day2 a {//日历 今天的链接样式
        text-decoration: underline;
}
.cal_day2 a:hover {//日历 鼠标停留在今天的链接上时的样式
        text-decoration: none;
}
.curdate {//日历 年月的样式
        font-weight: bold;
        font-size: 11px;
        text-align: center;
        padding-bottom: 10px;
}
.curdate a {//日历 年月的链接样式
        text-decoration: none;
}
.curdate a:hover {//日历 鼠标停留在年月的链接上时的样式
        text-decoration: underline;
}
.attach {//附件
        padding: 10px 0px;
}
.attach-desc {//附件
        background-color: #edf2f8;
        padding: 5px;
        border: 1px solid #000;
        display: inline;
}
.content {//文章正文样式
        clear: both;
        display: block;
        margin-right: auto;
        margin-left: auto;
}
.tags {//标签的样式
        padding: 10px 0px;
}
.pagelink {//翻页部分 普通页码样式
        padding:1px 3px;
        font-size:11px;
        font-weight:normal;
        border:1px solid #386792;
}
.pagelink a {//翻页部分 普通页码链接样式
        color: #333399;
        text-decoration: none;
}
.pagelink2 {//翻页部分 第一页 最后一页 上页 下页的样式
        padding:1px 3px;
        font-size:11px;
        font-weight:bold;
        border:1px solid #386792;
}
.pagelink2 a {//翻页部分 第一页 最后一页 上页 下页的链接样式
        color: #333399;
        text-decoration: none;
}
.pagelink3 {//翻页部分,Record:的样式
        padding:1px 3px;
        font-size:11px;
        font-weight:normal;
        border:1px solid #386792;
        background-color:#edf2f8;
}
.pagecurrent {//翻页部分,当前页链接的样式,如果当前是第一页,那么1就为此样式
        padding:1px 3px;
        font-size:11px;
        font-weight:bold;
        color:#000;
        background-color:#d6e3ef;
        border:1px solid #386792;
}
.post {//文章整体样式
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
}
.posttitle {//文章标题样式
        text-indent: 8px;
        border-left: thick solid #386792;
        font-size: 14px;
        font-weight: bold;
        padding: 2px;
        margin-top: 5px;
        clear:both;
}
.posttitle a {//文章标题链接样式
        color: #333399;
        text-decoration: underline;
}
.posttitle a:hover{//鼠标停留在文章标题链接上时的样式
        height: 70px!important;
        background-color: #d6e3ef;
        border-bottom: 1px solid #386792;
        vertical-align: text-bottom;
}
#titlelogo {//博客名称 或者 logo 的样式
        padding: 10px;
        float: left;
}
#article-other {
        text-align: center;
        margin-bottom: 15px;
}
#tburl {
        margin: 5px 0px 15px 0px;
}
#trackbacks {//引用部分的样式
        margin: 5px 0px 15px 0px;
}
.tbcontent {
        margin: 5px 0px 10px 0px;
}
.tbdate {
        color: #777777;
        font-size: 11px;
        padding-top: 2px;
        text-align: right;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #B3CBE1;
}
.cmcontent {//评论内容样式
        margin: 5px 0px 15px 0px;
        overflow:hidden;
        display:block;
        width:523px !important;
        width /**/ :571px;
        clear: both;
}
.cmdate {//评论日期样式
        color: #777777;
        font-size: 11px;
        padding-top: 2px;
        text-align: right;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #B3CBE1;
}
#message {//message.htm中消息的样式
        margin-top: 100px;
        background-color: #fff;
        text-align:center;
        width: 500px;
        padding: 20px;
        border: 1px dotted #386792;
        margin-right: auto;
        margin-left: auto;
}
.navlink {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的样式
        float:right;
        padding-bottom:5px;
        font-family: "Tahoma", "sans-serif";
        font-weight: bold;
        margin-top: 50px;
}
.navlink a {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
        padding-right:10px;
        text-decoration: none;
}
.navlink a:hover {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
        padding-right:10px;
        text-decoration: underline;
}
#topmenu { //description + guestlink的整体样式     
        height: 18px!important;
        background-color: #edf2f8;
        border-bottom: 1px dotted #386792;
        padding: 5px;
}
.week {//日历中 星期 一 二 三 四 无 六 日 的样式
        padding: 3px;
        font: 11px "Tahoma", "sans-serif";
        background-color: #eee;
        border-bottom: 2px solid #aaa;
        text-align: center;
}
.keywordtd {
        padding: 3px 10px;
        border-bottom: 1px solid #ccc;
}
.listtd {
        padding: 3px 0px;
        border-bottom: 1px solid #ddd;
}
.listtd a {
        text-decoration: none;
}
.listtd a:hover {
        text-decoration: underline;
}
.phpcode {//这个是在添加文章时用的,用来显示php或者其他代码,要手动添加
        border: 1px solid #b3cbe1;
        border-left: 3px solid #b3cbe1;
        background-color: #f8f8f8;
        color: #000000;
        margin: 5px;
        padding: 5px;
}
.quote {
        margin: 5px 0px;
        padding: 5px;
        border: 1px solid #000;
        background-color: #edf2f8;
}
.divOFF {
        display:none;
}
.divON {
        display:block;
}
.attachttitle {//日志归档标题样式
        font-weight: bold;
}
.attachicon {//日志归档
        float: right;
}
.attachdesc {//日志归档
        padding: 10px 0px;
}

先写这些吧,台湾地震之后博客访问就奇慢,又连不上了,有高手帮补充一下
未完待续

[ 本帖最后由 maker 于 2007-1-5 16:33 编辑 ]

TOP

刚刚差点连死的心都有了

全部写完之后发表帖子,提示字数超过10000,于是我删减了一些,又提交,这次不是js提示了,而是
对不起,您的帖子超过 10000 个字符的限制,请返回修改。

[ 点击这里返回上一页 ]
按完之后我都要哭了,什么都没有了,怎么都会不去了。
只能返回
对不起,您的帖子超过 10000 个字符的限制,请返回修改。

[ 点击这里返回上一页 ]
实在没有办法,我只好去下载了一个Sniffer截包工具,在刷新的时候截下了post的全部数据包,然后又开始重新组合数据,修改数据,我哭啊。。。。。

angel,把字数上限修改一下吧,怎么也得50000字节呀

TOP

angel,把字数上限修改一下吧,怎么也得50000字节呀

真的要改呀

TOP

哦,虚惊一场啊,鼓励一下,但你的这个css解释是要拿具体的案例来比划才好,每个designer的习惯不同,对css的定义有自己的习惯的。建议发贴的时候在声明一下,否则新手看起来不明白

TOP

这个是default的css样式表,不是写的很清楚么?
只是给大家分析一下,学习而已。

TOP

进来支持下,^_^

TOP

我也建议ANGEL把那个设置成50000啊!!
因为网上有很多的箱楼主样的人啊!!
                    你改吧!!我很同情这位兄弟!!

TOP

学习做风格   感谢楼主

TOP

支持楼主!我们大家一起努力!
Sablog-X  Plus 官方: http://www.sablogplus.org
http://www.ihjin.com

TOP

发新话题