給個人cnblogs主頁作一個響應式佈局模板

時間 2019-11-11

標籤個人 cnblogs 主頁一個響應佈局模板简体版

原文原文鏈接

在cnblogs，一直都是使用官方自帶的那些模板，並且感受也一直很良好！不過最近用手機搜索一些相關的技術資料，不少都來自cnblogs，有些博主的頁面在和機端顯得很好，有些則展現得不那麼友好了……突然想起了cnblogs能夠徹底自定義CSS，早上起來就開始整了。因爲我一直都喜歡乾淨整潔且清晰的頁面，能不用圖就不用。此次乾脆偷了個懶，一張圖都沒用上……框架

先把最終效果截出來：ide

狀況一：屏幕寬度大於960px時，左側自動伸縮，右側固定320px佈局

狀況二：屏幕大於在768px，小於960px時，右側縮小100px(即220px)spa

狀況三：屏幕大於640px，小於768px時，整個頁面變爲一欄，但左文章列表中的日期與文章仍然呈左右顯示。3d

狀況四：當屏幕小640時，當作手機端處理code

------------------------- 我是一條分隔線 ------------------------blog

開始工做：繼承

第一步：瞭解cnblogs首頁的結構

只有把DOM結構弄清楚了，纔能有針對性的實施方案，下面是cnblogs首頁的基本結構博客

 1 <body>
 2     <div id="home">
 3         <!--頁頭-->
 4         <div id="header"></div>
 5 
 6         <!--主體-->
 7         <div id="main">
 8             <!--主欄-->
 9             <div id="mainContent">
10                 <div class="forFlow">
11                 </div>
12             </div>
13             
14             <!--側邊欄-->
15             <div id="sideBar"></div>
16         </div>
17 
18         <!--頁尾-->
19         <div id="footer"></div>
20     </div>
21 </body>

結構仍是麻清晰的，下面簡單說一下：整個頁面由id="home"的div包含起來。而後裏面分別包括：it

一、頁頭：id="header"

二、主本：id="main"

三、頁尾：id="footer"

這時注意：main包括了mainContent和sideBar兩個部分，上面我將它稱爲主欄和側邊欄，而主欄又包含了一個forFlow。這種結構看似多了不少層，但其實這樣的結構能適用於多種不一樣的佈局的實現，具體不詳細解說了。

把結構搞清楚了，就能夠開始實現頁面的總體框架了，接着看。

第二步：header的實現

這個部分很簡單，不設置寬度便可，這樣就能適用各類不一樣的屏幕了。連媒體查詢部分的CSS都不用（固然這也是個人要求簡單的緣由），下面是CSS

#header {
  margin-bottom:20px;
  overflow:hidden;
  background:#000;
  position:relative;
}

因爲本篇只講如何實現這個大框架，具體header內部的細節就不解說了。

第三步：實現footer

這個部分與header的實現沒多大區別，請直接看CSS

#footer {
  padding:30px 0;
  text-align:center;
  font-size:16px;
  border-top:solid 1px #ddd;
  margin-top:20px;
  margin-bottom:10px;
}

第四步：main的實現（重點）

一、先實現左右佈局

左右佈局通常都是用float:left和float:right來實現。可是這種不符合個人需求，由於個人右側是固定大小的，但左側是自動伸縮的。關鍵問題是：如何讓左側自動伸縮呢？默認狀況下，div是自動繼承父層的寬度的。試想：若是一個div Father的子div Son的有一個margin-right:320px屬性會怎樣呢？（沒錯，無論怎樣，大div的右側總會空出320px的寬度來）。好了，到這裏右側的320px已經空出來了。根據cnblogs首頁結構，咱們能夠定義出這樣一個CSS來：

#mainContent {
  width: 100%;
  font-size: 14px;
}
#mainContent .forFlow {
  margin-right: 350px;
}

這裏#mainContent至關於div Father， #mainContent .forFlow至關於 div Son。接下的問題是：main的空間都被#mainContent給佔完了，即便.forFlow把右側空出320px來，也輪不到sideBar來佔位，事實也是如此！那麼解決的辦法是：

讓#mainContent浮動起來，讓sideBar也浮動起來（而且給一個margin-left:-320px，這樣會使sideBar會搶位到上面去與mainContent並排，這就是神奇的地方），最終代碼以下：

#main { margin-left:10px; margin-right:10px; }
#mainContent {
  width: 100%; float: left;
  font-size: 14px;
}
#mainContent .forFlow {
  margin-right: 350px; //這裏留出350px是爲了和右邊保持距離
}
#sideBar { float: left; width: 320px; margin-left: -320px;
  font-size: 14px;
}

二、實現屏幕在960px如下的佈局：只改變右側sideBar的寬度，同時.forFlow的右側亦要留出足夠的空間來，以避免內容重合。

@media (max-width: 960px) {  #mainContent .forFlow {
    margin-right: 250px;
  }
  #sideBar {
    width: 220px;
    margin-left: -220px;
  }
}

三、實現屏幕在768px如下的佈局：768px下已經只分一欄了，因此不須要再浮動（注意float:none），同時它們的寬度都充滿了父容器。

@media (max-width: 768px) {
  #mainContent {
    width: 100%;
    float: none!important; //這是加important是爲了覆蓋cnblogs系統的768px像素的媒體查詢
  }
  #mainContent .forFlow {
    margin-right: 0;
  }
  #sideBar {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}