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 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- He'llWorld_Struts2
[步骤] 1.创建web项目 2.导入相关jar包 3.配置核心过滤器 web app libraris ---> struts-core ---> org.apache.struts2 ...
- 【04】Firebug页面概况查看
Firebug页面概况查看 使用Firebug的概况,你可以测试Web页面导致延迟加载的文件. 通过打开页面 Firebug > Console(控制台)> Profile(概况). 你需 ...
- PS修图知识小结
PS修图知识小结 [1]人去除红眼. 1.用红眼工具,框选红眼不分. 2.用椭圆选区工具,选择红眼部分 3..创建调整图层,亮度.对比度.加大对比度. 4.选择红眼部分.创建调整图层,可选颜色,减 ...
- luogu2596 [ZJOI2006]书架
treap.树是以"优先级"(优先级越小,在书架上越靠上)形成的,堆是以rand()的权值形成的.还要再维护一个原编号. 置顶/置底:找到那个元素,把它拉出来修改优先级再塞回去. ...
- 一个爬取lativ诚衣网站上模特穿搭图片的爬虫
show the code: [peter@localhost savvy]$ vi lativ.py # -*- coding:utf-8 -*- import requests,lxml,os f ...
- [转载] Asynchronous ActionScript Execution
Asynchronous ActionScript Execution Date September 19, 2009 Language ActionScript 3.0 Target Flash P ...
- Tao Tao要吃鸡（01背包）
题目描述 Taotao的电脑带不动绝地求生,所以taotao只能去玩pc版的荒野行动了,和绝地求生一样,游戏人物本身可以携带一定重量m的物品,装备背包之后可以多携带h(h为0代表没有装备背包)重量的东 ...
- PTA 01-复杂度1 最大子列和问题 (20分)
题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/709 5-1 最大子列和问题 (20分) 给定KK个整数组成的序列{ N_1N1 ...
- DP在字符匹配上的实现
在此保存下近段时间做的DP在字符匹配上的实现的题目 对于不同的字符串来说,2者只能不断将下标往后推移来实现匹配从而得到的最大匹配数 如 abcd 和 dcba 这个最大匹配数只能为1,因为两个d匹配后 ...
- xth 砍树(codevs 1369)
题目描述 Description 在一个凉爽的夏夜,xth 和 rabbit 来到花园里砍树.为啥米要砍树呢?是这样滴,小菜儿的儿子窄森要出生了.Xth这个做伯伯的自然要做点什么.于是他决定带着rab ...