碼農熊的博客樣式 灰色調

前言

原設計來自於 李寶亨 共享一下我的自定義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博客皮膚