自定義博客園皮膚：暗色流體響應式布局

     博客園的皮膚模板雖然有100多套，但我需要的作品卻沒幾套，從布局上看，大多是固定布局，有的使用表格布局，有的將側邊欄在HTML頁面的代碼順序放在主內容的前面。這些布局方式不利於頁面縮放和不同屏幕尺寸與分辨率的設備瀏覽，尤其是在當今網頁瀏覽設備屏幕尺寸與分辨率多樣化的時代，流體與響應式布局才是最佳的選擇。從配色上看，博客園有3款還不錯的暗色皮膚，但不符合我布局的要求。

     我想要自己的博客皮膚滿足以下要求：

模版選擇：不能使用表格布局，側邊欄在HTML頁面的代碼順序放在主內容

               的后面，頁面結構和樣式簡潔。有利於自定義CSS樣式。

配色：主背景配色為暗色，文本等顏色為亮色。

布局：水平居中，側邊欄在左邊的兩列布局，流體+響應式布局。

    下面就按照這三個方面的要求來自定義博客皮膚。

 

1.選擇一套已有的博客模版

 

     博客園的人民不能夠自己自由地設計博客的靜態HTML頁面，除非你的作品得到博客園的審核通過，然后作為共享模版供廣大博客園人民選擇使用。但博客園已有的100多套模版里，大多能滿足靜態HTML頁面的選擇要求。另外，博客園的模版都有既定的CSS樣式，這一點也得考慮在內。綜合考量，進入博客管理設置，這里選擇一款叫做“LessIsMore”的模版。從下圖可以看出，這個模版作為自定義樣式的基礎還是很不錯的。

 

 

2.配色、字體、修飾和布局微調

 

     由於已經選好了一個有利於自定義樣式的模版，再結合瀏覽器的開發者工具，自定義頁面的配色總的來說還是比較容易的，但個別地方（如代碼塊內）的樣式都是在HTML頁面元素的style屬性里定義的，沒有類和ID屬性，由JavaScript自動生成，自定義樣式很困難，只能在不影響可訪問性的情況下，退而求其次。另外，我對有的地方字體、字體大小、背景顏色做了調整，有的地方添加了邊框和陰影效果，有的地方進行了 margin、padding 的微調。下面是具體的CSS代碼：

/*------CSS Code-----------------------------------*/
#navigator { background: #666; }
#navList { font-size: 16px; }
.blogStats { font-size: 12px; }
#sideBar { width: 20%; border: none; padding: 0; }
    #sideBar h3 { padding-left: 8px; background-color: #666; }
