twobin博客样式—“蓝白之风”

自暑假以来，囫囵吞枣一般蒙头栽入前端自学中，且不说是否窥探其道，却不自觉中提高了对网页版面设计的要求，乃至挑剔。一个设计清爽美观的网页能让读者心旷神怡，甚至没有了阅读疲劳；而一个设计粗劣嘈杂的网页实在让读者为之揪心难受，何谈长时间阅读，不仅苦了眼睛，倦了身体，更是伤了精神。

于博客园中开博撰文后，不时为众多设计精彩的博客主题而流连忘返，且不说博文质量如何，单看那设计用心，清新自然的博客，便对博主的审美感观频添几分赞许，自然要驻留些时候细细拜读博主的随文，因此风格样式对于博客就好似于地段门面对于酒楼一般，重要非凡，虽说酒香不怕巷子深，博文甚佳者自然可不必拘泥于小节，本文借以告诫劣酒藏深巷者：既已开博，请用心相待！

本人未曾研习半点设计知识，一大遗憾，却仍然对本博客用心相待，几分实力便呈现几分设计，同时也希望能够提高读者的阅读感受，便为博客自定义一套风格样式，自己毫无设计功底，故不敢大肆宣谈用户体验，有班门弄斧之嫌。每每有博友望借鉴几分这“蓝白样式”，如今便呈了这份心意，样式开源并撰文记之。

初始化模板

选择官方模板“LessIsMore”作为本博客样式的初始化模板，由于LessIsMore模板框架简洁自然，可以更为灵活的对其进行自定义重载。该模版框架大致为简单的两栏布局，顶部为博客名称与个性签名，签名下方是博客导航栏，主面板分为左右两栏，左边栏为导航索引栏，右边栏为博文标题、摘要的内容区域，底部为博客页脚。

通过CSS定制页面风格

通过自定义CSS代码便可定制专属的页面风格，在博客中“管理”-“设置”-“通过CSS定制页面风格”的输入框中，输入自定义的CSS代码，同时勾选下方“禁用模板默认CSS”选项，则博客即会启用定制的页面风格。

顾名思义，下方的三个输入框：“博客侧边栏公告”、“页首HTML代码”、“页脚HTML代码”，即将相应的HTML代码输入各自框中，博客便可通过代码对特定部分进行框架改造。

如果单薄的HTML/CSS设计代码无法令你尽兴，那么建议：书写邮件一封向博客园管理员申请添加JavaScript代码权限，便可酣畅淋漓的为自己的博客增添交互行为了。

本博客整体风格为蓝白相间式，白色为底，蓝色浮之上，显得简洁自然，交互时由蓝色转为橙色，醒目专注却不突兀，在于提醒用户的操作。本人也是甚喜简单之风，故无奢华之范，简约而不简单。

博客头部

将博客头部定制为：凸显博客名称，弱化博客签名。签名可时刻改动，而博客名称却如品牌一般不轻易大删大改，因此凸显博客名称既表明了博客名称的重要性与稳固性，同时也希望读者能够对博客名称印象深刻，从而提升博客知名度，至少混个脸熟！

通过javascript在博客顶部创建头部框架：

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/twobin/">twobin’<span id="blog">blog</span></a></h1><span id="subtitle">努力学习前端技术　|　其实技术也可以是通俗易懂的！</span></div>');
</script>

利用CSS为博客头部定制样式：

.head{
    height: 60px;
    line-height:60px;
    padding-left:200px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    background: #fff;
}
.head h1{
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #1f7b9b;
    text-align: center;
}
.head h1:hover {
    float:left;
    width:200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #ff7227;
    text-align: center;
}
.head h1 a{
    color: #fff;
    outline:none;
    -moz-outline:none;
    text-decoration:none;
}
#blog{
    font-weight:normal;
    font-size:16px;
    color: #fff;
}
#subtitle{
    display:block;
    float:right;
    font-size:18px;
    color:#999;
    line-height:18px;
    margin:20px 200px 0 0;
}

博客导航栏

将博客导航条单独成栏，一方面是凸显导航栏的重要性，方便自身以及读者操作，另一方面也是使得整个博客页面更为饱满，而不只是单独的两栏设计。

通过CSS为博客导航栏定制样式：

#header {
    display: block;
}
/*导航栏*/
#navigator {
    font-size:16px;
    height:48px;
    background:#fff;
    text-align:center;
    margin-top:20px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
#navList li {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#1f7b9b;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#1f7b9b;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
#navList li a:hover  {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#1f7b9b;
    line-height:48px;
}

