缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构。如果想对段落内部分内联元素或文本应用某种特殊样式时,就可以使用span元素把他们独立封装在一个容器内。

div作为布局元素,它与表格一样是可以嵌套的。因为浏览器对于任何元素的解析方式都是一样的,一般从最里层开始,然后不断向外解析。当嵌套层级很深时,将会使浏览器消耗更多的资源对嵌套关系进行解析,势必会影响浏览器的速度。

对于一个上下三行的布局结构:

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

为了实现页面固定宽度和居中显示效果,分别给三个div设置css样式就有点麻烦了,我们可以给它嵌套一个div层:

<div id="wrap">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

实际上这种增加一层div嵌套的方法,肯定会给浏览器的显示带来负担,我们可以将body元素作为一个外套,这样就能充分发挥body的作用,以免造成浪费。

<body id="wrap">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>

又比如:要给上述顶部页眉部分加一个导航条:

<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav">
<ul> <!--导航列表-->
<li></li> <!--导航列表项-->
<li></li> <!--导航列表项-->
<li></li> <!--导航列表项-->
</ul>
</div>
</div>
</div>

上述代码是最优化的么?当然不是,ul元素与div元素一样都是块状元素,一个导航菜单外面嵌套两层元素,势必会产生代码冗余,如果没有被定义的特殊样式,我们完全可以这样写:

<body id="wrap">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav">
<ul> <!--导航列表-->
<li></li> <!--导航列表项-->
<li></li> <!--导航列表项-->
<li></li> <!--导航列表项-->
</ul>
</div>
</body>

  这种情况就是最优的。但是,这样做存在一定的风险,可能需要使用更多的css样式来控制整个元素的显示。如果多嵌套一层,对页面布局会有更大的帮助,能节省大量不必要的css控制代码,此时布局的功能重要性就远大于结构的功能性。

总之,在我们大力提倡尽力减少div元素的多次嵌套时,是针对当前网页设计中设计师乱套div元素的现状而说的,但并不是谈套色变,必要的嵌套是应该的,也是必须的!

补充:页面语义化操作:

1、XHTML结构的语义性

2、构建语义化页面操作

实战案例:DIV嵌套的更多相关文章

  1. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  2. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. 分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例(基于Dubbo/Dubbox)

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...

  5. 第二百五十四节,Bootstrap项目实战--案例

    Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  6. Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  7. Vue2.0史上最全入坑教程(下)—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

  8. 【转】分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...

  9. 3.awk数组详解及企业实战案例

    awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...

随机推荐

  1. Linux redirect the stdout to a file

      1: int save_out = dup(fileno(stdout));//backup stdout 2: int out = open("cout.log", O_RD ...

  2. Channel 笔记本项目 (门户客户端 和 wp7客户端(介绍1))

    Channel 笔记本项目:(所包含 门户客户端 和 wp7客户端)              首先wp7客户端中,首页向右滑行,到了新闻(博文):(点触某篇新闻后,进入到新闻详细页面,在菜单栏所对应 ...

  3. WritePrivateProfileString()

    在我们写的程序当中,总有一些配置信息需要保存下来,以便完成程序的功能,最简单的办法就是将这些信息写入INI文件中,程序初始化时再读入.具体应用如下: 将信息写入.INI文件中 1.所用的WINAPI函 ...

  4. tomcat的安装

    这个安装过程很清晰,转载一下:http://jingyan.baidu.com/article/8065f87fcc0f182330249841.html

  5. php向队列服务里插入一条insert sql例如

    Iserver简介 Iserver是一个用python编写的网络服务框架(编译版本3.4.1),使用的是epool网络模型 测试机配置 处理器 2x Genuine Intel(R) CPU T205 ...

  6. java对象比较器和克隆

    一.比较器Comparable和Comparator 上一篇博客介绍了工具类Arrays工具类 .我们可以对基本类型的数组调用Arrays.sort()函数来进行数组的排序.排序操作在日常开发中经常要 ...

  7. POJ 1185 炮兵阵地(状压DP)

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26426   Accepted: 10185 Descriptio ...

  8. Web 在线文件管理器学习笔记与总结(11)获取文件夹信息 (12)返回上一级操作

    (11)获取文件夹信息 文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...

  9. pycharm 皮肤主题及个性化设置

    1.设置IDE皮肤主题 File -> Settings -> IDE Settings -> Appearance -> Theme -> 选择“Alloy.IDEA ...

  10. 使用Xcode GPU Frame Caputre教程

    http://blog.manbolo.com/2012/11/20/using-xcode-opengl-es-frame-capture 这里是原文,因为它版本比较老和它demo的限制,所以也想写 ...