码上快乐

相关内容   简体   繁体

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

本文转载自  查看原文  2018-08-31 08:31  1307 

模版选择

现在的模版选择我的基本标准就是既要宽大，又可以适应缩放显示。如果头部尽量少点就少点，选择了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; width: 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 { width: 90%; margin: auto; margin-bottom: 10px; display:none; } #topics .postDesc { float: right; width: 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;width: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;width: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;width: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{ width: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-width: 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;
     width: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;
     width: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>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 自定义简洁博客园布局样式 自定义博客园样式 博客园自定义样式 博客园自定义样式 如何自定义博客园样式 关于博客园自定义样式 博客园自定义样式 博客园自定义样式 博客园自定义样式 可爱的博客园样式美化、自定义博客园主题样式
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM