Cnblogs自定義皮膚css樣式-星空觀測者

不知不覺來Cnblogs也這麼久了，然而Blogs提供的主題仍是依舊那麼復古，總以爲閱讀起來不免枯燥，雖然我認爲作技術不能夠太過浮躁，可是一個美觀的主題終究是吸引人眼的第一要素。

畢竟這麼久了，在博客園尚未發現一個比較漂亮的主題，也包括別的博主的自定義主題，要麼是浮躁的大紅大紫，要麼是浮誇的界面系統，真正好的UI應該一眼就能讓人迴歸閱讀本質，不須要太多嘈雜的訊息。

 

4年前在Cnblog和Csdn中我選擇了前者，如今看來是正確的，由於博客園提供了程序員喜歡的自定義Html和Css，這樣咱們就能夠根據本身的審美不受限制的改造本身的網上家園了。

那麼說好了就開始改造吧，基礎的模板我選擇了 簡單的ThinkInside 做爲基礎模板

是個很是樸素的樣式，長這樣：

 

選這個主題是由於我以爲頭部尚可，其餘的部分改造簡單，總結了下心目中喜歡的樣式，我去除了全部多餘的內容，好比側邊欄、年月日

迴歸精簡

#sideBar,#blog_post_info_block
 {
    display: none;
}

再將閱讀文本內容對齊，將主體內容呈如今用戶第一眼中。

#under_post_news
 {
    display: none;
}


/*評論框大小*/

#tbCommentBody.comment_textarea{
    width:890px;
}


/*尾部間距*/

#footer
 {
   text-align:center;
   border-top:2px solid green;
   margin-left:25px;
   margin-right:25px;
   padding-top:10px;
   padding-bottom:10px;
}


/*居中間距*/

#mainContent .forFlow {
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
    float: none;
    width: auto;
    
}

調整文字大小和間距

/*評論框邊框*/

#comment_form_container,#blog-comments-placeholder
{
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
padding:20px;
}



#comment_nav,#homepage1_HomePageDays_DaysList_ctl05_ImageLink
{
 display: none;
}

.postBody {
    border-bottom: 2px solid green;
}

.day {
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    margin-bottom:5px;
}

.postSeparator {
display: none;
}


.postTitle {
    border-left: 3px solid #21759b;
    font-size: 110%px;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    padding-left: 10px;
}

#cb_post_title_url.postTitle2
{
    font-size: 120%;
}

.dayTitle a:link
{
    display:none;
}

關於背景圖是否使用Fixed固定的問題我考慮了好久，由於目前Chrome的Webkit內核有諸多問題，內存電源佔用姑且不說，當使用Fixed的時候頁面渲染性能會急劇降低到30pfs如下，

給閱讀形成很大的阻塞感，因此只能犧牲美觀程度換取流暢度了。關於這個問題你們能夠訪問 這裏 來嘗試減緩這個問題，不過實際上效果並不明顯。

這個時候我想提下windows10的edge瀏覽器，關於這個新內核，微軟作的仍是很是好的，徹底沒有這方面的問題，依舊如絲如滑。

 

更換背景我用了微博圖牀。。堅持了好多年 看來很穩

body
{
background-image: url("http://ww4.sinaimg.cn/large/637d0877gw1exlma5gj0wj21hc0u04p6.jpg");
}

 

關於在文字閱讀方面的細化我考慮了許多，包括文字大小，雖說文字較小會比較美觀，以下：

可是我一貫是實用爲主，美觀爲輔的性格，雖然用小號宋體字體很銳利，顯示效果也不錯，可是長久看起來容易致使視覺疲勞，所以改爲如今用的微軟大字號了

#main {
font-size:15px;
font-family:微軟雅黑;
 padding-left: 0px;
 padding-right: 0px;
}

在關於邊框是否加上Box描邊陰影的問題上我也考慮了好久

我一開始是以爲加陰影可能會有壓迫感，不加比較扁平化舒服，可是怎麼說呢，WIN10和OSX都有加，那我大概下降下陰影效果也加上算了。。

背景色的話，純白當然是最好看的，固然也是最傷眼的，眼睛這麼重要的東西確定要好好對待，所以我選擇了透明土灰= =、

#home {
opacity: 0.95;
width:970px;
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
box-shadow:0 0 20px black;
}

最後把背景色不一樣的引號幹掉

 

從新PS幾個圖標，你們喜歡哪一個就用哪一個吧，之前用的是都是微博圖牀，可是不支持透明png，因此如今傳到這裏直接用博客園的。

.feedbackCon {
 background: url('http://images2015.cnblogs.com/blog/370709/201612/370709-20161230031921867-127780074.png') no-repeat 5px 0px;
}

 

改造完後，再加上一些標題的效果突出主次就差很少了，而後就是如今你們看到的這個樣子了，其實還有不少想改的細節，可是實在沒時間了。

我認爲做爲一名想要征戰全領域的技術員，首先要鍛鍊的是本身的審美能力，其次是技術能力和自主改造力，由於審美能力是最容易在平時的生活中慢慢鍛煉出來的，只有心中想的效果是美好的，

再經由本身改造纔會漂亮，只有本身的體驗力（UE/UX）提升了，才能設計出好的產品。

 

同時也要說一句理解萬歲，要達成什麼效果，就必須犧牲掉什麼，一個技術博客，我不須要側邊的閱讀點擊排行，我也不想要技術歸檔，我只想一個安靜的閱讀環境，可以在最後有一個評論框和你的評論就足夠了。