博客美化测试

一级标题

二级标题

三级标题

四级标题

内容

var x = 1;
var y = 2;
Console.WriteLine(x + y);

美化用的CSS

#cb_post_title_url
{
     display: block;
     margin-bottom: 20px;
     border-bottom: 3px solid #567286;
     padding: 15px 0px;
     font-family :"微软雅黑";
     font-size: 18px;
     color: black;
     line-height: 30px;
     text-align: center;
     text-shadow: 2px 2px 4px #CCC;
     letter-spacing: 1px;
     -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
     -ms-transition: all 1s ease;
     -o-transition: all 1s ease;
     transition: all 1s ease;
}

#cb_post_title_url:hover
{
     color: #567286;
     text-decoration: none;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3
{
     margin: 10px 0px;
     padding: 2px 2px 5px 2px;
     border-bottom: solid 3px #567286;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     color: #567286;
     text-align: left;
     text-indent: 10px;
}

#cnblogs_post_body h1
{
     font-size: 30px;
}

#cnblogs_post_body h2
{
     font-size: 22px;
}

#cnblogs_post_body h3
{
     font-size: 16px;
}

#cnblogs_post_body h4
{
     padding: 10px;
     border:3px dashed #567286;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius: 15px;
     margin: 15px;
     font-weight:normal;
     font-style: italic;
     text-align: left;
}

#cnblogs_post_body p
{
     margin: 3px 15px;
     letter-spacing: 1px;
}

#cnblogs_post_body div.cnblogs_code
{
     margin: 10px 15px;
     border:1px dashed #567286;
     background-color: #f8f8ee;
}

#cnblogs_post_body table
{
     width: 100%;
     border-collapse: collapse;
}

#cnblogs_post_body table thead tr
{
     padding-top: 5px;
     padding-bottom: 4px;
     background-color: #566286;
     color: #ffffff;
     font-size: 1.1em;
     text-align: left;
}

#cnblogs_post_body table td, #cnblogs_post_body table th 
{
     border: 1px solid #567286;
     padding: 3px 7px 2px 7px;
}

#MySignature .copyright
{
     width: 500px;
     height: 52px;
     margin: 10px 15px;
     background-color: #f3eb7c;
     border:3px dashed #567286;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius: 15px;
     padding: 10px;
     font-size: 17px;
     color: #567286;
     text-align: left;
     line-height: 26px;
}

#blog_contents
{
     margin: 20px; 
     border: solid 1px #567286;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     padding: 10px;
     font-size: 20px;
     color: #567286;
     text-align: left;
     text-indent: 10px;
     background-color: #f8f8ee;
}

#blog_contents h2
{
     font-size: 30px;
     margin-bottom: 10px;
}

#blog_contents a
{
     display: block;
     margin-left: 10px;
     line-height: 30px;
}

#blog_contents a.h1
{
     margin-left: 10px;
}

#blog_contents a.h2
{
     margin-left: 25px;
}

#blog_contents a.h3
{
     margin-left: 50px;
}

自动生成目录的Javascript代码

var contents = [];

contents.push('<div id="blog_contents" name="blog_contents">')
contents.push('<h2>目录</h2>')
$('.postbody h1, .postbody h2, .postbody h3').each(function(index) {
    var anchor = 'content_' + index;
    $(this).attr('id', anchor).attr('name', anchor);

    $(this).html($(this).html() + '<a style="margin-left: 100px; font-size: 15px;" href="#blog_contents">返回目录</a>');

    contents.push('<a class="' + this.tagName.toLowerCase() + '" href="#' + anchor + '">' + $(this).text() + '</a>');
});
contents.push('</div>')
$('.postbody').before(contents.join(''))