设计Web标准网页

Dreamweaver是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。Dreamweaver的每一次版本更新都会带来很多新功能和新特性。在Dreamweaver CS3基础上，Adobe公司又发布了最新版的网页制作和设计软件Dreamweaver CS4。Dreamweaver CS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。

 了解网页制作流程

 了解Dreamweaver CS4新增功能

 熟悉CSS的基本语法和应用方法

 掌握CSS样式的创建方法

 掌握CSS样式的定义和基本作用

 掌握使用CSS进行简单页面布局

 熟悉CSS兼容性的解决方法

 了解常用的CSS技巧

个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。个人网页与企业类、门户类网页相比，比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。

1.1.1 网页制作流程

为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。

每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。

图1-1 网站开发流程

1.1.2 网页制作工具

Dreamweaver是一个专业的HTML编辑器，用于对Web站点、Web网页和Web应用程序进行设计、编码与开发。无论使用者喜欢直接编写HTML代码，还是偏爱在可视化编辑环境中工作，Dreamweaver都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。

而作为该软件的最新版本Dreamweaver CS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。主要体现在如下方面。

支持领先Web技术 在支持大多数领先Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、Adobe ColdFusion软件和ASP。

CSS最佳推荐新增功能 无须编写代码即可实施CSS最佳推荐。参考CSS最佳推荐实现可视化设计，并辅以通俗易懂的实用概念说明。用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性 应用。

全面的CSS支持增强功能 使用Dreamweaver CS4中增强的CSS实施工具可使用户的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改CSS规则。使用新增的“相关文件”和“代码导航器”功能可找到定义特定CSS规则的位置。

HTML数据集新增功能 无须掌握数据库或XML编码即可将动态数据的强大功能融入网页中。Spry数据集可以将简单的HTML表中的内容识别为交互式数据源。

代码导航器新增功能 新增的“代码导航器”功能可显示影响当前选定内容的所有代码源，如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。

1.1.3 制作个人主页

在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突出显示。

STEP|01 新建文档，在【标题】文本框中输入“欢迎光临我的主页”，按Ctrl＋S组合键保存文档。在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、【上边距】和【下边距】都为0，单击【确定】按钮，如图1-2所示。

图1-2 设置页面属性和标题

STEP|02 单击【常用】选项卡中的【表格】按钮，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100%，【边框粗细】为0像素，单击【确定】按钮创建第一个表格，如图1-3所示。

图1-3 插入1行1列表格

STEP|03 单击选中这个单元格，在【属性】面板上设置单元格的高度为100。进入【拆分】视图，输入代码“background="images/header.gif"”为单元格设置一张背景图片，如图1-4所示。

图1-4 设置表格背景图片

STEP|04 在单元格中输入“我的个人主页”，然后在【属性】面板中设置【字体】为“黑体”，【大小】为28，【文本颜色】为#FDFDE0，如图1-5 所示。

图1-5 设置标题文字的字体属性

STEP|05 接下来制作导航栏目。单击【常用】选项卡中的【表格】按钮，创建第二个表格，设置为6列、间距为1。选择表格，在【属性】面板中设置表格的【行】、【列】、【宽】、【间距】、【边框】，并设置【背景颜色】为#006600，如图1-6所示。

图1-6 设置1行6列表格属性

STEP|06 单击第二个表格，然后单击标签选中该行，在【属性】面板中，设置【高】为18、【背景颜色】为#669900、【水平】对齐方式为“居中对齐”、【垂直】为“底部”、字体【大小】为12、【文本颜色】为#EFF6D6，如图1-7所示。

图1-7 设置单元格属性

STEP|07 选中前5个单元格，设置它们的宽度为120，分别输入文字“我的日记”、“我的收藏”、“我的相册”、“我的朋友”和“给我留言”，如图1-8所示。

图1-8 设置菜单文字

STEP|08 打开【页面属性】对话框，设置页面的【背景颜色】为#FDFDE0。单击【常用】选项卡中的【表格】按钮，设置参数为1行2列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第三个表格。单击右边的单元格，在【属性】面板中设置它的宽度和对齐方式，如图1-9所示。

