基于DIV和CSS的布局结构（2）
** 基于DIV和CSS的布局结构（2）**
2．使用语义化的标签及命名标识
在所有的结构中都应该使用具有语义的标签及命名标识，如，为标题、为段落、为列表等。标识元素也应尽量使用如id=”header”、id=”footer”等易读懂的语义标识。下面的代码使用的就是具有语义的标签及命名标识。
?
标题?标题?
内容?…内容
?
坏的?好的
3．尽量减少使用DIV标记
和表结构一样，深度嵌套的DIV也会给编辑及调试带来麻烦，如少了一个结束会使所有的结构混乱，所以应尽量少使用DIV。
示例1：
在面包屑导航的标签的使用上，可以使用“p”标签而不是DIV。
?
首页/服务?=?首页/服务
?
示例2：
在一些博客的文章日期显示上，也可以做到简单的结构。
?
7?=?710
10?
4．格式化代码
作为开发人员，应养成良好的编程习惯，把代码进行格式化（缩进），使得阅读源代码更方便。
5．在布局结尾加上注释
在一个较复杂的结构中，你可能会迷失方向，不清楚哪个标记在哪个位置结束，调试混乱的布局往往可能少了一个结束的标记，所以应该在布局结构结尾时加上注释，如：
-
…
直到今天，基于DIV和CSS的布局结构仍是标准网页的核心衡量标准，我们需要更多的实践来把握这些技术的应用。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 WEIXING.ME！
相关推荐
2010-09-13
基于DIV和CSS的布局结构（1）
基于DIV和CSS的布局结构（1） DIV在HTML中是一个块级元素，所以它很适合用来建设网页的结构。2000年互联网泡沫之后，CSS流行起来。虽然距离CSS发布已经有很长的一段时间，但它有限的浏览器支持使得开发人员害怕使用它。相对于表格结构，它有相对更高的学习曲线，开发人员必须了解CSS并且清楚地知道CSS间的块级元素和内联元素、何时使用相对定位、何时使用绝对定位来解决浏览器的定位问题，还需了解每个CSS特性在不同浏览器中的不同表现（这点在3.1节中已经提到过）。我们重新审视一下关于Web标准的三个部分：结构(Structure)、表现(Presentation)、行为(Behavior)，见图3-12。 | | | 图3-12? Web标准的三个核心元素 | 我们需要还原HTML最初的面貌，用它来描述文档的结构，并且掌握CSS的布局技术来实现页面的排版布局。在设计这种标准的网页时，我们应该先抛去外观，外观在这个时候并不是最重要的，一个结构良好的HTML结构页面可以以任何外观表现出来。如果认真地思考网页所包含的内容，你会发现，你规划的页面结构会包含类似以下几点内容： 标...
2011-06-24
子标签float父标签div高度自适应问题（4种解决方法）
经常出现子标签浮动（float），父div不能自适应的问题，如下面的代码，li是float：left，外面div高度自适应 ` - 白芍 - 丹参 - 红景天 - 姜黄 ` 解决方法： 1）在子标签的最后加上清除浮动的标签 可以在ul的下面加上以下代码，清除浮动 ` ` 2)给div加css属性 ` .product { overflow:auto; zoom:1; } ` overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。 3)使用after伪类 ` .product:after { content:”.”; height:0; visibility:hidden; display:block; clear:both; } ` 4)浮动外部元素，float-in-float 这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都...
2010-09-24
css 选择符 应用
1.属性选择符： eg.1）所有包含alt属性的图像都将会有一个灰色的边框 img[alt]?{ border:1px ?dotted #999; } 2）包含title属性的链接将是红色 a[title]{ color:#C00; } happysnail 2、子对象选择符 eg. 这个规则将设置所有属于元素子对象的链接的样式 div > a { text-indent :-9999px; } happysnail happy snail> 只有div 的直接 子对象a 才会有 text-indent 的属性，而下的a将不会有text-indent效果 3、相邻选择符 eg.只有snail是红色的 h2+p { color:#C00; } happy snail .org 4、伪类和伪对象 只有第一个P有效果 I’m the first child I’m the second child news.p:first-child{ font-size:200%; } 2）：focus将应用于那些获得焦点的对象 input[typ...
2013-06-28
Native和Web以及Hybrid App的开发之路
现在越来越多的企业开始做手机APP，Native开发成本较高，web表现太差，现在又衍生出Hybrid，他们3者有什么区别呢？什么时候该用什么开发呢？还是专注于一种最好的开发方式去开发所有的App？ 一、Native开发方法的场景 现有的Native开发技能——反对Native开发方法的主要理由之一是，它缺少对多种平台的支持。要求为多种移动平台开发App的企业需要招聘新员工，或者对内部开发者进行众多Native语言方面的培训。内部拥有这种Native开发技能的企业不需要大笔新的投入，就能够充分利用这些技能。 单一移动操作系统——在一些情况下，企业旨在向有限的目标群体发布移动App——这个群体已知使用单一移动操作系统。比如说，考虑这种场景：向员工发放黑莓设备的企业分发内部App。在这种情况下，支持多种平台也许不是优先事项：由于开发单一的Native App只需要一套有限的技能和工具，所以这种方法很有意义。 Native功能——有些App是围绕某一项功能开发的。就拿Skype来说，VOIP和访问用户的联系人信息是App的两大关键要素；考虑到现有的技术，只能采用Native方法来开发...
2010-11-02
IE6中div background 高度问题
上中下DIV并排结构IE6下出现的问题：上层下方有空白！！ 代码： html: ………… css: .dj-top { height:8px; background:url(../images/tjjjr-top.gif) no-repeat; } .dj-bottom { height:9px; background:url(../images/tjjjr-bottom.gif) no-repeat; } .dj-center { height:248px; background:#F6F6F4; border-left:1px solid #EBEBEB; border-right:1px solid #EBEBEB; width:291px; } 出现问题： 如图：top的下方会有一段空白，不论设置高度多少，除非是0px,否则一直存在！ 解决方法?：在.dj-top中加上 {overflow:hidden;} 问题解决！！
2011-03-02
div+css实现内容的水平垂直居中
今天逛蓝色理想论坛，看到一个朋友发的面试题，共4道，我会期中的2道题，另外2道题都是要求 使高度宽度固定的div内的不固定高度的文字或者图片上下左右居中显示，自己没做出来，看了答案 题目：多行文字，保证在DIV中绝对局中，上下左右。不管文字增加多少都是局中的。DIV高度固定。 答案：水平方向居中使用css的text-align：center 就能搞定，垂直方向上需 要2层分别上下50%，最终实现垂直方向上的居中。 查看演示：https://www.weixing.me/demo/up-down-left-right-juzhong.htm 代码如下： ` ` div中的文字保持上下左右居中 CSS Web Design 我爱CSS 我爱CSS致力于Web标准在中国的应用及发展 我们努力保持每天更新，为您提供最新最全的CSS网页布局教程。 我爱CSS致力于Web标准在中国的应用及发展