网页制作经验分享：CSS布局如何进行

日期：2007年8月28日作者：查看:[大字体中字体小字体]

CSS具有两面性。就像它在格式化文本、导航栏、图片以及其他小小的网页方面很棒一样，当你准备好布局完整的网页时，它真正可怕的一面也展现出来了。

CSS布局有两种风格——绝对定位和浮动。绝对定位让你把一个元素以像素级的精确性定位在网页的任何位置——或者理论上是这样。这种整体控制令人兴奋，就如你将在下一章中所看到的，但是实际上很难实现。这就是大量网页使用基于浮动的布局的原因，也是本章的主题。

CSS布局如何进行

How CSS Layout Works

如在第1章中讨论过的，HTML的局限性迫使设计师们去开发更聪明的方式来使他们的网页更美观。过去最常用的工具是<table>标签，它本是用来创建电子数据表——比如由数据行和列组成的信息显示表。但是设计师们却用HTML的表格来创建一种用来组织网页内容的脚手架（见图11-1）。可是由于<table>标签本来不是要用于布局的，因此设计师们不得不经常以各种不寻常的方式来使用这个标签——比如把一个表格放在另一个表格的单元里面——仅仅为了得到他们想要的效果。这种方法的工作量很大，增加了大量额外的HTML代码，并使得后面要修改设计很难。但是在CSS出现之前，那就是网页设计师们所拥有的一切办法。

如果你已经习惯于使用<table>标签，那么当你开始使用CSS进行布局时，必须发展一种新的思维。首先，忘掉行和列（运用表格时的一种重要的观念）。没有

列跨度、行跨度和格子状的表格结构在CSS中是找不到的。然而，你可以把一个<div>标签当成一个表格单元。有了表格单元，<div>标签就是把你要的内容定位在网页区域的一个逻辑位置。此外，如你所见，CSS设计经常把一个div嵌套在另一个div里面，就像你把表格嵌套在表格里面来获得特定的效果一样——但是，幸运的是，CSS方法只用少得多的HTML代码。

强大的<div>标签

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">。
[1] [2] 下一页
网页制作经验分享：CSS布局如何进行相关文章：
·Windows Vista中如何自定义语言栏图标
·Windows Vista中如何调整雅黑字体DPI
·Vista操作系统中文件扩展名如何显示
·Windows Vista中如何显示“超级隐藏”文件
·Windows Vista系统如何用命令行运行系统还原
·Windows XP系统中如何重置TCP/IP协议
·如何让你的U盘做到100%预防电脑病毒
·轻松把任何网页工具放进Vista侧边栏
·Vista下如何通过蓝牙手机控制计算机
·中文版Vista如何在线更新SP1
网页制作经验分享：CSS布局如何进行相关软件
·九种性格：如何跟不同性格的人沟通
·如何将菜刀改成军刀
·何绍基书咏落花七律十五章
·美国是如何培养精英的
·何海霞中国画作品集
·漫谈投资组合的几何增值理论
·何乐不为
·执行－如何完成任务的学问
·谁若97岁死，奈何桥上等三年
·如何嫁个千万富翁

上一篇:表格布局中单元格背景颜色鼠标响应的JS代码

下一篇:Photoshop图像合成实例：打造欧式风格效果

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

网页制作经验分享：CSS布局如何进行

精品推荐

热点TOP10

特别推荐