图1-9 调整单元格宽度和对齐方式

STEP|09 将光标置于右边的单元格中，单击【常用】选项卡中的【图像】按钮，在打开的【选择图像源文件】对话框中选择图像tree.jpg，单击【确定】按钮返回，如图1-10所示。

图1-10 插入图像

STEP|10 将光标置于左边的单元格中，在【属性】面板中设置它的【垂直】对齐方式为“顶端”。单击【常用】选项卡中的【表格】按钮，设置参 数为4行1列，【表格宽度】为90%，【边框粗 细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建第四个表格。在【属性】面板中设置表格的【对齐】方式为“居中对齐”，如图1-11所示。

STEP|11 将光标置于第一个单元格中，输入文章标题，在【属性】面板中设置文字的大小、颜色、对齐方式以及单元格的高度、对齐方式等参数，如图1-12所示。

图1-11 设置表格对齐方式

图1-12 设置文章标题属性

STEP|12 在第二个单元格中输入文章的正文，在【属性】面板中设置文字的大小和颜色，如图1-13所示。

图1-13 设置正文内容属性

STEP|13 将光标置于第三个单元格中，设置它的高度为50。单击【常用】选项卡中的【表格】按钮，设置参数为1行7列，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建一个嵌套表格。在前7个单元格中分别输入“友情链接”、“百度”、“谷歌”、“新浪”、“网易”、“搜狐”“计算机教程网”，按照上一步骤的方法设置字体的大小和颜色，并拖动表格边框调整到合适宽度，如图1-14所示。

图1-14 设置表格属性

STEP|14 将光标置于第四个单元格中，设置它的高度为50，输入版权信息。选中版权信息，在【属性】面板中设置【文本大小】为12，【文本颜色】为#999999，如图1-15所示。

图1-15 设置版权文字格式

STEP|15 至此个人网站的首页制作完成，按Ctrl＋S组合键保存文档，再按F12键就可以在IE窗口中预览网页效果了。最终效果如图1-16所示。

图1-16 个人主页效果

CSS（Cascading Style Sheets，层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。当IE浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，即将按照样式描述的格式显示网页内容。CSS文件用于控制网页的布局格式和网页内容的样式，所以用户仅需要修改CSS文件内容即可改变网页显示的效果。使用CSS后可以大大降低网页设计者的工作量，提高网页设计的效率。

1.2.1 CSS概述

使用CSS可以非常灵活并更好地控制页面的确切外观。例如，控制许多文本属性，包括特定字体和字号大小，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色，链接颜色和链接下划线等。通过使用CSS控制字体，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

除设置文本格式外，还可以使用CSS控制Web页面中块级别元素的格式和定位。可以对块级元素执行的操作有：设置边距和边框、将它们放置在特定位置、添加背景颜色、在周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。

CSS技术的最大优势有如下几点。

样式重用 编写好的样式（CSS）文档，可以被用于多个HTML文档，样式就达到了重用的目的，节省了编写代码的时间，统一了多个HTML文档的样式。

轻松地增加网页的特殊效果 使用CSS标记，可以非常简单地对图片、文本信息进行修饰，设置相关属性。

使元素更加准确定位 使显示的信息按设计人员的意愿出现在指定的位置上。

1.2.2 CSS语法

CSS在设计领域中是一个突破，仅仅通过CSS样式表就能够使网页开发人员控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所需要的样式。简单地改变样式，所有与之相关的元素都会自动 更新。

CSS样式表由多条样式规则组成，每种样式规则都设置一种样式。一种样式规则，就是针对HTML标记对象所设定的显示样式。CSS样式规则的定义语法非常简单，都是由一些属性标记组 成的。

1．语法格式

CSS样式表是由若干条样式规则组成的，这些样式规则可以应用到不同的元素或者文档来定义显示的外观。每一条样式规则由3部分构成：选择符（selector）、属性（property）和属性的取值（value），基本格式如下：

selector{property: value}

selector选择符可以采用多种形式，但一般为文档中的HTML标记，例如“”、“

图1-18 【新建CSS规则】对话框

