1. 固定布局之两栏布局——边栏在左边，主内容在右边

实现的布局效果：整个布局居中显示，而且侧栏显示在左边，主内容在右边

HTML：

- div.wrapper是主容器，以960px为例，并且居中显示

- div.header是页头部分

- div.sidebar是侧栏部分，此处设置为220px的宽度

- div.main-content是主内容部分，此处设置为720px的宽度

- div.footer是页脚部分

- 文档流形式是从上往下加载，也就是按这样的顺序加载：header/sidebar/main-content/footer

CSS：

先浮动让其包裹性和可以设置margin，然后最后清除浮动(清除浮动这一步非常的重要)

但有时候这种结构的布局并不能满足我们的需要，比如说页面的（header）部分，背景色占满了整个浏览器的宽度，那么在前面那篇文章中的布局就无法使用，因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果，我们应该怎么做呢？

2. 实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果

HTML:

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

CSS之两栏固定布局（一）相关推荐

CSS之两栏固定布局（二）
3. 负margin布局 3.1 HTML: - 页面分为三个部分,头部(div#header).主体(div#page).脚部(div#footer),同样在这三个容器中使用了内容器(div.con ...
Web布局连载——两栏固定布局（五）
在上一篇<Web布局连载--两栏固定布局(四)>中留了一个下文,"No div, no float, no clear, no hack".看起来很有意思,这种没有di ...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
CSS-四种两栏式布局
四种两栏式布局先分别介绍float.position.flex和table 1.float属性指定一个盒子(元素)是否应该浮动. 在早期浏览器当中,文档类型基本都是图片加文字进行页面展示.float ...
css两栏式布局示例
请先看图,这里主要用到了float属性,该属性的值指出了对象是否及如何浮动语法: float : none | left |right 参数: none : 对象不浮动;left : 对象浮 ...
css：两栏三栏布局
两栏布局左边固定右边自适应 1.浮动方式 <!DOCTYPE html> <html lang="en"> <head><style> ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...

CSS之两栏固定布局（一）

1. 固定布局之两栏布局——边栏在左边，主内容在右边

实现的布局效果：整个布局居中显示，而且侧栏显示在左边，主内容在右边

HTML：

- div.wrapper是主容器，以960px为例，并且居中显示

- div.header是页头部分

- div.sidebar是侧栏部分，此处设置为220px的宽度

- div.main-content是主内容部分，此处设置为720px的宽度

- div.footer是页脚部分

- 文档流形式是从上往下加载，也就是按这样的顺序加载：header/sidebar/main-content/footer

CSS：

先浮动让其包裹性和可以设置margin，然后最后清除浮动(清除浮动这一步非常的重要)

2. 实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果

HTML:

CSS之两栏固定布局（一）相关推荐

最新文章

热门文章