在使用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>页面布局如下图:

嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#container一个规则让列表居右,再给#GlobalNav一个规则让列表居左,而给# Content-Left的list另一个完全不同的表现。

<转载>div+css布局教程之div+css常见布局结构定义的更多相关文章

  1. Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  2. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  3. 总结CSS面试题目的考察点及常见布局问题整理

    整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...

  4. <转载>Div+Css布局教程(-)CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  5. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  8. Div+Css布局教程(-)CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  9. css关于控制div靠左或靠右的排版布局

    关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...

随机推荐

  1. BZOJ 1029: [JSOI2007]建筑抢修

    1029: [JSOI2007]建筑抢修 Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有 ...

  2. 本地机apache配置基于域名的虚拟主机详解

    1.打开apache的httpd.conf文件,找到# Virtual hosts#Include conf/extra/httpd-vhosts.conf这一段把Include conf/extra ...

  3. 搭建你的持续集成server - CruiseControl step by step(1)

    CruiseControl是CIserver的老者,诞生已是多年,在很多方面,CruiseControlserver已经成为持续集成实践的同义词.而如今,CruiseControl已发展成为一个家族式 ...

  4. 公共 DNS server IP 地址

    公共 DNS server IP 地址 名称 DNS server IP 地址 CNNIC SDNS 1.2.4.8 210.2.4.8 114 DNS 114.114.114.114 114.114 ...

  5. stm32之PWM

    PWM是pulse width modulation的缩写,即脉冲宽度调制.其通过对一系列脉冲的宽度进行调制,来等效地获得所需要波形: 1.PWM是一种对模拟信号电平进行数字编码的方法.通过高分辨率计 ...

  6. iOS开发关于AppStore程序的上传流程

    主要内容: 1.创建唯一标示符App ID(前提是你的程序在真机上测试没有任何问题) 2.申请发布证书 3.申请发布描述文件 4.iTunes Connect创建App并填写信息 5.选择证书编译打包 ...

  7. goahead 移植

    1.网上下载goahead-3.1.-0-src.tgz包 2.解压 tar -zxvf goahead-3.1.-0-src.tgz 3.编译 cd goahead-3.1.-0 make CC=a ...

  8. 乐观锁&悲观锁

    悲观&乐观,只是对数据加锁的时机与粒度. 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这 ...

  9. Solr4.7从数据库导数据

    实际工程应用中,从数据库导出数据创建索引再常见不过了,现在实验一下从数据库导入数据创建索引. 一.版本说明 Solr版本:4.7.0 数据库:sqlserver2005 二.配置步骤 1.  准备的j ...

  10. Observer设计模式【利用商品概念解释】

    每个人都想过着富有的生活,这是很正常的. 这里以开店进货为例. 在讲之前解释英语单词: Observer:查看:遵守 Observable:可见的,公开的. 从单词可以知道:商品用来卖,所以公开,继承 ...