在【选择器类型】下拉列表框中提供了4种类型。如果要创建一个可作为class属性应用于任何HTML元素的自定义样式，可以选择“类”选项，然后在【选择器名称】文本框中输入样式的 名称。

如果要定义包含特定ID属性的标签格式，则可以选择ID选项，然后在【选择器名称】文本框中输入唯一ID（例如NewsTitleDIV）。该ID必须以"#"特殊符号开头，并且可以包含任何字母和数字组合（例如，#myID1）。如果没有输入特殊符号，Dreamweaver将自动为输入补充。

如果要重新定义特定HTML标签的默认格式，可选择【标签】选项，然后在【选择器名称】文本框中输入HTML标签或从弹出菜单中选择一个标签。

另外，如果要定义同时影响两个或多个标签、类或ID的复合规则，应该选择【复合内容】选项并输入用于复合规则的选择器。例如，如果输入“div p”，则DIV标签内的所有p元素都将受此规则影响。在下方说明文本区域中，会准确说明要添加或删除选择器时该规则将影响哪些元素。

从【规则定义】下拉列表中选择要定义规则的位置，共包括如下几项。

将规则放置到已附加到文档的样式表中，选择相应的样式表名称。

创建外部样式表，选择“新建样式表文件”选项。

在当前文档中嵌入样式，选择“仅限该文档”选项。

最后，在【CSS规则定义】对话框中选择要为新的CSS规则设置的样式选项，完成后单击【确定】按钮。也可以不设置任何样式直接单击【确定】按钮新建一个空白规则。

3．直接创建具有CSS规则的网页

在Dreamweaver CS4中，除了可以在空白网页中创建CSS规则外，还可以直接创建具有CSS样式的网页。执行【文件】|【新建】命令，可以创建一个已包含CSS布局的页面。Dreamweaver附带了30多个可供选择的不同CSS布局，其中各种类型选项及相关说明如表1-2所示。

表1-2 CSS布局中的各种类型选项及相关说明

当打开【新建文档】对话框后，选择【空白页】选项，即可在【布局】列表中选择不同的CSS布局，以及创建布局CSS的位置等，如图1-19所示。

选择页面使用布局之后，还需要指定CSS规则的存储位置，有如下几项可以选择。

添加到文档头

选择一个CSS布局后，默认选择该选项，能够将布局的CSS添加到要创建的页面中，这时创建的CSS代码显示在当前网页中。

新建文件

选择该选项后，会打开【将样式表文件另存为】对话框，将CSS布局保存为CSS格式文件。然后，才会创建具有CSS布局的网页，这样创建的CSS样式为独立文件，但是会将该文件链接到新建网页中，如图1-20所示。

链接到现有文件

当选择该选项后，需要将外部文件添加到【附加CSS文件】文本框中，然后单击【创建】按钮，将创建的CSS样式保存在现有的CSS文件中，并且显示在新建网页中。

在使用CSS样式为网页布局时，经常将网页中同类的网页元素（例如同栏目的文本）设置为一种样式。这就需要定义一种CSS选择符，然后在该选择符内定义网页相同元素的样式。CSS选择符也是一条CSS规则，主要使用方式有：标签选择符、类选择符、ID选择符和伪类选择符。本节将学习使用Dreamweaver CS4创建各种类型选择符的CSS样式，并制作新闻查看页面。

1.3.1 新建CSS规则

默认情况下，Dreamweaver CS4使用CSS设置文本格式。用户可使用“属性”检查器或菜单命令应用于文本的样式来创建CSS规则，这些规则嵌入在当前文档的头部。还可以使用【CSS样式】面板创建和编辑CSS规则和属性。【CSS样式】面板是一个比“属性”检查器强大得多的编辑器，它显示为当前文档定义的所有CSS规则，而不管这些规则是嵌入在文档的头部还是在外部样式表中。

1．标签选择符

使用标签样式可以重定义页面文件中XHTML标记的默认格式设置。用标签定义的CSS样式设置完成后，该CSS样式马上生效。例如，对页面内

标签定义规则，方法是：首先将光标在

