twobin博客樣式—「藍白之風」
自暑假以來，囫圇吞棗通常矇頭栽入前端自學中，且不說是否窺探其道，卻不自覺中提升了對網頁版面設計的要求，乃至挑剔。一個設計清爽美觀的網頁能讓讀者心曠神怡，甚至沒有了閱讀疲勞；而一個設計粗劣嘈雜的網頁實在讓讀者爲之揪心難受，何談長時間閱讀，不只苦了眼睛，倦了身體，更是傷了精神。javascript
於博客園中開博撰文後，不時爲衆多設計精彩的博客主題而流連忘返，且不說博文質量如何，單看那設計用心，清新天然的博客，便對博主的審美感觀頻添幾分讚許，天然要駐留些時候細細拜讀博主的隨文，所以風格樣式對於博客就好似於地段門面對於酒樓通常，重要非凡，雖然說酒香不怕巷子深，博文甚佳者天然可沒必要拘泥於小節，本文藉以告誡劣酒藏深巷者：既已開博，請用心相待！css
本人不曾研習半點設計知識，一大遺憾，卻仍然對本博客用心相待，幾分實力便呈現幾分設計，同時也但願可以提升讀者的閱讀感覺，便爲博客自定義一套風格樣式，本身毫無設計功底，故不敢大肆宣談用戶體驗，有班門弄斧之嫌。往往有博友望借鑑幾分這「藍白樣式」，現在便呈了這份心意，樣式開源並撰文記之。html
初始化模板
選擇官方模板「LessIsMore」做爲本博客樣式的初始化模板，因爲LessIsMore模板框架簡潔天然，能夠更爲靈活的對其進行自定義重載。該模版框架大體爲簡單的兩欄佈局，頂部爲博客名稱與個性簽名，簽名下方是博客導航欄，主面板分爲左右兩欄，左邊欄爲導航索引欄，右邊欄爲博文標題、摘要的內容區域，底部爲博客頁腳。前端
經過CSS定製頁面風格
經過自定義CSS代碼即可定製專屬的頁面風格，在博客中「管理」-「設置」-「經過CSS定製頁面風格」的輸入框中，輸入自定義的CSS代碼，同時勾選下方「禁用模板默認CSS」選項，則博客即會啓用定製的頁面風格。java
顧名思義，下方的三個輸入框：「博客側邊欄公告」、「頁首HTML代碼」、「頁腳HTML代碼」，即將相應的HTML代碼輸入各自框中，博客即可經過代碼對特定部分進行框架改造。git
若是單薄的HTML/CSS設計代碼沒法令你盡興，那麼建議：書寫郵件一封向博客園管理員申請添加JavaScript代碼權限，即可酣暢淋漓的爲本身的博客增添交互行爲了。框架
本博客總體風格爲藍白相間式，白色爲底，藍色浮之上，顯得簡潔天然，交互時由藍色轉爲橙色，醒目專一卻不突兀，在於提醒用戶的操做。本人也是甚喜簡單之風，故無奢華之範，簡約而不簡單。編輯器
博客頭部
將博客頭部定製爲：凸顯博客名稱，弱化博客簽名。簽名可時刻改動，而博客名稱卻如品牌通常不輕易大刪大改，所以凸顯博客名稱既代表了博客名稱的重要性與穩固性，同時也但願讀者可以對博客名稱印象深入，從而提高博客知名度，至少混個臉熟！ide
經過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>分別表示文章段落的1、2、三級標題，並以不一樣的背景顏色以及字體大小加以區分，注意事項經過黃色背景凸顯，以起到提醒讀者的做用，至於圖片、代碼、表格等樣式設計就不加以贅述了。
經過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個月重構一次博客樣式，以保持博客樣式的新鮮活力。
計劃：設計流式或響應式博客，以適應不一樣屏的閱讀習慣，特別是提升手機上閱讀博客的體驗。
花費大量篇幅贅述博客樣式重構其實並不是本文的重點核心，惟一精髓爾：用心改善博客，提升閱讀質量！望各博主與讀者可以親身實踐，善待本身的博客，罷了。
- 1. 博客園樣式漫談——從0到1改變你的博客風格！
- 2. 測試博客樣式
- 3. COPY博客園CSS樣式
- 4. 博客園樣式美化
- 5. 博客園css樣式
- 6. 【Tool】寫博客用樣式
- 7. 博客樣式備份
- 8. 博客園樣式修改
- 9. 自定義博客樣式
- 10. 博客園新樣式
- 更多相關文章...
- • Web 品質 - 樣式表 - 網站品質教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 委託模式
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 博客園樣式漫談——從0到1改變你的博客風格！
- 2. 測試博客樣式
- 3. COPY博客園CSS樣式
- 4. 博客園樣式美化
- 5. 博客園css樣式
- 6. 【Tool】寫博客用樣式
- 7. 博客樣式備份
- 8. 博客園樣式修改
- 9. 自定義博客樣式
- 10. 博客園新樣式