给我的cnblogs主页做一个响应式布局模板

在cnblogs，一直都是使用官方自带的那些模板，而且感觉也一直很良好！不过最近用手机搜索一些相关的技术资料，很多都来自cnblogs，有些博主的页面在和机端显得很好，有些则展示得不那么友好了……忽然想起了cnblogs可以完全自定义CSS，早上起来就开始整了。由于我一直都喜欢干净整洁且清晰的页面，能不用图就不用。这次干脆偷了个懒，一张图都没用上……

先把最终效果截出来：

情况一：屏幕宽度大于960px时，左侧自动伸缩，右侧固定320px

情况二：屏幕大于在768px，小于960px时，右侧缩小100px(即220px)

情况三：屏幕大于640px，小于768px时，整个页面变为一栏，但左文章列表中的日期与文章仍然呈左右显示。

情况四：当屏幕小640时，当做手机端处理

------------------------- 我是一条分隔线 ------------------------

开始工作：

第一步：了解cnblogs首页的结构

只有把DOM结构弄清楚了，才能有针对性的实施方案，下面是cnblogs首页的基本结构

 <body>

     <div id="home">

         <!--页头-->

         <div id="header"></div>

         <!--主体-->

         <div id="main">

             <!--主栏-->

             <div id="mainContent">

                 <div class="forFlow">

                 </div>

             </div>

             <!--侧边栏-->

             <div id="sideBar"></div>

         </div>

         <!--页尾-->

         <div id="footer"></div>

     </div>

 </body>

结构还是麻清晰的，下面简单说一下：整个页面由id="home"的div包含起来。然后里面分别包括：

1、页头：id="header"

2、主本：id="main"

3、页尾：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的实现（重点）

1、先实现左右布局

左右布局一般都是用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;

}

2、实现屏幕在960px以下的布局：只改变右侧sideBar的宽度，同时.forFlow的右侧亦要留出足够的空间来，以免内容重合。

@media (max-width: 960px) {  #mainContent .forFlow {

    margin-right: 250px;

  }

  #sideBar {

    width: 220px;

    margin-left: -220px;

  }

}

3、实现屏幕在768px以下的布局：768px下已经只分一栏了，所以不需要再浮动（注意float:none），同时它们的宽度都充满了父容器。

@media (max-width: 768px) {

  #mainContent {

    width: 100%;

    float: none!important; //这是加important是为了覆盖cnblogs系统的768px像素的媒体查询

  }

  #mainContent .forFlow {

    margin-right:;

  }

  #sideBar {

    float: none;

    width: 100%;

    margin-left:;

  }

}

至此，基本上的布局就已经实现了，至于其它一些细节上的实现，请根据喜好自拟！其实本文的重点是：两栏情况下，一栏固定宽度，另一栏自动伸缩是如何实现的？

为了各位一方便查看效果，可以扫描下面的二维码访问我的博客首页：

扫描二维码访问我的cnblogs博客主页