博客园设置自定义页面[布局][样式]

模版选择

现在的模版选择我的基本标准就是既要宽大，又可以适应缩放显示。如果头部尽量少点就少点，选择了coffee。

下面一些样式实例有的通用有的不通，学会修改样式才是最主要的

自定义修改方法

用谷歌打开页面,F12,选中自己需要修改的模块,定位它的css样式,复制下来,在里面自定义属性,添加到定制css中

发现火狐在定位的更加精确,也就是可以精准的定位每个属性由那个块控制

 

以下是我博客中修改得css,不同模版css名称可能不同

coffee模版修改

稿纸上头空白10

#blogTitle {
height: 15px;
}
#header {
background: url(/Skins/coffee/images/header.gif) right top no-repeat;
height: 15px;
}

大标题镶嵌于稿纸顶部里面且同宽------》字体22间距2|左边距15-----》顶部上边距10和稿纸对齐

#blogTitle h1 {
font-size: 150%;
font-weight: bold;
line-height: 1.5;
        padding-top: 15px;
margin-left: 2em;
font-family: "黑体","ms song","宋体","Arial","verdana","Helvetica", "sans-serif";
       font-size: 22px;

        letter-spacing:2px;

      padding-left:15px;
}

导航栏消失,导航字体消失

.blogStats {
    float: right;
    color: #333333;
    margin-top: 8px;
    text-align: right;
display:none;

}

#navList a {
float: left;
text-align: center;
padding-top: 0px;
 margin-right: 30px;
letter-spacing:3px;

display:none;
}

#navigator {
clear: both;
 95%;
margin: auto;
height: 0px;
background: #FEFEF2 url(/Skins/coffee/images/line.gif) left bottom repeat-x;
margin-bottom: 12px;
font-size:18px;

padding-left:10px;

display:none;
}

标题直接相对于稿纸调整-----》下边距为-2.2,上边距对称-6----》添加标题上下空白对等神器块

可随意更改---》文章标题字体-22

#topics .postTitle {
   font-size: 22px;
font-weight: bold;
float: left;
     line-height: 2.2;
padding-left: 5px;

margin-bottom: 0px;

     padding-top: 6px;
}

.postBody {
line-height: 1.5;
margin-top: 0px;
}

隐藏文章底部

#blog_post_info_block {
margin-top: 20px;
display:none;
}

底部编辑-18字体，隐藏广告18字体和导航栏相同

.commentform {
 90%;
margin: auto;
margin-bottom: 10px;
display:none;
}

#topics .postDesc {
float: right;
 100%;
text-align: right;
padding-right: 5px;
color: #666;
margin-top: 5px;
font-size: 18px;
}

代码字体修改

.cnblogs_code_toolbar {
    margin-top: 5px;
display:none;
}
.cnblogs_code span {
    font-size: 16px !important;
}

.cnblogs_code pre {
    font-size: 16px !important;
    word-wrap: break-word;
    white-space: pre-wrap;

}
.cnblogs_code {
    background-color: #f5f5f5;
    font-size: 16px !important;
    border: 1px solid #ccc;
    padding: 5px;
    overflow: auto;
    margin: 5px 0;
    color: #000;
}

添加去顶部去设置去底部超链接(首页代码)

<a id="guanli"
href="https://i.cnblogs.com/posts"
style="
top: 37px;position: fixed;right: 276px;
margin:0 auto;22px;line-height:26px;font-size: 39px;font-weight: bold;
text-decoration:none;
">‖</a>

<a id="returnTop"
href="###"
style="
top: 0px;position: fixed;right: 276px;
margin:0 auto;22px;line-height:26px;font-size: 39px;font-weight: bold;
text-decoration:none;
">↑</a>
<a id="returnDown"
href="###"
style="
top: 63px;position: fixed;right: 276px;
margin:0 auto;22px;line-height:26px;font-size: 39px;font-weight: bold;
text-decoration:none;
">↓</a>

 

