<!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. spring boot学习02【如何在spring boot项目中访问jsp】

    1.配置application.properties文件 打开application.properties追加 spring.mvc.view.prefix=/WEB-ROOT/ spring.mvc ...

  2. python3--产生偏移和元素：enumerate

    之前,我们讨论过通过range来产生字符串中元素的偏移值.而不是那些偏移值处的元素.不过,在有些程序中.我们两者都需要,要用的元素以及值个元素的偏移值.从传统意义来讲,这是简单的for循环,他同时也持 ...

  3. C#通信学习（一）

    基础知识 TCP/IP:Transmission Control Protocol/Internet Protocol,传输控制协议/因特网互联协议,又名网络通讯协议.简单来说:TCP控制传输数据,负 ...

  4. CodeForces 554B--Ohana Cleans Up

    B. Ohana Cleans Up time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. linux基础知识汇总

    1.如何快速回到上次操作的目录? cd - 2.如何快速回到家目录? 直接cd或者cd ~ 3.怎么回到上一级目录? cd .. 4.什么是相对路径,什么是绝对路径? 相对路径就是相对于当前目录的位置 ...

  6. [luoguP1360] [USACO07MAR]黄金阵容均衡Gold Balanced L…

    传送门 真的骚的一个题,看了半天只会个前缀和+暴力.. 纯考思维.. 良心题解 #include <cstdio> #include <cstring> #include &l ...

  7. hdu 2126背包问题

    /*有n件物品,旅客一共有m块大洋.第一个问题,旅客最多可以买多少件物品?请注意,这里是多少件,不是价值最大.所以这个非常好求,将所有的物品按照价值排序,先买便宜的,再买贵的.贪心的思想.这个地方有些 ...

  8. Codevs 3409 搬礼物

    时间限制: 1 s 空间限制: 64000 KB 题目等级 : 青铜 Bronze   题目描述 Description 小浣熊松松特别喜欢交朋友,今年松松生日,就有N个朋友给他送礼物.可是要把这些礼 ...

  9. ibatis中的xml配置文件

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE sqlMap PUBLIC "-/ ...

  10. Java fail-fast 与 fail-safe 机制对比

    关于fail-fast参考这篇文章:   从 modCount 看 java集合 fail-fast 机制 一.fail-safe概述以及与fail-fast区别 首先 fail-safe 并不属于J ...