博客左侧边栏

左侧边栏包含：公告、访客记录、相片、微博、个人简要信息、日历、随笔分类、随笔归档、关注前端博客、积分排名、最新评论、阅读排行、评论排行、推荐排行。

其中较为重要的部分，访客记录：可以清晰的查看博客目前的访问数、是了解博客热度的一大利器；微博：挂载微博挂件，不仅充实博客的个人信息，而且在一定程度上可以提升微博的粉丝数与关注度；关注前端博客：可以使读者了解博主的关注对象与关注内容，同时也便于自身查看所关注的博客。

通过CSS为博客左侧边栏定制样式：

#main {
    margin: 30px 0 15px 0;
    padding: 0;
}
/*左边栏*/
#sideBar {
    background: #fff;
    width: 205px;
    padding: 25px 15px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
#sideBarMain {
    line-height:24px;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
.newsItem .catListTitle {
    display: none;
}
.mySearch .catListTitle{
    display: none;
}

博客右侧内容栏

右侧内容栏里一个页面包含10篇文章，每篇文章主要包含：文章标题、文章摘要、右侧小图片、以及文章发布信息、阅读评论数等。

一个页面中所包含的文章数，如果小于10篇，则显得页面文章数过少，内容单调，且右侧栏高度明显小于左侧栏，从而出现大部分留白，降低视觉效果；如果多于10篇，则会显得单页冗长，提高阅读疲劳，因此单页中设置为包含10篇文章为佳。

通过CSS为博客右侧内容栏定制样式：

/*主面板*/
#mainContent {
    margin-top:0px;
    padding: 25px 15px;
    background:#fff;
    float:right;
    width:920px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
    color:#1f7b9b;
}
.postTitle a:hover {
    color: #ff7227;
    text-decoration: underline;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#1f7b9b;
    background:url('http://images.cnblogs.com/cnblogs_com/twobin/520730/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.dayTitle {
    display:none;
}
/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}
.c_b_p_desc a {
    color:#1f7b9b;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    color:#ff7227;
    border-bottom-width:1px;
    border-bottom-style:dotted;
}
.c_b_p_desc_readmore {
    margin-left: 20px;
}
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
}

博客底部

由于很少有读者会去关心博客底部的内容，因此也不用在此部分大费周章，简单设置个人博客版权信息或博客名称即可。

通过CSS为博客底部定制样式：

/*尾部*/
#footer {
    height:24px;
    line-height: 24px;
    text-align:center;
    color:#1f7b9b;
    font-size:16px;
}

博文内容页

一篇完整且有着良好排版的博文可能会包含元素：文章标题、段落标题、正文、注意事项、图片、代码、链接、表格、插件等，需要为每个元素定制样式，方可使得整篇博文在排版上令人赏心悦目，流连忘返。

其中，<h1>、<h2>、<h3>分别表示文章段落的一、二、三级标题，并以不同的背景颜色以及字体大小加以区分，注意事项通过黄色背景凸显，以起到提醒读者的作用，至于图片、代码、表格等样式设计就不加以赘述了。

通过CSS为博客内容页定制样式：

.Abstract
{
    padding: 15px;
    border: dotted 2px #999;
    color: #999;
    font-family: 'Microsoft Yahei';
    border-radius: 4px;
}
.First
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    text-align: left;
    padding: 6px 20px;
    color: #fff;
    background: #1f7b9b;
    font-size: 20px;
    border-radius: 4px;
    clear: both;
}
.Second
{
    margin: 10px 0;
    font-family: 'Microsoft Yahei';
    padding: 6px 20px;
    background: #2ca8d3;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    clear: both;
}
.Third
{
    margin: 10px 0;
    padding: 6px 20px;
    font-family: 'Microsoft Yahei';
    margin: 15px 0;
    font-size: 16px;
    color: fff;
    background: #32c0f1;
    color: #999;
    border-radius: 4px;
    clear: both;
}
.note
{
    margin: 10px 0;
    padding: 15px 40px 15px 40px;
    background: #FCFAA9;
    font-size: 15px;
    font-family: 'Microsoft Yahei';
    box-shadow: 0 0 8px #aaa;
    clear: both;
}
.demo
{
    text-align: left;
    padding: 6px 20px;
    overflow: auto;
    border-radius: 4px;
    background: orange;
    color: #fff;
    font-size: 16px;
    clear: both;
}
.cnblogs_Highlighter
{
    border: solid 1px #ccc;
    clear: both;
}
.cnblogs_code
{
    background: #EFFFF4;
    border: solid 0px #939393;
    font-size: 14px;
    clear: both;
    padding: 10px 20px;
}
.cnblogs_code pre
{
    font-size: 14px;
}
.cnblogs_code span
{
    font-family: Courier New;
    font-size: 14px;
}