#sideBarMain { padding-left: 8px; }
body { background-color: #333; color: #fff; font-size: 14px; }
h1, h2, h3, h4, h5, h6, th, .feedbackCon, .blogStats { color: #fff; }
#main { border: 1px solid #e5e5e5; }
.day { margin: 20px 0px; }
.postTitle { padding-left: 20px; font-size: 16px;
             border-bottom-color: #666; }
.postBody, .postCon { padding: 0px 20px 10px; 
                      border-bottom: 1px solid #666; }
.postDesc { padding-right: 20px; }
a, .postCon a, .postBody a, .feedbackCon a { color: #0dd; }
    a:hover, a:active, a:focus { color: #ff8; text-decoration: none; }
#navigator, #MySignature, .day, .post { border: 1px solid #e5e5e5; 
    border-radius: 8px; box-shadow: 2px 2px 10px #aaa; }
#navigator { border-radius: 8px 8px 0px 0px; }
.post { border-right: none; border-top: none; 
        border-radius: 0px 0px 8px 8px; padding-top: 1px; }
.cnblogs_code, .cnblogs_code div { 
    color: #000; font-family: consolas, monospace, sans-serif; }

 

3.布局

 

3.1 水平居中

 

     整體水平居中最常用的方法是，將body內要居中的所有內容放在一個容器元素中，這個容器作為body的子元素，然后對這個容器進行水平居中。在選擇的“LessIsMore”模版中，id為home的div滿足這個容器的要求。下面是水平居中的CSS代碼：

body 
{ 
   /*其它主要瀏覽器不需要這個樣式，
   但在IE6/7居中是必須的*/
   text-align:center; 
}
#home 
{ 
   /*margin: 0px auto;可以使內容在除IE6/7外的其它
   主要瀏覽器內居中*/
   margin: 0px auto; 
   /*因為body的text-align:center;樣式具有繼承性，
   所以要重置文本向左對齊*/
   text-align:left; 
   max-width:960px;
}

 

3.2 導航條的改進

 

     “LessIsMore”模版的導航條默認樣式是，將導航條內的每一項li進行左浮動，名為.blogStats的div進行右浮動，顯示設置導航條容器的div的高度來防止浮動造成的導航容器塌陷無高度。我覺得沒必要將li都進行左浮動，只需將其display:inline即可，然后將ul與名為.blogStats的div分別進行左浮動和右浮動即可。最后，最好清除浮動，使作為導航容器的div可以包裹住里面的內容。CSS代碼如下：

#navigator {  height:auto; overflow:hidden; *zoom:1;}
/*名為.blogStats的div在選擇的模板中已經進行了右浮動
不必再進行設置*/
#navList { float:left; }
#navList li { display: inline; float: none; }

 

3.3 兩列和流體布局

 

3.3.1 模版的默認實現

 

     我發現博客園的很多皮膚模板以及廣大博客園人民使用或自定義的皮膚，要么主內容與側邊欄都是固定寬度，要么側邊欄固定寬度主內容自適應寬度。好像沒有側邊欄與主內容都是非固定寬度的，這樣很不利於頁面縮放。

我的布局要求是，側邊欄在左，主內容在右，呈兩列布局。當然，側邊欄在右邊也是很不錯的布局方式，但出於習慣等原因，我選擇側邊欄在左。選擇流體布局的原因是為了便於縮放。因為我實現兩列布局的同時也實現了流體布局，所以將這兩個方面放在一起說明。

實現多列布局方式有多種，“LessIsMore”模版已經是側邊欄在左的兩列布局，使用浮動方式實現。浮動方式實現的多列布局具體到細節也有較多的不同方式。“LessIsMore”模版默認將主內容（id為mainContent）寬度設為100%向右浮動，側邊欄（id為sideBar）定寬220px向左浮動。然后，將主內容的左外邊距（margin-left）設為一個足夠的負值（-250px），將側邊欄“拉”到主內容內部的左邊。但這樣側邊欄會與主內容內部的內容重疊。所以，在主內容里又嵌套了一個類名為forFlow的div作為其它元素的容器，並將這個容器的margin-left設置為一個足夠大的值以避免重疊。主要代碼如下：

#mainContent { width: 100%; margin-left: -250px; float: right; }
#sideBar { width: 220px; float: left; }
.forFlow { margin-left:266px; }

這樣的兩列布局實現是一種側邊欄寬度固定，主內容寬度自適應的設計。不利於縮放，而且實現得比較別扭。

 

3.3.2 流體布局的優點與不足

 

     流體布局的核心是采用百分比定義列的寬度，在使用浮動實現多列布局的情況下，每列都要以百分比定義寬度（或者部分列使用百分比為單位的水平外邊距），只要所有列的總寬（這要考慮盒模型的總寬，而不僅僅是內容的寬度）不超過100%，頁面放大的時候不會出現水平滾動條，這正是我需要的結果。

可是，流體布局也有其局限性：

其一，無法使某一列寬度自適應。但由於每列的百分比都是分配好的，這也就不是什么大問題了。

其二，若屏幕很寬，則列之間的間隙就會很大。這可以通過設定容器#home的最大寬度來解決這個問題。前面水平居中代碼的最后一個樣式max-width:960px;就是為了解決這個問題。可惜的是，在天朝占主流的 IE6 不支持 max-width 屬性。但這並不是大問題，因為特別寬的屏幕並不多見，即便如此，寬屏上的字體等內容相對來說也是較寬較大的，比例上還算協調。

其三，若屏幕很窄，或者進行較大比例的縮放，每列就會很細長，也不利於閱讀。屏幕寬度小的問題的解決的方法就是后面要說的“響應式布局”。大比例縮放問題目前我還真不知道有什么好的解決方法，還請知道的朋友多多指教！但鑒於進行大比例縮放的情況極少，所以這也不是什么大問題。下面就來實現兩列的流體布局。

 

3.3.3 自定義實現

 

     啰嗦了這么多，其實實現的代碼很少，如下：

#sideBar { width: 20%; }
#mainContent { margin-left: auto; width:78%; }
.forFlow { margin:auto; }

     首先，這是基於浮動的布局。由於“LessIsMore”模版的既有樣式已經將#mainContent向右浮動（必須），將#sideBar向左浮動（非必須），所以，自定義樣式就不必進行浮動樣式的設置了。其次，邊欄的寬度設為20%，主內容的寬度設為78%，這是必須的，兩列之間留出2%的間隙。最后，要將#mainContent的左外邊距-250px和.forFlow的所有外邊距重置為auto。

 

4.響應式布局與CSS媒體查詢

 

4.1 為什么要響應式布局和媒體查詢

 

     為什么要響應式布局和媒體查詢？因為自從智能手機和平板電腦發展起來以后，他們的屏幕雖然不大，但分辨率越來越高！這導致在這些設備上，網頁上的內容會看起來會很小，甚至看不清楚，不利於閱讀。雖然可以進行縮放，但總是讓用戶每當打開一個網頁都要縮放顯然是比較差的設計體驗。再者，多列布局的網頁在這些小屏幕設備上看起來很是細長，也是不利於閱讀的。下面是通過Opera Mobile Emulator模擬 ASUS Nexus 7 瀏覽我的博客在應用媒體查詢前后的對比：

 

圖：上圖為應用媒體查詢前，下圖為應用媒體查詢后

 

     下面是通過Opera Mobile Emulator模擬 Samsung Galaxy S III 瀏覽我的博客在應用媒體查詢前后的對比：

 

                                 圖：左圖為應用媒體查詢前，右圖為應用媒體查詢后

 

     通過對比，發現應用了媒體查詢后確實比之前顯示效果好很多。

 

4.2 媒體查詢的核心技術

 

     響應式布局所依賴的核心技術是CSS媒體查詢。它可以通過@viewport規則定義視窗區域以設備的物理尺寸為基准，從而解決小屏幕高分辨率下頁面內容顯示小的問題。可惜的是，目前實現這一規則的瀏覽器不多，WP8上的IE10和較新版的Opera瀏覽器實現或部分實現了這個規則。對於Android和iOS等設備上的常用瀏覽器，需要通過HTML內的<meta>標簽來實現相同的目的。這個<meta>標簽的聲明如下：

<!--HTML Code-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

     CSS媒體查詢的另一個核心是@media規則，這個規則的瀏覽器支持率還是很高的，除了IE8及其以下版本的瀏覽器不支持，大多數瀏覽器都支持。因為我們的響應式布局主要針對的是移動智能設備，而這些設備上的瀏覽器大都支持@media規則，所以IE8及其以下版本不支持也不是什么大問題。

 

4.3 響應式布局的實現

 

     對於我的博客布局，實現響應式布局的CSS代碼代碼很簡單，具體如下：

@-ms-viewport {
    width: device-width;
}
@media (max-width:990px) {
    #home{ margin:0 15px; }
}
@media (max-width:640px) {
    #sideBar, #mainContent{ width:100%;}
    .post{ border-left:none; }
}

     但是這樣是很不夠的，Android和iOS等設備上的常用瀏覽器不支持@viewport規則。所以必須得使用HTML內的<meta>標簽。可是，博客園幾乎所有的HTML模版都沒有定義與媒體查詢有關的meta標簽，我又無法手動更改博客模版的靜態HTML頁面。怎么辦呢？只有通過JavaScript來向HTML內添加<meta>標簽了。幸好，我們可以通過博客園后台管理設置里的“頁首Html代碼”等來添加自己的JS。下面就是所需的JS代碼：

<script type="text/javascript">
    $(document).ready(function ()
    {
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content = "width=device-width, initial-scale=1.0";
        $('head').prepend(meta);
    });
</script>

 

 4.4 響應式布局的缺點與改進

 

     使用4.3節介紹的方法實現了響應式布局，但響應式布局也有其缺點。當視窗區域寬度較小時，響應式整個頁面的兩列布局變成了一列，側邊欄被布局到博客的底部。若博客內容很長， 想到達側邊欄就需要多次翻頁。這也是不利於內容訪問的。

     如何克服這一缺點呢？我們可以在頁面的頂部（或者其他方便的地方） 提供一個跳轉錨點鏈接，使點擊這個鏈接的時候，可以直接跳轉到側邊欄。要實現這個功能，一個簡單的方法是，先在博客園后台管理設置頁首代碼，添加一個鏈接，如：

 

          <a id="jumpToAside" href="#asideAnchor">跳至側欄</a> 

 

     然后，在博客園后台管理設置公告代碼，添加一個鏈接，如：

 

     <a id="asideAnchor" name="asideAnchor"></a>

 

     這樣，就可以克服了響應式布局的缺點，快速地訪問側邊欄。我為自己的博客實現了這個功能（跳轉鏈接應用了一些CSS樣式），看到這篇文章的你如果使用的是支持媒體查詢的瀏覽器，請將瀏覽器的寬度縮小到一定程度，會看到頁面右上角出現了文本內容為“跳至邊欄”的鏈接，點擊它，就可以直接跳轉到側邊欄了。如果你使用的是智能手機的豎屏瀏覽這篇博客，通常也能看到這個跳轉鏈接。

 

5.總結

 

     經我用Chrome、IE10、FireFox、IETester和Opera Mobile Emulator測試，重新修改設計的博客皮膚在在大多數設備與瀏覽器上的顯示效果都還是挺不錯的。至少布局上比很多的博客園默認皮膚要好。但是，如果你正使用IE6瀏覽器瀏覽本篇博客，你將會看到一個比較丑陋的界面，因為博文中使用了寬度比較大的圖片，而IE6不支持max-width屬性，大圖片打破了布局。但如果你用IE6瀏覽我其它沒有特別大寬度圖片的博文，界面就會好很多。至於博客皮膚的其它的設計元素如何就只能根據個人的喜好而定了。現在我所使用的這個皮膚就是自己在本文所要實現的，有條件有興趣的朋友可以通過手機或者平板電腦瀏覽我的博客測試下效果。也可以使用支持媒體查詢的PC瀏覽器進行頁面縮放改變窗口寬度來測試效果。

     當然，此刻，你所看到的我的博客的當前皮膚（模版）樣式不一定與本文中所述相一致，因為我隨時有可能修改博客使用的樣式。

     由於水平有限，文中錯誤在所難免，歡迎大家指正或給出建議！