博客園樣式修改

1 在哪裏修改?

進入本身的博客園，點擊管理，再點擊設置。共有

• 頁面定製CSS代碼
• 博客側邊欄公告（支持HTML代碼）
• 頁首Html代碼
• 頁腳Html代碼

等幾個地方輸入自定義代碼，可覆蓋博客園已有的代碼。

 

 

 

 

 

 

 

 2  如何修改_頁面定製CSS代碼?

• 隱藏不須要的

1) 按f12或者右鍵審查頁面元素，先在頁面調試，而後將肯定的css代碼寫入頁面定製CSS代碼輸入框

舉例說明:選中須要隱藏的元素,在控制檯右側style輸入 display:none; 便可看到效果 

 2) 最終能夠獲得以下css樣式,將其放入頁面定製css代碼框中，點擊保存

#ad_t2 ,#ad_c1,#HistoryToday,#under_post_news,#ad_c2,#under_post_kb,.postSeparator,.dayTitle{
display:none;
}

 3 ) 效果如圖

 

• 修改好看的樣式

好比看到別人的博客園，有個心儀的樣式

 將css代碼複製放到頁面定製CSS代碼的輸入框保存便可

.comment_btn{
  width: 100px;
    height: 35px;
    background: none;
    border: none;
    background-color: #545454;
    cursor: pointer;
    color: white;
   margin: 20px auto;
    display: inherit;

}

 查看結果

 

•  修改寬度

找到id爲home的div，修改它的寬度便可

而且修改id爲mainContent的寬度，調整與右側公告的比例。本身調式達到最佳效果。

#home{
width: 77%;
}
#mainContent{
  width: 900px;
}

 

•  給日曆添加背景，即下面的一到日都有個矩形的背景

先在網上本身找這個背景或者本身切成這樣。在咱們的博客裏面保存

查看html元素便可查看圖片連接。

 

.CalDayHeader {
    background: url(https://img2018.cnblogs.com/blog/1236245/201908/1236245-20190831161742818-689290357.gif) 50% 0 no-repeat;
    padding-bottom: 5px;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

參考

https://www.cnblogs.com/hongrunhui/p/5910374.html

 https://www.cnblogs.com/Renyi-Fan/p/9090084.html#_label0