<!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. .NET Core使用log4Net记录日志

    1.引入Nuget包 log4net 2.添加log4Net配置文件 <?xml version="1.0" encoding="utf-8" ?> ...

  2. 在VS中如何更换项目名称

    我们常常在建立项目的时候就必须输入一个项目名称,有的时候我们就随意的起了一个名称,可是到后面想到了一个更好的项目名我们就想把项目名称改过来,但VS并不那么智能,我们不能简单的将项目对应的解决方案SLN ...

  3. Java基础学习总结（90）——Java单元测试技巧

    测试是开发的一个非常重要的方面,可以在很大程度上决定一个应用程序的命运.良好的测试可以在早期捕获导致应用程序崩溃的问题,但较差的测试往往总是导致故障和停机. 虽然有三种主要类型的软件测试:单元测试,功 ...

  4. 查看linux ubuntu版本

    ubuntu版本: lsb_release -a  linux版本: uname -a proc目录下记录的当前系统运行的各种数据,version记录的版本信息直接可以通过cat查看到. 使用命令:c ...

  5. mysql查最大字符串

    select MAX(comp_code+0) from t_base_company 字符串 +0 把字符串转成数字

  6. POJ 1006-Biorhythms,中国剩余定理，学信安的路过！

                                                       Biorhythms 我竟然1A了, 终于从一天的浑噩中找回点自信了.人生第一次做中国剩余定理的题 ...

  7. POJ-2590-Steps题目详解，思路分析及代码，规律题，重要的是找到规律~~

    Steps Time Limit: 1000MS   Memory Limit: 65536K       http://poj.org/problem?id=2590 Description One ...

  8. NYOJ27水池数目，类似于FZU1008最大黑区域，简单搜索题~~~

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上 ...

  9. oracle等待事件相关查询

    --------------------------查询数据库等待时间和实际执行时间的相对百分比--------------------- select *   from v$sysmetric a ...

  10. 解决静态utils里面注入mapper对象

    项目中需要在一个utils工具类中,调用mapper对象来进行功能实现,然而静态方法里面直接注入会报空指针的错误,网上查了一些资料得出如下解决办法 重点步骤: 1,utils类上面添加@Compone ...