标签内单击，然后在【CSS样式】面板中单击【新建】按钮，打开【新建CSS规则】对话框，在【选择器类型】下拉列表框中选择【标签】选项。

此时【选择器名称】文本框会自动变为“h1”，表示为h1标签定义样式，而且在下方还显示了规则的应用范围。保留【规则定义】下拉列表框的值，将样式保存到当前文档，即仅针对一个文档有效，如图1-21所示。

图1-21 新建h1标签样式

最后，单击【确定】按钮会弹出【h1的规则定义】对话框，在这里可以设置CSS对背景、区块或者列表等方面的设置，具体设置会在后面介绍，这里直接单击【确定】按钮返回。

2．类选择符

为了对网页格式的样式定义更为精确，需要让相同的选择符（一般情况下为页面标记）也能分类，并按照不同的类别进行不同的样式设计。类选择符就是这些样式的表示方式，它以句点（.）开头，并可以任意命名，如.title，.fontstyle等。

例如，在一个页面包括了如下代码，这样其实已经使用了类样式，只是还未对类样式添加CSS样式。

内容省略

语句使用class属性对div标记应用了一个content类样式。此例中，content样式表示这是一个信息显示区域。在上述代码内单击，再使用【新建CSS规则】对话框，从【选择器类型】下拉列表中选择【类（可应用于任何HTML元素）】选项，【选择器名称】文本框中会出现图1-22所示内容，还显示了该类样式可影响所有HTML元素。

图1-22 新建content类样式

3．ID选择符

ID选择符是用于标识页面上的唯一标记，具有特定性，不可以重复使用和定义。如果需要将CSS样式应用于ID名，则可以使用ID选择符。例如可使用#sHeader，则这个CSS样式将应用于网页上带有ID="sHeader"的XHTML标记。该样式将不可以再被其他标记使用，创建时的对话框如图1-23所示。

图1-23 新建#sHeader样式

4．伪类选择符

伪类选择符的最大作用就是可以对链接的不同状态定义不同的样式效果。它表示动态链接4种不同的状态：未访问的链接（link）、已访问的链接（visited）、鼠标停留在链接上（hover）和激活链接（active）。对应有4种伪类选择符：a:link、a:active、a:hover和a:visited。图1-24所示为使用伪类选择符时的创建对话框，需要在【选择器类型】下拉列表中选择【复合内容】选项。

图1-24 新建伪类样式

1.3.2 设置CSS样式

无论是在【新建CSS规则】对话框中选择了哪种类型的选择器，都只是仅仅创建了一个CSS规则，并没有具体内容。要想设置更详细的样式属性，需要在创建样式后的【CSS规则定义】对话框中设置。这些设置主要包括8个选项，每个选项又包含很多可以设置样式的属性值。

1．文本样式

字体属性是CSS中使用频率最高，也是最简单的样式属性。在传统的XHTML中仅提供了对字体颜色、大小和类型的3种设置，而在CSS中可以对字体有更详细的设置，从而实现更加丰富的字体 效果。

在表1-3中列出了CSS中用于控制字体的常用属性。

表1-3 常用字体属性

2．背景样式

使用【CSS规则定义】对话框的【背景】选项可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，如在文本、表格、页面等的后面，还可以设置背景图像的位置。在表1-4中列出了设置【背景】选项时与其相关的CSS属性及说明。

表1-4 常用背景属性及说明

图1-25演示了Background-repeat属性的4个值在运行时的效果。

3．区块样式

在进行页面设计时，要保证页面元素出现在适当的位置，常常需要使用表格来完成。这是因为表格包含的边框能够为整个页面建立复杂的结构，而且还能使页面看起来更加的美观、整洁。CSS中的区块属性就提供了这样一种功能，能够为页面元素定义边框，并修饰内部间距，从而优化文本内容的显示效果。在表1-5中列出了这些属性的说明。

表1-5 常用区块属性及说明

续表

4．方框样式

