【博客园皮肤】-超简洁美观-css源码分享

发布时间：2017-06-28 16:02:15.857作者：IT网络文摘

一、概述

author：nirvana-zsy
2016.6.27：first time edit

2016.6.28：update

1.fix bugs

2.没想到能上首页头条，小白表示很开心，有bug反馈的话我会持续更新，也会考虑自己做一套模板.谢谢大家(*＾ω＾)人(＾ω＾*)

对应的模板：BlueSky
在此十分十分感谢模板开发者：http://www.cnblogs.com/blogg/

该模板的所有使用者（供参考）

二、效果

如你所见，就是我现在博客

放几张截图：

大于768px：

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

小于768px：

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

原模板bug：

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

三、自己加代码原因：
1.增加/隐藏一些模板里缺少/多余的模块
2.性能
3.个人审美
4.原模板中的bug（源码中有详细注释）

四、注：
代码里面有的样式是模板里面加的，我不需要的都设成none，0之类的了，与样式无关，不要在意
还要小小吐槽一下模板里有的地方竟然样式用!important，你说让人怎么改呢呢呢
这里放上这个模板使用者的链接http://www.cnblogs.com/SkinUser.aspx?SkinName=BlueSky

2016.6.28改了几个bug，补在源码里面了。

五、转载请注明出处

六、真正的源码

{:;:}{:}{:;}{:}{:;:;}{:;:;}{:;:;:;:;:}{:;}{:;}{:;}{:}
#sideBar{width:calc(100% - 35px)}{:}{:;:}{:}{:}{:;:}{:;:;:;:;:} 
{:;}{:;}{:}{:;:}{:}{:}{:}{:;:}{:;:}{:}{:}

/*头像那一行加边距让她们居中*/
#div_digg{margin-top:20px}
#author_profile_detail{margin-top:20px}

/*突出点赞的颜色，减弱踩得效果，又是小私心嘿嘿嘿*/.burynum{color:grey}.diggnum{font-size:18px;color:#2175bc;font-weight:bold;}/*超出边界的藏起来*/#mainContent{overflow:hidden;}/*添加评论区，标题改大突出，加边框，结构清晰，更改按钮样式，统一风格*/#comment_nav{font-size:18px;border:1px dashed #E8E7D0;margin:15px 0;padding:5px}#commentform_title{height:50px;lineheight:50px;font-size:18px;font-weight:bold}#comment_form_container{margin:15px 0;border:1px dashed #E8E7D0;padding:5px}.comment_btn{border:0;border-radius:5px;background:#2175bc;color:#fff;box-shadow:2px 2px 3px #2175bc}/*最后，隐藏了某些元素，但是不便放出来，大家自行体会*//*方法就是某某元素{display:none}*//*都是由源模板子元素固定宽度造成的-----------------------------------2016.6.28改bug----------------*//*有两个元素固定宽度导致会超出父元素*/div.commentform input.author{width:calc(100% - 35px)}div.commentform textarea{width:100%!important}/*博文中图片固定大小,原图太大的话会超出，所以加一个最大宽度限制*//*这里注意我们传的图片一般alt属性为空，所以这样选择，以防万一影响别的图片*/#cnblogs_post_body img[alt='']{max-width:100%}/*下面的几个分享按钮会溢出*/#green_channel{width:100%!important;}#green_channel a{margin-top:10px;}

http://www.cnblogs.com/Nirvana-zsy/p/7085625.html

分类导航

【博客园皮肤】-超简洁美观-css源码分享

网友评论

更多精彩分享