自定义博客样式

页面定制CSS代码

 

/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: black;
    margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: #336699;
    margin: 10px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: #00B271;
    margin-right: 300px;
}
/*  正文 */
#cnblogs_post_body p {
    font-size: 12pt;
}
/*  blockquote改变默认*/
blockquote{
    background-color: #eedff9;
    border: 1px solid #0be8f6;
    border-style: dotted;
}
/*  代码样式 */
.cnblogs_code pre {
font-family: Courier New!important;
font-size: 13px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family: Courier New!important;
font-size: 13px!important;
line-height: 1.5!important;
}
/*  修改表格样式 */
table{
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
table td, table th{
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
}
table thead th{
    background-color: #CCE8EB;
    width: 100px;
}
table tr:nth-child(odd){
    background: #fff;
}
table tr:nth-child(even){
    background: #F5FAFA;
}

/* adblock */
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

 

页脚Html代码

<script language="javascript" type="text/javascript">

// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   

    /*   var qqinfo =  '<p style="color:navy;font-size:12px">此处可以添加文字</p>';
    $(mainContent[0]).prepend(qqinfo);    */ 
}

GenerateContentList();
</script>

 

 

标题优先使用h2,子标题h3 ，图片400px左右

  几种比较和谐的文字背景颜色搭配