实战案例：DIV嵌套
缘于页面结构语义化的考虑，我们应该慎用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嵌套的更多相关文章
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例(基于Dubbo/Dubbox)
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...
- 第二百五十四节，Bootstrap项目实战--案例
Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析
1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...
- Vue2.0史上最全入坑教程（下）—— 实战案例
书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...
- 【转】分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...
- 3.awk数组详解及企业实战案例
awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...
随机推荐
- fireBug使用指南
据说,对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一. 我最近就在学习怎么使用Firebug,网上找到一篇针对初学者的教程,感觉比较有用,就翻译了出来. ========= ...
- ibatis插入数据返回ID的方法
ibatis插入数据返回ID的方法 主要就是利用seelctkey来获取这个ID值,但是oracle和mysql的区别还是很大的 oracle的用法 <insert id="inser ...
- Geronimo应用服务器和MySQL数据库服务器
就是Web 2.0的全部,尽管该术语出现才几乎一年的时间,但现在好像只有烹饪杂志还没有加入到讨论Web 2.0未来出路的行列中.自从出现了里程碑式的文章"What Is Web 2.0:De ...
- MarkDown编辑器用法
代码行1 var s = "JavaScript syntax highlighting"; alert(s); 代码行2:ESC下面的英文3个波浪号~按键 var s = &qu ...
- hdu1874 最短路模板题
之所以做了第二道模板题还要写是因为发现了一些自己的问题 用的是dij 最简单的松弛 需要注意的地方是松弛的时候 判断dis[i]<dis[w]+tance[w][i]时 还要再判断 vis[i] ...
- [ZZ] Deferred Rendering and HDR
http://www.gamedev.net/topic/496785-deferred-rendering-and-hdr/ Quote: Original post by jstrohYeah I ...
- Python常用函数笔记
1.lambda lambda其实就是一条语句,lambda(x):body.x是lambda函数的参数,参数可以有任意多个(包括可选参数);body是函数体,只能是一个表达式,并且直接返回该表达式的 ...
- 【翻译】CEDEC2014[跨越我的尸体2]跨越Stylized Rendering
Stylized Rendering相关的一篇PPT,PSV上的[跨越我的尸体2],本代的画风参照的是川瀬巴水的木版画风格.不过因为PSV硬件的限制,最后真机上的效果还是有不少折扣的.ppt里提到参考 ...
- what is php?
PHP is a popular general-purpose scripting language that is especially suited to web development. Fa ...
- LR中日志设置和日志函数
LR中日志参数的设置与使用 1.Run-Time Setting日志参数的设置 在loadrunner的vuser菜单下的Run-Time Setting的General的LOG选项中可以对在执行脚本 ...