网页制作：CSS布局如何进行
来源:网络 时间:07-08-28 点击: 点击这里收藏本文
The Mighty <div> Tag
无论使用表格还是CSS，网页布局都是把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是<div>标签。如第18页所述，<div>标签是没有固有格式化属性的一个HTML元素（除了浏览器把这个标签当成前后有换行的块之外）；反之，它被用来标识元素的一个逻辑组合或者网页中的一个分区。
你将代表性地把一大块属于一起的HTML包围在一个<div>里面。图11-1中包含logo和导航栏的元素占据了网页顶部，因此用一个<div>标签把它们包围起来很有意义。至少，你要给网页的所有主要区域包含<div>标签，例如横幅、主要内容区域、工具条、页脚，等等。但是它也可能把一个或者更多的div包在一个<div>里面。一种最常用的方法就是把<body>标签里面的HTML包在一个<div>里面。然后可以通过把CSS应用到包装<div>，设置基础的页面属性。你可以给网页内容设定一个整体的宽度，设置左边距和右边距，或者把所有网页内容在屏幕的中间居中。（在第313页的教程中，你有机会用到一个包装<div>。）
一旦已经把<div>标签放在了适当的位置上，再给每个<div>标签添加一个类或者ID，变成你分别对每个<div>定义样式的句柄。对于只出现一次和形成网页的基本构建块的网页部位，设计师们通常使用一个ID。一个网页横幅区域的<div>标
签看起来可能像这样：<div id="banner">。你可以对一个ID每页只使用一次，因此当有一个多次显示的元素时，就用一个类代替。如果你有几个定位照片和照片说明的div时，可以创建一个样式像这样：<div class="photo">。
有了类似这些的样式，就可以定位各种各样的网页元素了。利用CSS的float属性，你可以定位不同的内容块给一张网页的左边或者右边（或者一个包含块比如另一个<div>的左边或者右边）。
至理名言
更多并非更好
虽然div对于CSS布局很重要，但也别对你的网页滥用div。一个常见的陷阱是相信你必须把一张网页中的一切都包围在一个<div>标签里面。假设你的主导航栏是一个链接的无序列表
（就像第218页中所述）。由于它是一个重要的元素，你可能会试探用一个<div>来把它围起来：<div id="mainNav"><ul>...</ul></div>。但是当<ul>标签唾手可得时，就没有必要去添加一个<div>了。只要<ul>包含主要的导航栏链接，就只需添加ID样式给这个标签：<ul id= "mainNav">。多余的<div>只是一些没有必要的代码。
把此文章收藏到：
