【转】给博客园博文标题加个漂亮的背景色

这种效果

地址：http://www.java123.net/v/470409.html

 

在博客上有人留言说我的博客内容排版格式，下文对此做个总结。说明下：该东东也是我借鉴一个Web前端高手的，现在来借花献佛。

配置

登陆博客后，在【管理】-->【设置】里

将如下代码粘贴在“通过CSS代码定制代码页面风格”文本框里,并且取消掉“禁用模板默认CSS”

<style type="text/css">

#cnblogs_post_body

{

color: black;

font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;

font-size: 16px;

}

#cnblogs_post_body h1

{

background: #2B6695;

border-radius: 6px 6px 6px 6px;

box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

color: #FFFFFF;

font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

font-size: 17px;

font-weight: bold;

height: 25px;

line-height: 25px;

margin: 15px 0 !important;

padding: 5px 0 5px 20px;

text-shadow: 2px 2px 3px #222222;

}

@media screen and (min-width: 1px) and (max-width: 800px)

{

#mytopmenu

{

margin-left: 0;

margin-right: 0;

width: 100%;

}

#centercontent

{

padding-left: 0;

padding-right: 0;

width: 100%;

}

#leftcontent

{

width: 100%;

position: static;

width: 100%;

}

#footer

{

margin: 0;

width: 100%;

}

#comment_form

{

display: none;

}

#header

{

display: none;

}

#green_channel

{

display: none;

}

#centercontent img { width: 98% !important; }

}

</style>

将如下JavaScript 代码填入“页脚Html代码”

<script type="text/javascript">

var meta = document.createElement('meta');

meta.setAttribute('name', 'viewport');

meta.setAttribute('content', 'initialwidth=device-width,initial-scale=1');

document.getElementsByTagName('head')[0].appendChild(meta);

</script>

这两个都填写好后，保存即可。

博文标题格式为h1

在你每次写博文的时候，将你的文章标题保存为h1（即标题1），比如用word写博客

预览

发表博文后，你会发现凡是标题1的内容，会显示为如下样式，比如：