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 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- Nginx学习总结（5）——Nginx基本配置备忘
Nginx 配置 在了解具体的Nginx配置项之前我们需要对于Nginx配置文件的构成有所概念,一般来说,Nginx配置文件会由如下几个部分构成: # 全局块 ... # events块 events ...
- zoj 2201 No Brainer
No Brainer Time Limit: 2 Seconds Memory Limit: 65536 KB Zombies love to eat brains. Yum. Input ...
- 洛谷P3973 - [TJOI2015]线性代数
Portal Description 给定一个\(n\times n\)的矩阵\(B\)和一个\(1×n\)的矩阵\(C\).求出一个\(1×n\)的01矩阵\(A\),使得\(D=(A×B-C)×A ...
- Java设计模式之（设计模式的概述）
概述: 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软件开发 ...
- 【POJ2774&Ural1517】Long Long Message（后缀数组）
题意:求两个字符串的最长公共子串 n<=1000 思路:这是一道论文题 ..]of longint; n,l1,l2,i,ans,m,l,r:longint; ch:ansistring; pr ...
- poj2117求割点后最多的块。
tarjan算法,枚举割点(注意此题无向图可能不连通),每个割点分割后最大块数+连通分量-1即可.开始老是TLE,后来比较了他人代码,只在vector<vector<int.>.&g ...
- PAT (Advanced Level) 1033. To Fill or Not to Fill (25)
贪心.注意x=0处没有加油站的情况. #include<cstdio> #include<cstring> #include<cmath> #include< ...
- 2887 Big String
splay瞎搞一下,正解是分块数组或分块链表,但是学不会啊! #include<cstdio> #include<cstdlib> #include<iostream&g ...
- Spring实战Day1
为什么要学习使用Spring ------为了全方面简化Java开发 如何简化开发呢? 1.基于POJO[简单老式Java对象(Plain Old Java object)]的轻量级和最小侵入性编程, ...
- ORACLE DTRACE DOC
http://docs.oracle.com/cd/E19253-01/817-6223/