评论区域/绿色通道/推荐

绿色通道主要包含：好文要顶、关注我、收藏该文、与我联系、分享至新浪微博、推荐一下，将读者阅读博文时的一些操作进行集成，提高读者操作的便捷性。

评论区域进行重新定制，以块状面板进行呈现，使得评论一目了然，便于博主与读者阅读。

通过CSS为博客评论区域/绿色通道定制样式：

/*评论按钮*/
#btn_comment_submit {
    border:none;
    height:48px;
    width:120px;
}
.comment_btn {
    font-family:'Microsoft Yahei';
    border-radius: 3px 3px 3px 3px;
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#1f7b9b;
    color:#fff;
}
#btn_comment_submit:hover {
    background:#ff7227;
}
/*评论标题*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#1f7b9b;
    border-bottom:solid 6px #1f7b9b;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
#commentform_title {
    color:#1f7b9b;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:solid 6px #1f7b9b;
}
/*评论框*/
#comment_form {
    margin:10px 0;
    padding:0;
}
.commentform {
    margin:10px 0;
    padding:10px 20px;
    background:#fff;
}
/*评论输入域*/
#tbCommentBody {
    font-family:'MIcrosoft Yahei';
    margin-top:10px;
    width:900px;
    max-width:900px;
    min-width:900px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    padding:10px;
    height:120px;
    font-size:14px;
    min-height:120px;
}
/*评论条目*/
.feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
    font-weight:normal;
}
/*顶一下*/
.diggnum {
    font-size:28px;
    color:#1f7b9b;
    font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
    line-height:100px;
}
.diggit {
    float:left;
    width:128px;
    height:128px;
    background:url('https://images0.cnblogs.com/blog/479892/201311/09133514-36eb19831f014a7ea6de13bc99e1d8ed.gif') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
/*隐藏踩一下*/
.buryit {
    display:none;
}
.diggword {
    display:none;
}
/*绿色通道*/
#green_channel {
    text:align:right;
    background:#1f7b9b;
    padding-left:20px;
    font-weight:normal;
    font-size:15px;
    width:880px;
    border:none;
    color:#fff;
    padding:20px;
    border-radius:4px;
}
/*最新评论*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#6DA47D;
}
/*清除浮动*/
.clear {
    clear: both;
}
/*屏蔽广告*/
.c_ad_block {
    display: none!important;
}

交互动作/插件

博客中利用JavaScript添加了一些交互动作和插件，用于提高博客的交互性，且有利于博主宣传、管理本博客。

交互动作：回到顶部交互，便于读者快速回至博客顶部，提高操作便捷性。

插件：新浪微博挂件、王子墨天气插件、百度分享插件、gostats统计插件、JSFiddle插件。

其中，新浪微博挂件：可在一定程度上提升微博的粉丝数与关注度，同时也可通过微博宣传博客，达到相互宣传的作用；王子墨天气插件：一款非常棒的基于jQuery的天气插件，简洁、美观、动态，在此推荐下，算是为其打打小广告；百度分享插件：可快速将博文分享至QQ空间、微博、人人、贴吧、豆瓣等知名社交空间，可以提升博文的流传度与阅读数；gostats统计插件：用于图片数字实时统计博客的访问数，且每周发送一封邮件描述本周博客详细的统计信息，轻便、美观，推荐之；JSFiddle插件：大力推荐！用过都说好！JSFiddle是一款在线前端编辑器，可以分屏同时编辑HTML/CSS/JS代码，能够实时同屏查看效果，最牛之处在于可通过URL链接分享至各个博文页面，并在页面中显示运行效果与源码，强大的难以名状。

后续计划

博客风格样式的设计并不会就此止步，无论设计多么精巧的样式都会有审美疲劳的一天，计划平均3-4个月重构一次博客样式，以保持博客样式的新鲜活力。

计划：设计流式或响应式博客，以适应不同屏的阅读习惯，特别是提高手机上阅读博客的体验。

花费大量篇幅赘述博客样式重构其实并非本文的重点核心，唯一精髓尔：用心改善博客，提高阅读质量！望各博主与读者能够亲身实践，善待自己的博客，罢了。