博客園皮膚等設置


  博客園官方皮膚略顯單調,所以本人花費了一點時間進行設置。

  1.先來個整體外觀查看:

  1.1:管理-》設置-》博客皮膚-》ClassicBlue:

  1.2:頁面定制css代碼:(ps:背景圖片bg6.bmp,可以通過“文件”-》“上傳”,復制當前文件鏈接即可)
 1 #header{
 2 background: url(https://files.cnblogs.com/files/why-not-try/bg6.bmp) no-repeat;
 3 }
 4 a.headermaintitle{
 5     color: #FF9800;
 6 font-size:35px;
 7 }
 8 .postTitle a:hover{
 9 color:gold;
10 }
11 .entrylistPosttitle a:hover{
12 color:gold;
13 }
14 a.c_b_p_desc_readmore{
15 font-weight:bold;
16 }
17 .postCon a{
18 font-weight:bold;
19 }
20 #MySignature{
21 background: palegoldenrod;
22     font-size: 20px;
23     text-align: center;
24     color: darkgoldenrod;
25 }
26 #blogTitle h2{
27 margin-top: 35px;
28     font-size: 23px;
29         color: darkgoldenrod;
30     font-style: italic;
31    text-align:left;
32 letter-spacing: 1.5px;
33 font-weight:bold;
34 }

  上面的CSS代碼主要是設置了一下標題,子標題,背景圖片,以及隨筆標題&閱讀原文超鏈接等樣式。

  ps1:當時找這張背景圖片,然后進行裁剪,設置1280px*100px,還是花費了一點時間的。

  ps2:更改頁面樣式要充分利用chrome的開發者工具,這是利器!

最近修改1:代碼字體太小,進行調節:(放入上面代碼34行后面即可)

1 .cnblogs_code pre{
2 font-size:16px !important;
3 font-weight: bold;
4 font-family: consolas !important;
5 }

 最近修改2:博客默認字體改為16px:

#cnblogs_post_body {
    font-size: 16px;
}

 最近修改3:“返回頂部”效果:

#comment_nav a[href='#top'] {
    position: fixed;
    left: 1200px;
    top: 550px;
    background-color: gold;
font-size:16px;
}

  

2.設置控件:(ps:按照需要進行勾選)

    以下是我的勾選示例:

    OK,就是這么簡單!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM