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）提升了，才能设计出好的产品。

 

同时也要说一句理解万岁，要达成什么效果，就必须牺牲掉什么，一个技术博客，我不须要侧边的阅读点击排行，我也不想要技术归档，我只想一个安静的阅读环境，可以在最后有一个评论框和你的评论就足够了。