碼上快樂

相關內容    簡體    繁體

博客園設置自定義頁面[布局][樣式]

本文轉載自   查看原文   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