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

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

转载于:https://www.cnblogs.com/maybreath/p/5253824.html

Cnblogs自定义皮肤css样式-星空观测者相关推荐

CnBlogs自定义博客样式
一.前言一直觉得博客园自带的样式不够简介美观,所以想着使用CSS美化下,同时写篇博客总结下以供后人参考.本文中的全部代码在这:github 二.准备工作 2.1 申请js权限首先,在自定义博客样式 ...
自定义滚动条CSS样式
首先,给个默认css,清除掉以前的样式,给默认背景 .scrollbar {margin-left: 30px;float: left;height: 300px;width: 65px;backgr ...
css样式的优先顺序
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=caj1j&title=css%E6%A0%B7%E5%BC%8F%E7%9A%84% ...
一键换肤自定义css样式实现
在项目中有很多时候都有一键换肤的需求.刚好接了这样的一个需求,就把过程记录下来. 我用了自定义css来实现. 创建皮肤样式文件定义css样式名称样式名称必须是以 – 开头文件内引用皮肤样式设置 ...
自定义css样式美化博客园
写在前面 csdn的markdown放到博客园里感觉风格迥异,所以还是找个好点的css吧,css这个我没有深入了解,拼凑了一个css.对于有python代码,而且需要自动生成目录的博文很有帮助,其他的 ...
html网页字段序号的样式,[网页设计]局部自定义li序号CSS样式的方法
想必大家看到过很多网页内容的列表很多都有1.2.3.4....等标记,这是因为li独有的序号标记,默认是一个小圆点,只要用css控制就可以让数字显示出来,除了数字和圆点之外,还有n种格式显示方法,具体 ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
android微信分享怎么自定义样式,微信更新！主题皮肤终于支持自定义了，样式超多有个性...
原标题:微信更新!主题皮肤终于支持自定义了,样式超多有个性今日分享:微信主题适用系统:安卓微信最近又更新了,很多网友吐槽安装包越来越大,感觉已经不再是以前"小而美"的样子了. ...
uni-app封装自己常用的css样式-----自定义css的样式 (便于开发)-----原理简单
我们在开发uni-app的时候,有的时候我们的css代码是常常需要用到的,比如说,比如说居中的问题 .center {position: absolute;top: 50%;left: 50%;tra ...

Cnblogs自定义皮肤css样式-星空观测者

Cnblogs自定义皮肤css样式-星空观测者相关推荐

最新文章

热门文章