码农熊的博客样式 灰色调

前言

原设计来自于李宝亨 共享一下我的自定义CSS博客皮肤

看到李宝亨共享的CSS样式时，我是眼前一亮的，真的非常好看。

但对于我的1024×768的小屏而言，好像不太兼容。

所以就根据个人的调子将李宝亨的样式进行了一些修改

1.改成了灰色调

2.没有使用图片

3.全部采用圆角风格

4.细节部分采用默认样式

色彩

#ccc

#999999

#888888

#777777

#666666

#555555

效果展示

代码

页面设置

/*公用*/
body {
color:#333;background:#FFF;font-family:"verdana","宋体","Arial";font-size:10pt;line-height:1.8em; background:#888888;
}
#home {
    background:#fff;
    overflow:auto;
    border:solid 1px #fff;
}
/*段落*/
.postBody p,.postCon p {
    margin:7px 0;
    line-height:24px;
}
h1 {
    margin:0;
}
h3 {
    font-size:15px;
    font-weight:bold;
}
/*超链接*/
a {
    color:#464646;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited,a:hover {
    color:#464646;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
image {
    border:none;
}
#header {
    padding:20px;
}
/*博客标题*/
#blogTitle,#blogTitle a {
    font-weight:bold;
    color:#888888;
}
/*子标题*/
.subtitle {
    padding-left:30px;
    font-size:14px;
    color:#999;
    font-weight:normal;
    margin:10px 0;
}
/*导航栏*/
#navigator {
border-radius: 4px;
    font-size:16px;
    height:48px;
    background:#888888;
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}
#navList li {
    /*border:solid 1px #80BB01;
    */
margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    /*border:solid 1px #BFE866;
    */
background:#999999;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:right;
}
#main {
    padding:20px;
}
/*左边*/
#sideBarMain {
 width:200px;float:left;border-right:1px solid #666;margin-right:20px;
}
#sideBarMain a {
    color:#666;
}
#leftcontentcontainer {
    color:#666;
}
.newsItem {
    color:#666;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
/*主面板*/
#mainContent{float:right;margin-left:-250px;width:100%;}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    /*border-bottom:solid 5px #489BF0;
    */
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
    color:#464646;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#464646;
}
.dayTitle {
    display:none;
}
/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}
.c_b_p_desc a {
    color:#888;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    border-bottom-width:1px;
    border-bottom-style:dotted;
}
/*右侧图片*/
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
}
.forFlow{margin:0 16px 0 220px;}
/*博文页*/
#topics .post {
    background:#fff;
}
.postCon {
    padding:10px 20px 0 20px;
}
.postDesc {
    margin:0 30px;
    margin-bottom:2px;
    padding:8px 0px;
    font-size:12px;
    color:#aaa;
    background:#fff;
    text-align:right;
}
.postDesc a {
    color:#AAA;
}
.postBody {
    padding:0;
}
/*google搜索框*/
#google_q,#q {
    height:26px;
    width:120px;
    border:solid 1px #aaa;
    box-shadow:inset 0 0 5px #aaa;
}
/*按钮*/

.btn_my_zzk {
    border:none;
    height:30px;
    width:80px;
    padding:1px;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#888888;
    color:#fff;
 border-radius: 4px;
}
.btn_my_zzk:hover {
    background:#999999;
}
/*评论按钮*/

#btn_comment_submit {
    border:none;
    height:48px;
    width:120px;
 border-radius: 4px;
}
/*评论按钮*/
.comment_btn {
    font-family:'Microsoft Yahei';
    border:none;
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#888888;
    color:#fff;
 border-radius: 4px;
}
#btn_comment_submit:hover {
    background:#999999;
 border-radius: 4px;
}
/*评论标题*/
.postTitle,.entrylistPosttitle,.feedback_area_title{border-bottom:1px solid #ddd;font-size:14px;font-weight:bold;margin:20px 0 10px;}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
div.commentform textarea {    width:450px;height:300px;ont-size:13px;}
/*评论条目*/
.feedbackItem{padding:8px;border-bottom:1px dotted #ccc;}
/************************************分类页****************************************/
.entrylist {
    padding:10px 20px;
    background:#fff;
}
.entrylistItem {
    margin:10px 0;
    padding:10px;
}
.entrylistPosttitle {
    font-size:18px;
    font-weight:bold;
    padding-left:30px;
}
.entrylistPostSummary {
    padding:10px;
}
.entrylistItemPostDesc {
    font-size:12px;
    color:#999;
    padding-left:40px;
}
/*尾部*/

#footer {
    font-size:12px;
    margin:20px;
    padding:12px;
    text-align:center;
    background:#999999;
    color:#DDD;
    font-size:14px;
    border-radius: 4px;
}

文章设置

<style type="text/css">     
    .First
    {
        margin: 10px 0;
        font-family: 'Microsoft Yahei';
        text-align: left;
        padding: 6px 20px;
        color:#fff;
        background: #888888;
        font-size: 20px;
        border-radius: 4px;
        clear: both;
    }
   .Second
    {
        margin: 10px 0;
        font-family: 'Microsoft Yahei';
        padding: 6px 20px;
        background: #999999;
        color: #fff;
        font-size: 18px;
        border-radius: 4px;
        clear: both;
    }
        
        
    .Third
    {
        margin: 10px 0;
        padding: 6px 20px;
        font-family: 'Microsoft Yahei';
        margin: 15px 0;
        font-size: 16px;
        color: fff;
        background: #CCCCCC;
        border-radius: 4px;
        clear: both;
    }
    .note
    {
        margin: 10px 0;
        padding: 15px 20px 15px 60px;
        font-size: 15px;
        font-family: 'Microsoft Yahei';
        box-shadow: 0 0 8px #aaa;
        clear: both;
    }
        </style>

使用方法

点击“管理”-“设置”

页面设置

文章设置

最后请记得按“保存”

如果在你那边不兼容的话，请告诉我，谢谢。

后续

1.关于圆角：

用的是CSS3中的border-radius border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式 对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等

关于兼容的问题，接下来我会修改的。

资料：

http://lwl0606.cmszs.com/?p=1004 

http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

2.灰色调确实有些沉闷，以后我会尝试采用不同的配色方案。

资料来源

李宝亨 共享一下我的自定义CSS博客皮肤