div+css布局教程系列2
<!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的更多相关文章
- div+css布局教程系列1
<!doctype html><html><head><meta charset="utf-8"><title>简单布局 ...
- <转载>Div+Css布局教程（-）CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- Div+Css布局教程（-）CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- div+css布局教程（1）
margin:Margin属性用于设置两个元素之间的距离. 后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- 【Codeforces 25C】Roads in Berland
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 用floyd思想. 求出来这条新加的边影响到的点对即可. 然后尝试更新点对之间的最短路就好. 更新之后把差值从答案里面减掉. [代码] #in ...
- 查看linux ubuntu版本
ubuntu版本: lsb_release -a linux版本: uname -a proc目录下记录的当前系统运行的各种数据,version记录的版本信息直接可以通过cat查看到. 使用命令:c ...
- 大数据学习——linux常用命令（四）
四 查到命令 1 查找可执行的命令所在的路径 which ls 查ls命令所在的路径 2 查找可执行的命令和帮助的位置 whereiis ls 3 从某个文件夹开始查找文件 find / -name ...
- CDOJ 1225 Game Rooms
Game Rooms Time Limit: 4000/4000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Your ...
- python3 时间复杂度
时间复杂度 (1)时间频度 一个算法执行所耗费的时间,从理论上是不能算出来的,必须上机运行测试才能知道.但我们不可能也没有必要对每个算法都上机测试,只需知道哪个算法花费的时间多,哪个算法花费的时间少就 ...
- 洛谷P2527 [SHOI2001]Panda的烦恼
题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质数,不过panda对这些不感兴趣,他只对被筛掉 ...
- 【组合 数学】codeforces C. Do you want a date?
codeforces.com/contest/810/problem/C [题意] 给定一个集合A,求 , 输入: [思路] 基数为n的集合有2^n-1个非空子集. 首先n个数要从小到大排序,枚举最后 ...
- ascii 和 byte以及UTF-8的转码规则
多年来闲麻烦,只记录笔记,不曾编写BLOG,本文为原创,如需转载请标明出处 废话不说,直奔主题 ascii 计算机只接受 “高”.“低”电压,所以使用二进制 1 和 0 分别代表高低电压 ...
- Easy sssp(vijos 1053)
描述 输入数据给出一个有N(2 <= N <= 1,000)个节点,M(M <= 100,000)条边的带权有向图. 要求你写一个程序, 判断这个有向图中是否存在负权回路. 如果从一 ...
- [NOIP2000] 提高组 洛谷P1017 进制转换
题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 1*10^2+2*10^1+3*10^ ...