<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jiaocheng1</title>
<style type="text/css">
<!--
body--> body {
margin: 0 auto;
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
line-height: 1.5;
}
ul {
list-style: none;
}
img {
border: 0px
}
a {
color: #05a;
text-decoration: none;
}
a:hover {
color: #f00
}
#container {
width: 900px;
margin: 0 auto;
}
#header {
height: 70px;
background: #ccffcc;
margin-bottom: 8px;
}
.clear {
clear: both
}
#logo {
padding-left: 10px
}
#nav {
height: 40px;
background: #ccffcc;
margin-bottom: 8px;
}
#content {
margin-bottom: 8px;
overflow: auto
}
#content-main {
width: 662px;
height:700px;
background: #ffff99;
float: left;
}
#content-right {
width: 228px;
height:700px;
background: #ffff99;
float: left;
margin-left:10px
}
#footer {
height: 70px;
background: #ccffcc
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<div id="logo">企业名称</div>
</div>
<div class="clear"></div>
<div id="nav">导航</div>
<div class="clear"></div>
<div id="content">
<div id="content-main">主体框架左</div>
<div id="content-right">附体框架右</div>
</div>
<div class="clear"></div>
<div id="footer">页脚</div>
</div>
</body>
</html>

从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，看明白了这点，下边的框架就好搭建了。整体框架结果图如下：

文章来自雨田SEOER

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
</head>

<body>
</body>
</html>

：

<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
  <div id="main">此处显示 id "main" 的内容</div>
  <div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>

<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
  <div id="main">此处显示 id "main" 的内容</div>
  <div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>

body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}

#container { width:900px; margin:0 auto;}

/*body*/
#container { width:900px; margin:0 auto;}

/*header*/
#header { height:70px; background:#CCFFCC; margin-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}

/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}

/*footer*/
#footer { height:70px; background:#CCFFCC;}

现在预览一下：在IE6下#maincontent的底部外边距并没有生效，而在IE8下，#footer干脆跑到#maincontent的下边了，这又是怎么回事呢？如果前边几天你都认真学的话，那么这个问题已经不是问题了。这就是之前我们讲的，如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加 overflow:auto; zoom:1;，这样就可以让它自动适应内部元素的高度了。

现在再预览一下，是不是都正常了。为了更加保险，建议在header、nav、maincontent、footer之间增加如下一句代码并设置css样式如下，它的作用是清除浮动。

<div class="clearfloat"></div>

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

div+css布局教程系列2的更多相关文章

  1. div+css布局教程系列1

    <!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...

  2. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  3. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  4. div+css布局教程（1）

    margin:Margin属性用于设置两个元素之间的距离. 后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自 ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  7. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  8. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  9. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

随机推荐

  1. 【Codeforces 1083A】The Fair Nut and the Best Path

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 我们最后要的是一条最长的路径. 这条路径的权值和是所有点的权值和-所有边的权值和且这个值最大. 显然如果我们在某一条边上的累计的权值和< ...

  2. 【转】阿里巴巴分布式服务框架 Dubbo 团队成员梁飞专访

    原文链接:http://www.iteye.com/magazines/103   Dubbo是阿里巴巴内部的SOA服务化治理方案的核心框架,每天为2000+ 个服务提供3,000,000,000+ ...

  3. 【Kubernetes】kube-dns 持续重启

    kuberbetes部署和启动正常,但是kube-dns持续重启 使用命令 kubectl get pods --all-namespaces 得到结果 从图中可以看出kube-dns-c7d8589 ...

  4. django学习之- json序列化

    序列化操作 - Errordict - 自定义Encoder - django的模块可以直接序列化 第一种: from django.core import serializers # 通过这个模块对 ...

  5. python学习之-- 协程

    协程(coroutine)也叫:微线程,是一种用户态的轻量级线程,就是在单线程下实现并发的效果.优点:1:无需线程上下文切换的开销.(就是函数之间来回切换)2:无需原子操作锁定及同步的开销.(如改一个 ...

  6. python学习之- 内置函数

    内置方法:1:abs():取绝对值2:all():当可迭代对象里所有均为真时结果为真. all([1,2,3])3:any():当可迭代对象里任意一个数据为真结果即为真.any([0,1,2])4:a ...

  7. eslint (js代码检查)

    eslint 是一个应用广泛的javascript代码检查工具. 能检测变量名重复等等... 1.安装 npm install -g eslint 2.初始化 会在当前目录下生成一个.eslintrc ...

  8. hdu 3237

    dp 状态压缩 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> ...

  9. Junit中Assert.assertEquals()和Assert.assertSame方法有什么异同

    1)提供的接口数量不完全相同.assertEquals支持boolean,long,int等等java primitiveType变量.assertSame只支持Object. 2)比较的逻辑不同,结 ...

  10. 怎么配置ODBC microsoft Access 安装(win10)

    笔者看着书配置Access连接方法但就是找不到书中的"Access.mdb". 后来才知道.mdb需要自己创建....对于刚入门的我很无语啊!!!!! 下面带你走出小坑 1.从控制 ...