使用【方框】选项的设置，可以控制元素在页面上的放置方式以及属性定义。可以在应用填充和边界时，将设置应用于元素的各个边，通常用于在页面上对区块进行布局。也可以选中【全部相同】复选框，将相同的设置应用于元素的所有边，如图1-26所示。在表1-6中列出了这些属性的说明。

表1-6 常用方框属性及说明

图1-26中，Padding选项区中的【全部相同】复选框的作用是为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性；而在Margin选项区中的【全部相同】复选框的作用是为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。

5．边框样式

页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从3个方面来描述：颜色、样式和宽度，这3个方面决定了边框所显示出来的外观。CSS中定义这3方面的属性如表1-7所示。

style属性可用的样式有：dotted（点划线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽状）、ridge（脊状）、inset（凹陷）和outset（凸出）。

表1-7 边框属性

6．列表样式

列表是页面中显示信息的一种常见显示方式。它可以把相关的具有并列关系的内容整齐地垂直排列，不仅很好地归纳了内容，而且使页面也显得整洁，增强页面的条理性。CSS为控制列表提供了符号列表、图像列表和位置列表3种样式。在表1-8列出了与列表相关的属性。

表1-8 列表属性

7．定位样式

定位（Positioning）的原理其实很简单，就是使用有效、简单的方法精确地将元素定义到页面的特定位置中。这个位置可以处于页面的绝对位置，也可以处于其上级元素的位置，还可以是另一个元素或浏览器窗口的相对位置。

在CSS中实现页面定位，也就是定义页面中区块的位置。在表1-9中列出了CSS中全部的定位 属性。

表1-9 定位属性

8．扩展样式

【扩展】样式属性包括过滤器、分页和光标选项。其中，分页选项用于设置显示页面时强制分页的位置，包括：Page-break-before和Page-break-after两个。Cursor选项用于设置鼠标经过应用了该样式的对象时，鼠标指针的外观是否改变。Filter选项可以为被样式控制的对象指定滤镜效果。

1.3.3 实现新闻查看页面

通过使用选择符来新建CSS规则，然后将这些规则应用到页面中实现新闻查看页面。从而使页面的内容与结构相分离，减少维护的成本。

STEP|01 打开创建好的网页，在页面中包含了新闻网站的通用头部导航和脚部的版权说明，如图1-27所示。

图1-27 页面原始效果

STEP|02 在页面的头部和脚部之间添加显示新闻内容的布局代码，如图1-28所示。

图1-28 新闻内容布局代码

STEP|03 将光标在

标签内单击，然后使用上节介绍的方法打开【新建CSS规则】对话框，在【选择器类型】下拉列表框中选择“标签”选项，单击【确定】按钮，打开【h1的规则定义】对 话框。

STEP|04 直接单击【确定】按钮返回，再切换到文档的【代码】视图中，使用如下的代码进行替换Dreamweaver CS4在标签内生成的标签样式。完成使用标签选择符对h1的CSS规则设置。

h1 {

color:#006;

font-size:24px;

font-weight:bold;

text-align:center;

margin-bottom:0px;

}

STEP|05 重复STEP|03和STEP|04，为

和

创建标签样式，如下为最终创建后的代码：

h2 {

font-size:12px;

text-align:center;

font-weight:normal;

border-top:#ccc 1px dashed;

color:#666;

height:24px;

margin:3px 5px 8px 0;

background:#f5f5f5

}

p{

text-indent: 20px;

}

上面的

标签在页面中定义了新闻的标题；

标签定义了新闻的附加属性，像来源、浏览次数和发布时间；

标签中定义则是具体的新闻内容。

STEP|06 在布局新闻内容时，定义一个class为content的div标签，该标签用来作为新闻的父容器。使用新建标签选择符样式的方法，在【新建CSS规则】对话框中定义名称为“.content”的规则，该规则的最终CSS样式如下：

.content {

margin-left:10px;

line-height:24px;

text-align: left;

}

上述样式的作用是设置左边距、行高和文本对齐方式。带类样式的CSS规则名称必须以"."开始，这样该样式同样可适用于其他HTML元素。例如，要对p和span应用这个样式则可以使用如下代码：

