div+css布局教程系列1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单布局div+css</title>
<style type="text/css">
#container {
width: 1000px;
margin: 0 auto;
background:#CF3
}<!--这里并没有对container设置height，也就是说，用多少，就会有多少。-->
#header { height:80px; background:#093;}<!--这里同理没有设置宽度width，默认是container的宽度吧？自己认为的，不能代表官方看法-->
#logo{ padding-left:50px; padding-bottom:50px; padding-top:20px;}
#content{ overflow:auto; margin-top:20px; background:#0FF;}<!--此处设置overflow的标签是正统的做法，不建议设置content的高度，能用多少他就给多杀-->
#content-left{ float:left; height:500px; background:#90C; width:200px; margin:20px; text-align:center}
#content-right{ float:left; height:500px; background:#90c; width:700px; margin:20px; text-align:center}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
.clear{ clear:both;}<!--使用float设置了一行多列之后，最好在后面紧接着使用clear：both清除一下上面的格式，防止出错。上面的布局可能会影响到下面。-->
#footer{ height:80px; background:#093;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">这里放置的是logo</div>
</div>
<div id="content">
<div id="content-left">左半边翅膀</div>
<div id="content-right">右半边翅膀</div>
</div>
<div class="clear"></div>
<div id="footer">页脚</div>
</div>
</body>
</html>
在使用div+css布局时，首先应该根据网页内容进行结构设计，仔细分析和规划你的页面结构，你可能得到类似这样的几块：
页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜索框、页脚(版权和有关法律声明)。
通常采用DIV元素来将这些结构定义出来，类似这样：
<div id="Container"></div> 页面层容器
<div id="header"></div> 页面头部
<div id="content"></div> 页面主体
<div id="globalnav"></div> 站点导航
<div id="subnav"></div> 子菜单
<div id="search"></div> 搜索框
<div id="footer"></div> 页脚
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="80%" cellpadding="3" border="2" align="left">，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。
举例列举一个常见网站布局结构：
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：
<div id="Container">
<div id="Header">
<div id="Logo"></div>
<div id="GlobalNav"><ul>a list</ul></div>
</div>
<div id="Content">
<div id="Content-Left"><ul>a list</ul></div>
<div id="Content-Main"></div>
</div>
<div id="Footer"></div>
</div>
文章来自:雨田SEOER
div+css布局教程系列1的更多相关文章
- div+css布局教程系列2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- <转载>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 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- SQL ROW_NUMBER() 通用分页存储过程
--提取分页数据,返回总记录数 Create procedure [dbo].[sp_Common_GetDataPaging_ReturnDataCount] ( @SqlString varcha ...
- Hybris Virtualjdbc Extension
作者:Eason 编写日期:2018/07/31 联系方式:13920409462 1. Extension 说明 virtualjdbc extension 提供了虚拟JDBC驱动程序的实现. 通过 ...
- Codeforces889C. Maximum Element
$n \leq 2000000$的排列,问有多少满足:存在个$i$,使得$p_i \neq n$,且$p_j<p_i,j \in [i+1,i+K]$,$K \leq 2000000$是给定常数 ...
- hdu3306：Another kind of Fibonacci
A(0)=A(1)=1,A(i)=X*A(i-1)+Y*A(i-2),求S(n)=A(0)^2+A(1)^2+A(2)^2+A(3)^2+……+A(n)^2. 这个矩阵有点毒.. #include&l ...
- poj3905 2sat!
这次已经不是2sat的问题了,相信2sat已经不是问题了,最后一题2sat,竟然跪在输入上! 千万注意scanf(%c)!读入!!!!有空格也读啊!!!读入+ -一定要用字符读啊??笨死算了!被人水死 ...
- poj2186 求有向图G中所有点都能到达的点的数量
/*题意:有向图,求这样的点的数量:所有点都能到达它.缩点成有向无环图,思:如果该强连通有出度,那么 从该出度出去的边必然回不来(已经缩点了),所以有出度的强连通必然不是.那么是不是所有出度为0的强连 ...
- 洛谷——P2916 [USACO08NOV]为母牛欢呼Cheering up the Cows
https://www.luogu.org/problem/show?pid=2916 题目描述 Farmer John has grown so lazy that he no longer wan ...
- union关键字和字节大小端序的确定
union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...
- [Poj1185][Noi2001]炮兵阵地（状压dp）
炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 29476 Accepted: 11411 Descriptio ...
- final finally finalize 区别及用法
final 1,final修饰的class,代表不可以继承扩展. 2.final的方法也是不可以重写的. 3.final修饰的变量是不可以修改的.这里所谓的不可修改对于基本类型来来,的确是不可以修改. ...