<!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的更多相关文章

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  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. JSP表达式语言（EL）

    JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP  EL既可以用来创建算术表达式也可以用来创建逻辑表达式.在JSP  EL表达式内可以使用整数型.浮点型.字符串.常量 ...

  2. Ubuntu 配置Apache虚拟目录

    http://blog.csdn.net/spring21st/article/details/6589300 Ubuntu 配置Apache虚拟目录 http://blog.csdn.net/spr ...

  3. BeautifulSoup实例

    Beautiful Soup 4.4.0 中文文档:http://beautifulsoup.readthedocs.io/zh_CN/latest/ #coding:utf-8from bs4 im ...

  4. ORACLE-023：令人烦恼的 ora-01722 无效数字

    https://blog.csdn.net/yysyangyangyangshan/article/details/51762746

  5. python模块以及导入出现ImportError: No module named ‘xxx‘问题

    python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用如果你要使 ...

  6. python-001 第一个Python3.x程序 hello world

    我们可以使用以下命令来查看我们使用的Python版本: (d:\ProgramData\Anaconda3) C:\Users\Administrator.2016-20160920ET>pyt ...

  7. POJ2926-Requirements，曼哈顿距离。去掉绝对值符号暴力枚举所有情况，神薙！

                                                         Requirements 好吧,这题我实在想不到什么优化的方法,看了看讨论区,顺便膜拜了一下大 ...

  8. HDU1754-I Hate It,线段数水题~~2016.4.11

    I Hate It                                                                                           ...

  9. 调用BOS服务保存一个单据的简化示例

    IMetaDataService metadataService = ServiceHelper.GetService<IMetaDataService>(); // 加载元数据 Form ...

  10. iOS textView在调用textViewDidChange方法，中文输入的问题

    有时候,需要在textViewDidChange处理时,在中文输入的情况下,例如输入“中”,对应的拼音“zhong”, 在textViewDidChange的方法里会把拼音也算进去:导致输入中文时也输 ...