给我的cnblogs主页做一个响应式布局模板
在cnblogs，一直都是使用官方自带的那些模板，而且感觉也一直很良好！不过最近用手机搜索一些相关的技术资料，很多都来自cnblogs，有些博主的页面在和机端显得很好，有些则展示得不那么友好了……忽然想起了cnblogs可以完全自定义CSS，早上起来就开始整了。由于我一直都喜欢干净整洁且清晰的页面，能不用图就不用。这次干脆偷了个懒，一张图都没用上……
先把最终效果截出来：
情况一：屏幕宽度大于960px时，左侧自动伸缩，右侧固定320px
情况二：屏幕大于在768px，小于960px时，右侧缩小100px(即220px)
情况三：屏幕大于640px，小于768px时，整个页面变为一栏，但左文章列表中的日期与文章仍然呈左右显示。
情况四：当屏幕小640时，当做手机端处理
------------------------- 我是一条分隔线 ------------------------
开始工作：
第一步：了解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包含起来。然后里面分别包括：
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: 0; } #sideBar { float: none; width: 100%; margin-left: 0; } }
至此，基本上的布局就已经实现了，至于其它一些细节上的实现，请根据喜好自拟！其实本文的重点是：两栏情况下，一栏固定宽度，另一栏自动伸缩是如何实现的？
为了各位一方便查看效果，可以扫描下面的二维码访问我的博客首页：
扫描二维码访问我的cnblogs博客主页
