基于DIV和CSS的布局结构(1)

DIV在HTML中是一个块级元素,所以它很适合用来建设网页的结构。2000年互联网泡沫之后,CSS流行起来。虽然距离CSS发布已经有很长的一段时间,但它有限的浏览器支持使得开发人员害怕使用它。相对于表格结构,它有相对更高的学习曲线,开发人员必须了解CSS并且清楚地知道CSS间的块级元素和内联元素、何时使用相对定位、何时使用绝对定位来解决浏览器的定位问题,还需了解每个CSS特性在不同浏览器中的不同表现(这点在3.1节中已经提到过)。我们重新审视一下关于Web标准的三个部分:结构(Structure)、表现(Presentation)、行为(Behavior),见图3-12。

基于DIV和CSS的布局结构(1)-魏星博客
图3-12? Web标准的三个核心元素

我们需要还原HTML最初的面貌,用它来描述文档的结构,并且掌握CSS的布局技术来实现页面的排版布局。在设计这种标准的网页时,我们应该先抛去外观,外观在这个时候并不是最重要的,一个结构良好的HTML结构页面可以以任何外观表现出来。如果认真地思考网页所包含的内容,你会发现,你规划的页面结构会包含类似以下几点内容:

标志和站点名称

站点导航(包括子菜单)

搜索框

功能区

边栏

页脚

我们通常使用DIV这个HTML块级元素将这些结构定义出来,如:

  1. <div?id="header"></div><!—头部
  2. <div?id="nav"></div>
  3. <div?id="search"></div>
  4. <div?id="conent"></div>
  5. <div?id="slidebar"></div>
  6. <div?id="footer"></div>

DIV不是一个视觉元素,每个开发人员都知道表格最后的展现是怎样的,但对DIV则并不明确。使用DIV来描述结构能增强网页文档的阅读性,即使在没有CSS的情况下,也能够被正常显示及阅读。

以DIV和CSS作为布局结构时,需要强调两个原则:首先要结构清晰、简洁;其次必须要有语义。这两个原则将为自己及团队带来利益,每个开发人员都不愿看到一大堆凌乱的标记。下面将从几个方面来提醒大家在使用DIV这样的结构时应注意的地方。

1.清除不必要的DIV标记

在HTML标记中,所有标记可按性质分为块元素及内联元素。块元素(block element)一般是其他元素的容器元素,一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签“P”。 如果没有CSS的作用,块元素会顺序地以每次另起一行的方式一直往下排。而有了CSS以后,我们可以改变这种HTML的默认布局模式,把块元素摆放到你想要的位置上。内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见的内联元素是"a"。块元素和内联元素都是HTML规范中的概念。

块元素和内联元素的基本差异是:块元素一般都从新行开始。而加入了CSS控制以后,块元素和内联元素的这种属性差异就不存在差异了。比如,完全可以为内联元素“cite”加上“display:block”这样的属性,让它也有每次都从新行开始的属性,但是在结构上必须使用对应的元素来描述。

常见的块元素如下:

  1. address,?blockquote,?div,?dl,?fieldset,?form,?h1-h6,?hr,? noframes,?noscript,?ol,?p,?pre,?table,?ul?center,?dir,?isindex,?menu

常见的内联元素如下:

  1. a,?abbr,?acronym,?b,?bdo,?big,?br,?button,?cite,?code,?dfn, em,?i,?img,?input,?kbd,?label,?map,?object,?q,?samp,?script,? select,?small,?span,?strike,?strong,?sub,?sup,?textarea,?tt, var?,basefont,?font,?s,?u

在描述结构时,可以去除一些常见的嵌套块元素,由CSS实现相同的效果。下面通过两个示例来说明。

示例1:

  1. <div?class="contactform">?<form?class="contactform">
  2. <form>?=?…
  3. ….?</form>
  4. </form>
  5. <div>
  6. div.contactform{?.contactform{
  7. margin:20px?10px;?margin:20px?10px;
  8. border:1px?solid?#ccc;?border:1px?solid?#ccc;
  9. background:#fff;?background:#fff;
  10. }?}

示例2:

有时候我们使用DIV来控制与其他元素之间的间距,但如果在一个包容体内存在一个标题,则可以利用标题(h4)来控制间距,如下所示:

  1. <div?id="sidebar">?<div?id="sidebar">
  2. <div?class="box">?<h4>标签云</h4>
  3. <h4>标签云</h4>?…内容
  4. …内容?=?<h4>分类</h4>
  5. <div>?…内容
  6. <div?class="box">?</div>
  7. <h4>分类</h4>
  8. …内容
  9. </div>
  10. </div>