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

畢竟這么久了，在博客園還沒有發(fā)現(xiàn)一個比較漂亮的主題，也包括別的博主的自定義主題，要么是浮躁的大紅大紫，要么是浮夸的界面系統(tǒng)，真正好的UI應該一眼就能讓人回歸閱讀本質(zhì)，不需要太多嘈雜的訊息。

?

4年前在Cnblog和Csdn中我選擇了前者，現(xiàn)在看來是正確的，因為博客園提供了程序員喜歡的自定義Html和Css，這樣我們就可以根據(jù)自己的審美不受限制的改造自己的網(wǎng)上家園了。

那么說好了就開始改造吧，基礎的模板我選擇了 簡單的ThinkInside?作為基礎模板

是個非常樸素的樣式，長這樣：

?

選這個主題是因為我覺得頭部尚可，其他的部分改造簡單，總結了下心目中喜歡的樣式，我去除了所有多余的內(nèi)容，比如側(cè)邊欄、年月日

回歸精簡

#sideBar,#blog_post_info_block{display: none; }

再將閱讀文本內(nèi)容對齊，將主體內(nèi)容呈現(xiàn)在用戶第一眼中。

#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;}

調(diào)整文字大小和間距

/*評論框邊框*/#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內(nèi)核有諸多問題，內(nèi)存電源占用姑且不說，當使用Fixed的時候頁面渲染性能會急劇下降到30pfs以下，

給閱讀造成很大的阻塞感，所以只能犧牲美觀程度換取流暢度了。關于這個問題大家可以訪問 這里 來嘗試減緩這個問題，不過實際上效果并不明顯。

這個時候我想提下windows10的edge瀏覽器，關于這個新內(nèi)核，微軟做的還是非常好的，完全沒有這方面的問題，依舊如絲如滑。

?

更換背景我用了微博圖床。。堅持了好多年 看來很穩(wěn)

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

?

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

但是我一向是實用為主，美觀為輔的性格，雖然用小號宋體字體很銳利，顯示效果也不錯，但是長久看起來容易導致視覺疲勞，因此改成現(xiàn)在用的微軟大字號了

#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，所以現(xiàn)在傳到這里直接用博客園的。

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

?

改造完后，再加上一些標題的效果突出主次就差不多了，然后就是現(xiàn)在大家看到的這個樣子了，其實還有很多想改的細節(jié)，但是實在沒時間了。

我認為作為一名想要征戰(zhàn)全領域的技術員，首先要鍛煉的是自己的審美能力，其次是技術能力和自主改造力，因為審美能力是最容易在平時的生活中慢慢鍛煉出來的，只有心中想的效果是美好的，

再經(jīng)由自己改造才會漂亮，只有自己的體驗力（UE/UX）提高了，才能設計出好的產(chǎn)品。

?

同時也要說一句理解萬歲，要達成什么效果，就必須犧牲掉什么，一個技術博客，我不需要側(cè)邊的閱讀點擊排行，我也不想要技術歸檔，我只想一個安靜的閱讀環(huán)境，能夠在最后有一個評論框和你的評論就足夠了。

轉(zhuǎn)載于:https://www.cnblogs.com/maybreath/p/5253824.html

總結

以上是生活随笔為你收集整理的Cnblogs自定义皮肤css样式-星空观测者的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。