個人博客園美化

在加入博客園的前一個月，我都在進行前端html和css的學習

現發現博客園對用戶開放高度的我的頁面定製，讓我非常驚喜

經過參考大佬們美化的主頁，我逐漸瞭解了博客園的網頁結構，因而也動了折騰的心思

我不喜歡花裏胡哨，追求簡單實用，但願個人美化主頁CSS能對您有所幫助（隨便複製拿去用吧）

 

 

美化內容：

背景每日隨機變化，使用必應的api

更改博客名大小和顏色，更改小標題的大小和顏色

更改導航欄透明效果，文章背景透明效果，側邊附件欄寬度縮小，文章寬度增長

縮小評論輸入框

關閉網頁最下廣告

 

美化教程

進入你博客園的設置界面

設置你的標題和小標題

博客皮膚選 BlackLowKey

 

把如下代碼複製放入頁面定製CSS代碼框中

html/* 必應每日隨機背景圖*/
{ background:url(https://area.sinaapp.com/bingImg/) top center no-repeat #000; background-attachment:fixed;
} body { background: none;
}
/* =============================================================*/ #blogTitle h1 a /*你的博客名*/
{ color: #00ffbf; font-family: "微軟雅黑"; font-size: 260%;
} #blogTitle h2/*你的博客小標題*/
{ color: #00ffbf; font-family: "微軟雅黑"; font-size: 120%; line-height: 1.5em; margin-left: 1em; margin-top: 10px; width: 70%; float: left; display: inline; letter-spacing: 1px;
} #navigator { background-color: #0000001a; height: 60px; margin-top: 40px;
} #main { width: auto; background: #fffc; /* 10% 透明背景*/
} #topics .postTitle { font-size: 200%; padding: 0; padding-bottom: 0.5em; border: 0;
} .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #1c7791;
} .day /* 我的主頁文章之間空隙減少 */
{ margin-bottom: 0; padding-bottom: 0; margin-top: 0;
} #mainContent { background: #fff0; /* 導航菜單半透明*/
} .postTitle { font-size: 18px;/*讓我的主頁隨筆的標題更大*/
} .postSeparator { clear: both; height: 1px; clear: both; float: right; margin: 0 auto 2em auto;
} div.commentform textarea /*縮小評論輸入框*/
{ height: 100px;
} .c_ad_block /*關閉下方廣告*/
{ display: none;
} .commentform/*關閉下方廣告*/
{ display: none;
}

最後在最下面保存，去你的博客主頁看看美化後效果吧！