Web布局连载——两栏固定布局(二)

在《Web布局连载——两栏固定布局(一)》中,使用了两种不同的结构,配合不同的CSS浮动方法,实两了两种最为常见和最基础的两栏固定布局效果:侧栏在左边,主内容在右边(demo1,demo3),主内容在左边,侧栏在右边(demo2,demo4)。但有时候这种结构的布局并不能满足我们的需要,比如说页面的(header)部分,背景色占满了整个浏览器的宽度,那么在前面那篇文章中的布局就无法使用,因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏,或者说部分内容全屏,而其他内容居中的效果,我们应该怎么做呢?这就是我今天要给大家介绍的两栏固定布局中的第二种方法,当然这种方法有很多同学在使用,但有些刚学习布局的同学还是值得一看的。

刚才说了,由于结构的受限,所以要实现类似下图效果是行不同的,所以我们有必要先重构一个适合这种布局结构的HTML。

边栏在右,主内容在左

制作类似上图的效果,我们把结构重新重构一回。

HTML结构

<div id="header">
    <div class="container">
        <h1>Header content</h1>
        <p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
    </div>
</div>
<div id="page">
    <div class="container">
        <div class="main-content">
            <h2>Main Content</h2>
        </div>
        <div class="aside sidebar">
            <h2>Sidebar Content</h2>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <h2>Footer Content</h2>
    </div>
</div>

简单的说明一下这个结构的用意

  1. 页面每个部分都有一个自身的大容器,比如说“div#header”、“div#page”、“div#footer”;实际项目中可以根据自身的需求添加或删除,这个大容器主要作用就是用来控制部分元素全屏效果;
  2. “div.container”分别放置在每个大容器里面,其作用类似于前面教程中的“div.wrapper”容器,你可以在这个容器中设置宽度,用来实现水平居中的效果;
  3. “div.sidebar”和“div.main-content”主要是边栏和主内容,这两部分和前面介绍的一样,你可以考虑其在文档流中的加载顺序,上面的结构是先加载了“div.main-content”,然后在加载的“div.sidebar”

结构其实并不复杂,与前一教程的结构相比,这个结构略显复杂一点,每个部位都是包含了一个容器“div.container”。此时大家会问,为什么要在每个部分添加一个这样的容器,难道不能像前面的布局(一)中所言,一个就行吗?其实要实现上面效果,前面的结构是不满足我们的需求了,为他使部分背景或背景图全屏(或者说部分内容全屏)显示,那么我们就有必要单独控制部分内容,让他的宽度是100%。比如说我头部的内容不想居中,那么我们就可以使用

#header .container {
  width: 100%;
}

来重置

.container {
  width: 960px;
}

让header部分全屏显示。当然大家可以根据需要按类似的方法来实现同样的效果。接下来,我们一起来看两种效果。

1、头部和脚部全屏背景,并且内容居中,同时主内容居中,侧栏居左

今天要实现的第一个效果就是,“header”和"footer"有一个全屏的背景颜色,而其内容依然居中显示,同时“div#page”中的主内容居右显示,侧栏居左。效果如下面的DEMO所示:

边栏在左,主内容在右

CSS代码

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Amarante', cursive;
  background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
  text-align: center; /*IE6下让元素居中*/
}

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .container宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
/*清除浮动*/
.container:after,
.container:before {
  content: "";
  display: table;
}

.container:after {
  clear: both;
  overflow: hidden;
}
.container {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
  zoom: 1;
}

#header {
  background: #b1b1b1;/*header全屏背景色设置*/
  color: #fff;
  margin-bottom: 15px; /*顶部与主内容垂直间距,可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度,可自行修改*/
  float: left;/*侧栏居左*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  float: right;/*主内容居右*/
}

#footer {
  background: #b1b1b1;/*footer全屏背景色设置*/
  color: #fff;
}

/*测试样式,可自行修改*/
#header .container {
  height: 75px;
}

.sidebar {
  height: 350px;
  background-color: #E7DBD5;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.main-content {
  background-color: #F2F2E6;
  height: 350px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

#footer .container {
  margin-top: 15px;
}

上面样式代码中有两个关键地方,第一是在“div.container”中进行清浮动,因为在“div#page”内左边栏和主内都进行了浮动布局,所以有必要清除浮动,当然大家可以在“div.container”中多添加一个类名“clearfix”来清除浮动;第二点就是“div.container”的宽度应该等于“div.sidebar”宽度、“div.main-content”以及这两者之间的间距之和。这一点和前面的“wrapper”宽度是一样的。

接下来我们来看第二种情况,就是主内容居左,侧栏居右。这种效果,实现结构和前面结构一致,只是稍微改变一下侧栏和主内容的浮动方向,其效果如下面的DEMO所示:

边栏在右,主内容在左

改变后有样式代码

.sidebar {
   width: 220px; /*左边栏宽度,可自行修改*/
   float: right;/*侧栏居右*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  float: left;/*主内容居左*/
}

通过改变他们的浮动方向,达到两栏布局位置的调换。

正如前面所言,如果你的效果有一部分是内容也全屏显示,那么我们可以通过其父容器与“div.container”的配合,来重新设置“div.container”的宽度,此时“div.container”的宽度不在是两栏宽度与间距之和,应该是“100%”。比如说,你的页面顶部有一个工具导航栏:

#headerbar .container {
  width: 100%;
}

实现效果就是这么简单,大家感兴趣的话不仿一试效果。

那么到这就介绍完了两栏固定布局的第二种方法,两种方法相比,各有利弊。前一种方法结构简单,易于理解,但受限太多,扩展性差;而今天介绍的方法结构复杂一顶点,部分同学可能会难以理解,但其扩展性强。至于何时使用哪种布局,其实不用我说,大家看DEMO就一目了然。不过我自己更趋于使用今天介绍的方法。

今天就说到这里了,下一期将为大家介绍两栏固定布局中的第三种方法,使用浮动配合负的margin来实现。这种方法相对这两种方法来说,难度稍为大一点,不过也不会非常复杂。有兴趣的同学,敬请观注本站的相关更新。

上一节:《Web布局连载——两栏固定布局(一)

下一节:《Web布局连载——两栏固定布局(三)

如需转载,烦请注明出处:http://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html

Nike Zoom Vomero 13

如需转载,烦请注明出处:https://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部