STEP|07 接下来，对页面中使用ID属性定义的div标签使用ID选择符新建CSS规则。其中#sHeader定义的是页面中消息的标题，#wrap则定义了整个页面的全局设置，所需的CSS代码如下所示：

#sHeader {

height:52px;

background:url(images/titbg2.
gif) no-repeat;

color:#333;

padding-left:110px;

padding-top:10px;

margin-left: 10px;

}

#wrap {

margin: 20px auto 10px auto;

width: 800px;

background: #fff;

padding: 10px;

border: 5px solid #000;

}

STEP|08 最后是对页面中的链接设置CSS规则，即使用伪类选择符。这包括两步，首先是链接的样式a，另一个是鼠标激活时的样式a:hover，代码如下所示：

a {

text-decoration:none;

color:#666

}

a:hover {

text-decoration: underline;

color:#000000;

}

a:hover样式通常需要定义一种突出显示字体，以便在用户鼠标移到超链接上时显示。这里设置为黑色并带有下划线。

STEP|09 保存对页面所做的修改，在【实时视图】模式中进行预览查看最终应用CSS样式之后的效果，如图1-29所示。

图1-29 查看新闻页面效果

Dreamweaver CS4中新增了【实时视图】模式，在该模式下会显示不可编辑的、交互式的、基于浏览器的文档视图。

随着网络的不断普及，越来越多的网民开始将自己的想法、感受、心情等以文字、图片或多媒体的形式发布到网络中，以便于与朋友或其他浏览者分享，而博客正是承载这些内容的平台。

博客以网络作为载体，简易、迅速、便捷地发布自己的心得，及时、有效、轻松地与他人进行交流，是集丰富多彩的个性化展示于一体的综合性平台。

1.4.1 设计居中布局

网页布局是网页设计中最重要的一步，它决定了网页最后呈现的外观。在网页布局中需要注意网页中各部分内容是如何定位的，以及浮动的使用。居中的布局设计目前在网页布局中的应用非常广泛。所以，如何在CSS中设计居中的页面布局也是大多数开发人员首先要学的技能之一。

要使用CSS实现让页面居中主要有两种基本方法：一种方法是使用自动空白边；另一种方法是使用定位和负值的空白边。

1．使用自动空白边设计居中

这种方法适用于，让页面上的DIV容器在屏幕上水平居中。例如，在一个典型的布局中可能有如下的代码：

为此，只需要定义DIV的宽度，然后将水平空白边设置为自动。这样会产生如下的CSS样式代码：

#Page {

width: 600px;

background: #fff;

margin: 0 auto;

}

这种CSS样式的定义方法在目前大多数浏览器中都是有效的。但是，在IE 5.0和IE 6.0中不支持自动空白边，因为IE将“text-align:center”理解为让所有页面元素居中，而不是文本居中。利用这一点，可以设计出兼容性更好的完美居中布局。方法是，让body标记中的所有内容居中，包括DIV容器，然后作为页面容器的内容重新使用左对齐。

如下面所示为改进后的方案：

body {

text-align:center;

}

#Page {

width: 600px;

background: #fff;

margin: 0 auto;

text-align:center;

}

使用上述代码可以解决多浏览器中居中不统一的问题。其中“text-align”属性的使用是非常必要的，它不会对代码产生任何负面作用，同时可以保证容器在页面中的绝对居中显示。

2．使用定位和负值的空白边设计居中

与第一种方法类似，这种方法首先同样要定义容器的宽度。然后，将容器的position属性设置为“relative”，将left属性设置为“50%”，就会把容器的左边缘定位在页面的中间。如下面的CSS样式代码所示：

#Page {

width: 600px;

background-color:#FFF;

position:relative;

left:50%;

}

如果不希望让容器的左边缘居中，而是希望让容器的中间对应页面居中。实现的方法是对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半。这样会把容器向左移动它的宽度的一半，从而让容器在屏幕上居中。

#Page {

width: 600px;

background-color:#FFF;

position:relative;

left:50%;

margin-left:-300px;

}

本文来源：https://www.2haoxitong.net/k/doc/bdbb6aa20029bd64783e2c6c.html