<script>
$(function(){
$('#returnTop').click(function () {
window.scrollTo(0,0);
$('html,body').animate({ scrollDown: '0px' }, 800);
returnfalse;
});
});
$(function(){
$('#returnDown').click(function () {
window.scrollTo(0,111200);
$('html,body').animate({ scrollDown: '0px' }, 800);
returnfalse;
});
});

</script>

控件显示

自定义样式经验

设置div里文字和顶部距离 padding-top:1px;  margin-top:1px;

模块顶部距离 padding: 0;

背景图片

这个修改对模版而言都是通用的

body {
background:url('URL') no-repeat top center fixed;
}

这里图片路径可以上传到博客本地图片,图片就有了网上路径

 搜索/工具栏样式

使用中

搜索按钮隐藏

input.btn_my_zzk{
display:none;
}

文本框

.input_my_zzk{
220px;
vertical-align:middle;
height:28px;
font-size: 17px;
}

未使用

统计信息

.blogStats {
color: #CACACA;
font-size: 15px;
letter-spacing:2px;
}

工具栏样式

.catListTitle{
border-left:5px solid #4C98F5;
padding:8px 0 8px 10px;
}

工具栏字体

#sideBarMain h3 {
font-weight: bold;
margin-bottom: 15px;
color: #333;
font-size: 16px;
border-bottom- 1px;
border-bottom-style: dashed;
border-bottom-color: #D4D4D4;
padding-bottom: 10px;
margin-top: 5px;
}

文章标题样式

标题样式不会因改变字体而改变，但是字体会，就算改变了因为样式渲染还是很显眼的

全文字体统一,在标题字体自定义字体失效,字体上下位置(由高度为height,padding-top微调文字位置),标题样式修改后必须全文统一字体18

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}

#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: 18px;
    font-weight: bold;
    height: 30px;

    line-height: 1px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
padding-left:8px;
padding-top:6px;
}
#cnblogs_post_body h2    {
    background: #008eb7;
    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: 18px;
    font-weight: bold;
    height: 30px;
     855px;
    line-height:20px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
padding-left:8px;
padding-top:6px;
}

#cnblogs_post_body h3{
    background: #2B6600;
    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: 18px;
    font-weight: bold;
    height: 30px;
     570px;
    line-height: 20px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
padding-left:8px;
padding-top:6px;
}
#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2 a:hover{
   color: rgb(255, 102, 0);
}
#页面中标题位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h2{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: rgb(255, 102, 0);
}

文章目录样式

页脚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 h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;

    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#152e97;">';
        content += '<h1 style="font-size:16px;background: #f68a33;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-size: 17px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 !important;padding: 8px 0 5px 30px;"><b>阅读目录</b></h1>';
        content += '<ol>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</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 + '"style="font-size:12px;color:#2b6695;">' + $(h3_list[j]).text() + '</a></li>';
            }

            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '"style="font-size:12px;color:#2b6695;">' + $(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 += '</ol>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr />';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
}

GenerateContentList();
</script>

CSS样式

先设置下边距为0

.postBody p, .postCon p {
 
    margin: 0 auto 1em auto;
    line-height:0;

}
#cnblogs_post_body ol {
     font-size: 18px;
    padding-left: 40px;

}

.postBody a:link, .postBody a:visited, .postBody a:active {
  font-size: 18px;
    text-decoration: underline;

}


<style type="text/css">
   


 #cnblogs_post_body a {
        color: #21759b;
    transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: all;
    transition-timing-function: linear;
    }
#cnblogs_post_body a:hover{
    margin-left: 20px
}

#navCategory  a{
    display: block;
    transition:all 0.6s;
}
#navCategory a:hover{
    margin-left: 0px
}

#blog-sidecolumn  a{
    display: block;
    transition:all 0.6s;
}
#blog-sidecolumn a:hover{
    margin-left: 20px
}

#sidebar_toptags li a{
float:left;
}
#TopViewPostsBlock li a{
margin-left: 5px;
}
#cnblogs_post_body a{
    display: block;
    transition:all 0.6s;
}
</style>