星空网 > 软件开发 > 网页设计

实战案例: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结构的语义性

 

实战案例:DIV嵌套

2、构建语义化页面操作

 

实战案例:DIV嵌套

 




原标题:实战案例:DIV嵌套

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

出口荷兰需要注意哪些问题?清关有何要求?被当地客户拖欠了货款怎么办?:https://www.goluckyvip.com/news/8917.html
英国海外仓一个月多少费用?:https://www.goluckyvip.com/news/8918.html
TikTok涨粉攻略!硬核解答!海外TikTok广告无法投放或不支出? :https://www.goluckyvip.com/news/8919.html
每周精选:亚马逊推新“防跟卖”计划!美国海关查验率飙升!:https://www.goluckyvip.com/news/892.html
TikTok代运营|怎么找海外红人,有没有推荐的渠道? :https://www.goluckyvip.com/news/8920.html
吃鲸MCN:TikTok网红营销避坑指南 :https://www.goluckyvip.com/news/8921.html
深圳玉龙公园簕杜鹃花海花期时间+门票+交通:https://www.vstour.cn/a/365174.html
出境旅游预订须知:https://www.vstour.cn/a/365175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流