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为博客评论区域/绿色通道定制样式：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

/*评论按钮*/
#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('//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链接分享至各个博文页面，并在页面中显示运行效果与源码，强大的难以名状。