给个人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;
  }
}

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

为了各位一方便查看效果，能够扫描下面的二维码访问个人博客首页：

扫描二维码访问个人cnblogs博客主页