第2章 Java Web开发前端静态技术

对于Web前端设计，最准确的理解就是把网页看成3个层次：①结构层，由HTML来定义页面中的内容；②表现层，由CSS来定义页面中的内容如何显示；③行为层，由JavaS-cript和DOM来增加页面的交互功能。

2.1 Java Web开发前端技术简介

1.HTML

HTML是HyperText Markup Language的简称，中文译为“超文本标签语言”或“超文本标记语言”。HTML属于一种标签语言，它不同于一般的程序设计语言，程序设计语言是设计应用软件的工具，而标签语言的功能比较单一，是用来描述网页的一种语言。

XML是eXtensible Markup Language的简称，中文译为“可扩展标记语言”。XML也是一种标记语言，类似于HTML，但XML标签没有被预定义，需要自行定义标签。XML被设计用来描述数据，其焦点是数据的内容。

XHTML是Extensible HyperText Markup Language的简称，中文译为“可扩展超文本标记语言”，目前推荐遵循的是W3C组织于2000年年底发布的XHTML 1.0版本，这是一种在HTML 4.0基础上进行优化和改进的新语言，目的是基于XML应用。

虽然XML数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML 4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单而言，建立XHTML的目的就是实现HTML向XML的过渡。

HTML 5将是下一代的Web标准。HTML 5具有全新的、更加语义化的、合理的结构化元素，新的、更具表现性的表单控件，多媒体视频和音频支持，以及更加强大的交互操作功能，一切都是全新的。

2.CSS

CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS目前的最新版本为CSS 3，能够真正做到网页表现与内容分离。相对于传统的HTML表现而言，CSS能够对网页中对象的位置排版进行像素级的精确控制。CSS扩充了HTML标签的属性设定，使得页面效果更加丰富，表现效果更加灵活，更具有动态性。

本章只详细介绍HTML和CSS部分。

2.2 HTML 5标签技术

HTML文档其实就是一个文本文件。这个文件内包含了要发布的信息和指示浏览器如何显示这些信息的标签指令。

2.2.1 HTML 5声明文件

一个标准的HTML 5文件的代码如下所示。

上述代码中，DOCTYPE是document type（文档类型）的简写，用来说明当前页面是使用哪个HTML版本进行编写的。在HTML 5文档中，不但DOCTYPE的声明变得简单，而且字符集的声明也被简化。UTF-8是一套几乎包含所有语言全部字符的通用字符集，是目前国际上通行的编码方式，也是目前最主要的编码方式。

需要注意的是，＜！DOCTYPE＞声明必须是HTML文档的第一行，位于＜html＞标签之前，并且声明不区分大小写，也没有结束标签。

通过上面示例可以看出，一个HTML文档由4个基本部分组成。

1）文档类型声明。

2）＜html＞＜／html＞标签对，用来标识HTML文档的开始和结束。

3）＜head＞＜／head＞区域，用来描述HTML文档的相关信息，如编码方式、网页标题等。

4）＜body＞＜／body＞区域，用来定义在HTML文档中需要显示的实际内容，如文字、图片、表格和表单等。

HTML使用标签来描述网页。标签就是由尖括号包围的关键词，如＜html＞。标签的使用有两种形式：成对出现的标签和单独出现的标签。

1.成对出现的标签

这种类型的标签包含开始标签和结束标签，基本格式如下。

举例如下。

2.单独出现的标签

这种类型的标签有换行标签＜br／＞、图片标签＜img／＞和水平线标签＜hr／＞等。例如，要在页面中插入一幅图片，可以使用如下代码。

提示：虽然HTML 5并没有要求标签必须闭合，但还是建议使用XHTML严格的语法规则来标记HTML 5。大家都遵照一种标准化的语法，将更有利于协同工作。XHTML中还规定，标签及属性全部采用小写字母；属性值必须用双引号括起来等。

无论使用哪种标签，都切忌不要出现交叉闭合的情况，比如：

应修改为：

也就是说，嵌套必须是严格对称的。

另外，为代码适当地添加一些注释，将有利于增加文档的可读性，比如：

2.2.2 HTML 5文本和段落

在创建HTML 5文档时，用户可以通过多种开发工具来实现，最简单的就是使用记事本。

【例2-1】使用记事本设计一个简单的个人简历页面，预览效果如图2-1所示。

图2-1 个人简历

具体的操作步骤如下。

1）编辑代码。打开记事本，编写如下代码。

2）保存文件。选择“文件”→“保存”命令，在弹出的对话框的“保存类型”下拉列表框中选择“所有文件”选项，在“文件名”文本框中输入文件名Example2_ 1.html，在“编码”下拉列表框中选择“UTF-8”选项，选择相应的路径后，单击“保存”按钮。

3）浏览页面。在磁盘上找到保存的路径，双击Example21.html文件，就可以在浏览器中看到如图2-1所示的效果。

下面将介绍本例中涉及的标签的作用及使用方法。

提示：本例源代码中使用了标签的属性来实现相应的效果，但在实际应用中，相应的效果都是通过CSS来实现的。

1.标题＜hn＞

标题标签＜hn＞可以建立文件内容的主标题、次标题和小标题的文字效果。n的范围是1～6，值越小，字体越大。＜hn＞标签的align属性可以设置标题的水平对齐方式分别为左对齐、居中或右对齐。其语法格式如下。

2.水平线＜hr/＞

使用＜hr/＞标签将在页面中创建一条水平线。＜hr/＞的属性如表2-1所示。

表2-1 ＜hr/＞的属性

3.加粗、倾斜和下划线

对于重要的文字内容，可以用粗体来表现。在设计上可以使用＜b＞＜／b＞标签，也可以使用＜strong＞＜／strong＞标签，这两个标签都可以表现文字粗体的效果。在HTML 5中，推荐使用＜strong＞＜／strong＞。

对需要表示强调的文字内容，可以选择斜体效果。＜i＞＜／i＞标签或＜em＞＜／em＞标签都可以表现文字斜体的效果。在HTML 5中，推荐使用＜em＞＜／em＞。

要实现下划线效果，可以使用＜u＞＜／u＞标签，但要尽量避免为文本添加下划线，用户可能会把它混淆为一个超链接。

常用的字型标记还有：＜sup＞＜／sup＞（表示定义上标文本）、＜sub＞＜／sub＞（表示定义下标文本）、＜small＞＜／small＞（表示呈现小号字体效果）和＜big＞＜／big＞（表示呈现大号字体效果）等。

4.段落＜p＞与换行＜br／＞

段落由标记＜p＞＜／p＞定义。段落标记可以使用align属性来实现段落的水平对齐方式分别为左、中、右的对齐，用法同＜hn＞标记。

要想在HTML文件中实现换行效果，应使用换行标记＜br／＞，它的作用类似于平时处理文档时使用的〈Enter〉键。

5.预定格式＜pre＞

如果有一段已经编排好的段落内容，并且希望直接按照原编排格式显示在HTML文件中，就可以使用预定格式标记＜pre＞＜／pre＞，它可以保留文字在源代码中的格式。

6.特殊字符

HTML中特殊符号的表示法如表2-2所示。

表2-2 特殊符号表示法

2.2.3 HTML 5链接

网页中的超链接分为文本超链接和图像超链接，只要用户单击带有链接的文字或图像，就可以自动链接到对应的文件，从而使网页链接成为一个整体。因此，超链接是整个因特网的基础。链接目标可以是一个网页或一个图像，也可以是同一网页上的不同位置，还可以是一个电子邮件地址、一个文件，甚至是一个应用程序。

使用标签＜a＞＜／a＞来定义超链接，其语法格式如下。

其中，URL是超链接指向的目标网页地址。超链接常用属性如表2-3所示。

表2-3 超链接常用属性

表2-4 列出了target属性的属性值说明。

表2-4 target属性值说明

1.创建页面链接

使用超链接，既可以链接到外部的地址，如http：//www.baidu.com，也可以链接到站点内的其他文件，在href属性值中输入站点内文件的相对路径即可。代码如下。

在浏览器中查看文档，效果如图2-2所示。

当鼠标移到带有下划线的文字上时，鼠标指针变为手形，单击超链接文字，将会在新窗口中分别显示链接页面。

图2-2 外部链接

2.其他链接

（1）电子邮件链接

电子邮件链接是指当浏览者单击该链接后，会启动用户系统客户端的电子邮件软件（如Outlook Express），并打开一个新的电子邮件窗口。代码如下。

（2）空链接

所谓空链接，就是没有链接对象的链接。空链接具有链接的表现形式，但是不能跳转到其他页面，有时使用空链接是为了响应JavaScript代码。代码如下。

当单击Click me！链接时，页面上将弹出一个警示窗口，单击“确定”按钮，即可关闭警示窗口。

3.锚点链接

锚点链接可以将网页中的文本或图像链接到同一个网页的不同位置，也可以链接到不同网页中的指定位置，使浏览者可以快速浏览到指定的位置。

锚点链接通常用于含有大量文本的网页。创建锚点链接的过程主要分为两部分：首先创建命名锚点；然后创建到该命名锚点的链接，也就是锚点链接。相应的代码如下。

2.2.4 HTML 5图像

网页中常用的图片文件格式有GIF、JPEG和PNG。要想在网页中显示这些图片，必须将它们链接到网页。可以使用图像标签＜img／＞来实现，通过＜img／＞属性还可以设置图片的大小、边框和图文混排等。

图片标记＜img／＞需要配合其他属性来完成显示图片的功能，常见的属性如表2-5所示。

表2-5 ＜img／＞的属性

【例2-2】下面是古诗鉴赏页面代码，将页面保存为Example22.html。

images／meng.jpg表示在images目录中有一个meng.jpg图片，页面预览效果如图2-3所示。

图2-3 古诗鉴赏页面

图片也可以创建超链接，当用户单击图片时，就会跳转到链接所指向的页面，代码如下。

当单击孟浩然图片时，将在新窗口中打开Example22.html页面。

2.2.5 HTML 5表格和列表

1.表格

在HTML网页中，表格一般由4个基本标签构成。

1）标签＜table＞用来定义表格，整个表格包含在＜table＞和＜／table＞标签中。

2）标签对＜tr＞＜／tr＞用来定义表格中的一行，它是单元格的容器，每行可以包含多个单元格。

3）标签对＜th＞＜／th＞和＜td＞＜／td＞用来定义单元格，所有单元格都放在行标签内，标签＜th＞用来定义表头，标签＜td＞用来定义普通的单元格。

表格的基本语法结构如下。

表格的常用属性如表2-6所示。

表2-6 表格的常用属性

【例2-3】创建Example23.html文件，并编写如下代码。

页面预览效果如图2-4所示。

图2-4 文具订单表

2.列表

在HTML中，常用的有以下两种列表类型。

（1）无序列表＜ul＞

无序列表用于将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。无序列表使用标签＜ul＞＜／ul＞来定义，每一个列表项使用标签对＜li＞＜／li＞来定义。语法结构如下。

其中，value的值如表2-7所示。

表2-7 无序列表中value的值

【例2-4】创建Example24.html文件，并编写如下代码。

页面预览效果如图2-5所示。

图2-5 无序列表

（2）有序列表＜ol＞

有序列表使用数字或英文字母来记录项目的顺序。默认情况下，有序列表从数字1开始计数，可以通过start属性来修改起始值。通过type属性可以将有序列表的类型设置为英文或罗马数字。语法结构如下。

其中，value的值如表2-8所示。

表2-8 有序列表中value的值

2.2.6 HTML 5表单

表单是网页设计中不可或缺的元素之一，如登录窗口、注册页面和搜索框等，利用表单可以收集客户端提交的相关信息。

1.表单

表单是网页上的一个特定区域，该区域由标签对＜form＞＜／form＞来定义。表单属于容器标记，其他表单标签需要位于它的包围中才有效。其语法结构如下。

其中，标签＜form＞的属性如表2-9所示。

表2-9 ＜form＞标签的属性

method提交表单的方法有两种：get和post。get提交方式将把数据发送到网页的URL地址中，属于非隐藏式提交，而且允许传送的信息量一般要小于1 KB，但是传输效率高；而post提交方式是将资料本身当作主体来传递，属于隐藏式提交，此方式用于传送信息量较大的表单，但缺点是传输速度较慢。一般注册信息时使用post，查询时使用get。

2.文本框和密码框

文本框中可以输入任何类型的文本、数字或字母，输入的内容以单行显示。其语法结构如下。

其属性如表2-10所示。

表2-10 文本框属性

密码框的语法结构如下。

其属性说明和文本框相同，输入到密码框中的文字均以星号（∗）或圆点（●）显示。

3.单选按钮与复选框

单选按钮能够进行项目的单项选择，每一组单选按钮的名称都是相同的，但各有其独立的值，其语法结构如下。

其中checked属性表示此项被默认选中，value表示选中项目后传送到服务器端的值。

复选框允许在一组选项中选择多个选项，用户可以选择任意多个适用的选项。其语法结构如下。

其属性与单选按钮相同。每一个复选框都有其独立的名称和值。

4.菜单/列表

菜单是一种最节省空间的方式，在正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以拖拽滚动条来查看各选项。其语法结构如下。

其属性如表2-11所示。

表2-11 菜单/列表属性

5.文件框

文件框主要用来浏览客户端的文件列表，然后将选择的文件上传到Web服务器，其语法结构如下。

6.隐藏域

隐藏域在页面中对用户是不可见的，用来传送数据给Web服务器。浏览者提交表单时，隐藏域的信息也被一起发送到服务器。其语法结构如下。

其中value值用于设定传送的值。举例如下。

7.按钮

表单中的按钮可以分为4种：普通按钮、提交按钮、重置按钮和图片按钮。普通按钮主要是配合JavaScript等客户端的脚本来进行表单的处理；单击提交按钮后，可以实现表单内容的提交；单击重置按钮后，可以清除表单的内容，恢复成默认值；图片按钮是用图片作为按钮，具有提交按钮的功能。其语法结构如下。

其中value值代表显示在按钮上面的文字。

图片按钮的语法结构如下。

其中src属性代表图片的路径。

8.多行文本域

利用多行文本域，可以在其中输入更多的文本，语法结构如下。

其属性如表2-12所示。

表2-12 多行文本域属性

【例2-5】创建Example25.html文件，并编写相应代码如下。

页面预览效果如图2-6所示。

图2-6 用户注册页面

2.3 CSS技术

CSS的引入就是为了使得HTML能够更好地适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等。CSS文件是一种文本文件，可以使用任何一种文本编辑器对其进行编辑，如记事本等。CSS不需要编译，是可以直接由浏览器执行的一种标记性语言，或者说是一种浏览器解释性语言。

2.3.1 CSS样式

CSS样式表是由许多CSS规则组成的文件。规则定义一种或多种样式效果。规则确定如何设计样式，以及如何应用这些样式。因此，样式表由规则列表组成，浏览器用它来确定页面的显示效果。

1.CSS基本语法

CSS规则由选择器和声明两部分组成，每条声明由一个属性和一个属性值组成，因此，样式表的基本语法结构如下。

选择器是指要使用该样式的对象，可以是HTML标签，也可以是页面中指定的class或者id属性限定的标签，甚至可以将选择器组合使用。

声明放在花括号｛｝内，属性和属性值之间用冒号（：）分隔，结尾的分号是可选项，但推荐使用分号结尾。所有的属性和属性值都由官方CSS规范定义。

例如，要将HTML文件中所有段落内的文字设置为宋体，同时设置字体大小为12像素，则可以定义样式为如下格式。

在这个例子中，p是选择器，font-family和font-size是属性，宋体和12 px是属性值。/∗……∗/为CSS的注释说明。

2.CSS引入方式

在网页中应用CSS样式有3种方式：内联样式、嵌入式样式表和外部样式表。在样式应用过程中，越接近目标的样式定义的优先权越高，高优先权样式将继承低优先权样式的未重叠定义并覆盖重叠的定义。

●内联样式：直接写在标签元素的style属性中。

●嵌入式样式表：将样式写在HTML文件中＜head＞区域里的＜style＞＜/style＞标签内。

●外部样式表：文件以.css为扩展名，在＜head＞中使用＜link/＞标签或＠import关键字将外部样式表文件链接或导入到HTML文件内。

（1）内联样式

每一个HTML标签元素都包含一个style属性，使用该属性可以直接指定CSS样式，该样式只能应用于该标签元素所定义的内容，但是优先权却是最高的。

在下面的代码中，对同样的p标签应用不同的样式，代码如下。

页面预览效果如图2-7所示。内联样式没有很好地实现表现与内容的分离，没有体现出CSS的优势，所以不推荐使用。

图2-7 内联样式

（2）嵌入式样式表

嵌入式样式表也称为内部样式表。嵌入式样式表是将对页面中各种元素的样式设置集中写在＜head＞中的＜style＞＜／style＞标签里。这种样式表只针对当前页面有效，不能跨页面执行，因此达不到CSS代码重用的目的。代码如下。

页面预览效果如图2-8所示。

（3）外部样式表

外部样式表是将CSS样式表代码单独写在一个独立文件中，由网页进行调用，多个网页可以调用同一个外部样式表文件，因此能够实现代码的最大化重用及网站文件的最优化配置，还能保证网站风格的一致性。

图2-8 嵌入式样式表

●使用＜link＞标签。

将上述代码中的样式表内容单独放在一个样式表文件中，命名为web.css，并存放于style文件夹下。修改后的代码如下。

HTML文件部分代码如下。

页面预览效果同图2-8。＜link＞标签的href属性用于指定样式表文件所在的URL，rel＝＂stylesheet＂表示链接的是外部样式表，type＝＂text／css＂表示被链接文档的MIME类型是样式表。

●使用@import指令。

导入外部样式表也可以在＜head＞中的＜style＞＜／style＞标签里使用@import指令，如下面的代码所示。

3.颜色表示法

CSS中除了可以使用颜色名称来表示颜色，如red、blue、green和white等，还可以使用以下几种常用的CSS颜色表示法。

●以十六进制表示的RGB颜色。

所有浏览器都支持十六进制颜色值。十六进制颜色的规定为：＃RRGGBB，其中的RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于0～FF之间。例如，＃ff0000值显示为红色。

注意：十六进制表示的RGB值是不区分大小写的，＃fff、＃FFf和＃FFF效果是一样的。

十六进制表示法可以进行缩写，将6位RGB值简写为3位，方法是将两个连续重复的数值简写为一个即可，前提是RR／GG／BB这3种颜色是由3组两个相同的值组成的颜色值。如上述的红色＃ff0000可以简写为＃f00，而颜色值＃fe6600则不可以进行缩写。

●RGB值颜色表示法。

所有浏览器都支持RGB值颜色表示法。RGB值颜色表示法的规定为：rgb（red，green，blue）。参数（red、green、blue）定义颜色的强度，可以是介于0～255之间的整数，或者是百分比值（0％～100％）。例如，rgb（255，0，0）值显示为红色。下面的表示方法，其效果是一样的。

●RGBA值颜色表示法。

支持RGBA值颜色表示法的浏览器有IE 9＋、Firefox 3＋、Chrome、Safari及Opera 10＋。RGBA值颜色表示法是RGB值颜色表示法的扩展，带有一个Alpha通道，它规定了对象的不透明度。RGBA值颜色表示法的规定为：rgba（red，green，blue，alpha）。alpha参数是介于0.0（完全透明）～1.0（完全不透明）的数字。例如，若要将背景颜色设置为具有50％透明度的红色，可以使用以下代码。

4.CSS常用属性

CSS常用字体和段落的属性及属性值如表2-13所示。

表2-13 CSS字体及段落属性

（续）

【例2-6】创建Example26.html文件，并编写代码如下。

页面预览效果如图2-9所示。

图2-9 3D打印页面

CSS常用图片属性及属性值如表2-14所示。

表2-14 CSS图片属性

CSS常用列表属性及属性值如表2-15所示。

表2-15 CSS列表属性

【例2-7】将Example24.html文件另存为Example27.html，并为项目列表设置背景图片，修改后的代码如下。

页面预览效果如图2-10所示。

2.3.2 CSS框模型

框模型是学习CSS样式布局的基础，只有熟练地掌握框模型的用法，才可以控制页面中元素周围的空间，使网页看起来更有序、更专业。

页面中所有的元素（如段落、图片和标题等）都可以看成是以一个盒子的表现形式存在的，每个盒子是由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成的，这就是框模型，如图2-11所示。

图2-10 项目列表页面

图2-11 框模型

一个元素的框模型有多大，那么该元素在页面中所占用的空间就会有多大。

框模型中的外边距（margin）属性如表2-16所示，padding属性的用法同margin属性。

表2-16 CSS外边距属性

边框（border）属性如表2-17所示。

表2-17 CSS边框属性（以border-bottom为例）

（续）

【例2-8】创建Example28.html文件，并编写代码如下。

页面预览效果如图2-12所示。其中每个图片的框模型结构如图2-13所示。从图2-13中可以清晰地看出每个图片本身所占的空间大小、内边距、边框及外边距的大小，由此可以精确地控制每个元素的位置。

图2-12 阿狸页面图

图2-13 图片的框模型

2.3.3 CSS定位

HTML中的所有对象几乎都默认为以下两种类型。

1）块状对象（block）：指的是当前对象显示为一个方块，在默认的显示状态下将占据整行，其他对象在下一行显示，如p、h1和div。

2）行间对象（inline）：正好和block相反，它允许下一个对象与其本身在同一行中显示，如a、strong和span。

提示：使用display属性可以修改对象的类型，将display属性值设置为block，可以将行间对象显示为块状对象。

相对于其他HTML标签，div和span标签只是一种语法结构，没有任何语义上的呈现，也没有任何样式信息可用。但它们可以包含其他标签，通过定义样式信息来改变它的呈现效果。在使用DIV＋CSS布局页面过程中，首先将页面在整体上进行＜div＞标签的块状排版，将页面分成几个区块，然后对各个块进行CSS定位，最后在各个块中添加相应的内容，并设定相应的CSS样式，从而实现网页内容与样式的分离。

在设计网页时，能否控制好各个模块在页面中的位置是非常重要的。CSS规范定义了3种定位方式。

1.相对定位

如果对一个元素进行相对定位，可设置position属性的属性值为relative，然后根据left、right、top和bottom等属性，让这个元素相对于它在文档流中的位置的起始点进行移动。

注意，在使用相对定位时，即使元素被偏移了，但元素仍占据着它未偏移前的空间。

如果将top设置为30像素，那么框将在原位置顶部下面30像素的地方。如果将left设置为50像素，那么会在元素左边创建50像素的空间，也就是将元素向右移动。假如，页面上有两个块，初始状态如图2-14a所示，对第一个块设置相对定位，代码如下。

此时页面效果如图2-14b所示。第一个块仍然占据原来的空间，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方，它会重叠在其他文档流元素之上，而不是把它们挤开，此时它已经覆盖在了第二个块之上。

图2-14 相对定位

2.绝对定位

如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，这个元素就浮在网页的上面了。绝对定位是相对于最近的已定位的父元素的，如果不存在已定位的父元素，那就相对于最初的包含块。已定位的父元素是指那些设置了除static之外的定位，如position：relative／absolute／fixed的父元素，位置通过left、top、right和bottom属性来设定。编写如下代码。

上述页面初始预览效果如图2-15a所示。现在对第二个块设置绝对定位，修改body中block2所在＜div＞标签的代码如下。

此时页面效果如图2-15b所示，此时block2的绝对定位是相对于最初的包含块body。

若将＃father样式中的注释语句／∗position：absolute；∗／两边的注释符号去掉，成为一条可以使用的声明，则预览效果如图2-15c所示，此时block2的绝对定位是相对于父元素——id值为father的＜div＞标签。

图2-15 绝对定位

3.浮动定位

浮动定位是CSS排版中非常重要的方法。浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。float属性用于设置浮动定位，其属性值可以是none、left和right，代码如下。

由于浮动框是“浮”在页面之上的，所以其并不在文档的普通流中。

假设，页面上有4个＜div＞标签，代码如下。

不设置浮动效果的CSS样式代码如下。

此时页面效果如图2-16a所示。设置left为右浮动，修改代码如下。

此时页面效果如图2-16b所示，left将脱离文档流并向右移动，直到其右边框碰到包含框box的右边框为止。

若将left、main和right都设置为左浮动，此时页面效果如图2-16c所示。

图2-16 浮动定位

要清除浮动，可使用clear属性，其属性值分别为left、right和both。

【例2-9】创建Example29.html文件，并编写代码如下。

页面预览效果如图2-17所示。

图2-17 浮动定位

2.3.4 CSS选择器

所有HTML语言中的标签样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。

1.标签选择器

一个HTML页面由很多不同的标签组成，标签选择器用来声明哪些标签采用哪种CSS样式。因此，每一种HTML标签的名称都可以作为相应的标签选择器的名称，如p、h1等。如下面的代码所示。

则页面中所有的＜p＞段落都显示为红色字体。

2.类选择器

如果声明了＜p＞标签为红色，那么页面中所有的＜p＞标签都将显示为红色。若希望其中的某一个＜p＞标签显示为蓝色，就需要使用类选择器。定义类选择器时，类名前面有“.”符号，类名可任意命名，但最好根据元素的用途来定义名称。如下面的代码所示。

若某个标签（如＜p＞）要采用该样式，则相应的代码如下。

3.ID选择器

在HTML网页中，每个标签都可以使用id属性来唯一标识当前标签，每个网页中的每个id值只能使用一次。ID选择器与class类选择器的不同之处在于：ID选择器只能在HTML页面中使用一次，只能用在唯一的元素上，而类选择器可以用在不止一个元素上。ID选择器使用“＃”符号进行标识，相应的代码如下。

若要将其应用到＜div＞上，则相应的代码如下。

4.通配符选择器

如果页面中有多个选择器都具有相同的样式，这时可以对选择器进行集体声明。相应的代码如下。

多个选择器之间使用逗号分隔，h1、h2、h3、p、＃header和.one都具有相同的样式定义。

通配符选择器使用星号（∗）来表示，它的定义对HTML页面中的每一个元素都会起作用，实际上定义的是一个全局样式。如下面的代码所示。

这个样式定义可以清除页面中所有的标签默认所具有的外边距、边框与内边距的样式。

5.派生选择器

派生选择器又称为包含选择器或后代选择器，该选择器作用于某个元素中的任意后代元素。其格式如下。

该样式将应用于元素B，并且元素B是元素A的任意后代，而不仅仅是元素A的直接子元素。

上述代码中，只有＜p＞标签下的＜span＞标签应用了text-decoration：underline的样式设置，对于单独的＜p＞、＜span＞及其他非＜p＞标签下的＜span＞均不会应用此样式。派生选择器除了可以两者包含外，也可以多级包含。

6.伪类

伪类可以用来指定一个或多个与其相关的选择器的状态。CSS对于超链接的样式控制就是通过伪类来实现的。CSS中提供了4个伪类，分别对应超链接的不同状态。这4个伪类如下。

●a：link：未被访问的链接。

●a：visited：已经访问过的链接。

●a：hover：鼠标悬停时的链接。

●a：active：被激活时的链接。

这4个伪类定义的先后顺序很重要，通常按照下面顺序来定义。

a：link→a：visited→a：hover→a：active

在实际应用中，通常采取a＋a：hover这种组合。

2.3.5 CSS高级特性

1.页面居中设计

使用DIV＋CSS布局页面，首先要掌握的重点内容就是如何让整个页面居中显示。下面介绍一种使用自动外边距来实现居中的方法。

如下面的应用，首先将页面中所有的内容放在一个“容器”里（即id为container的div），然后设置这个容器居中显示，则页面中所有的内容都将居中显示了。

要实现div的居中，首先要定义div的宽度，将水平方向上的外边距（margin）设置为auto即可，代码如下。

在大多数主流浏览器中，这种方法都非常有效，除了IE浏览器。在IE浏览器中实现元素居中的方法是使用text-align属性，代码如下。

随之而来的问题是body的所有子孙元素都会被居中显示。综上所述，为了兼容大多数的浏览器，可采用以下代码。

2.使用列表制作菜单

导航菜单是网页设计过程中不可缺少的部分，下面介绍使用列表标签制作网页导航菜单的方法。

【例2-10】创建Example210.html文件，并设计导航菜单，具体的操作步骤如下。

1）设计HTML页面的主体结构。用项目列表＜ul＞设计各个菜单项，并为列表项添加空链接。

2）设计CSS样式。在容器tabs中完成字体、背景和边框的设置；在项目列表＜ul＞中，通过list-style-type属性设置项目符号为不显示，之后设置＜li＞为左浮动，使项目列表项可以横向排列；最后添加超链接的样式定义。其完整代码如下。

页面预览效果如图2-18所示（图中所示是鼠标悬停在Link 2上的效果）。

图2-18 导航菜单

2.4 HTML 5/CSS设计页面案例

本节将完成一个新闻页面的设计。整个新闻页面放在一个容器container里，在container里按照上、中、下的结构进行排版，分别定义为header、main和footer。在“热点推荐”部分使用了＜tt＞标签，＜tt＞标签将呈现出类似打字机或者等宽的文本效果。

【例2-11】创建Example211.html文件，并编写代码如下。

news.css代码如下。

页面预览效果如图2-19所示。

图2-19 新闻页面

2.5 案例：DIV＋CSS精美窗口设计

在使用CSS排版的页面中，利用DIV标签，加上CSS对其样式的控制，可以很方便地实现各种效果，而且还实现了网站结构、表现和行为三者分离的目的。案例的最终效果如图2-20所示。

图2-20 美食网页面

本节案例将在MyEclipse环境下实现美食网首页的设计。具体的操作步骤如下。

1.创建Java Web项目

1）在MyEclipse菜单中选择File→New→Web Project命令，弹出New Web Project对话框，在Project Name文本框中输入Example212，并在J2EE Specification Level下拉列表框中选择Java EE 5.0选项，单击Finish按钮，完成Example212项目的创建。

2）在MyEclipse左侧的Package Explorer视图中会显示出刚刚创建的Example2_12项目。在Example2_12项目中右击WebRoot选项，在弹出的快捷菜单中选择New→Folder命令，分别创建css文件夹和images文件夹。右击css文件夹，在弹出的快捷菜单中选择New→Other命令，在弹出的New对话框中依次展开MyEclipse→Web结点，选中结点下的CSS选项，然后单击Next按钮，创建style.css文件。

3）右击WebRoot选项，在弹出的快捷菜单中选择New→Other命令，在弹出的New对话框中依次展开MyEclipse→Web结点，选中结点下的JSP（Basic templates）选项，然后单击Next按钮，创建Example212.jsp文件。

2.设计页面

（1）页面主体结构

首先定义页面主体结构。将整个页面放在容器box里，并将整个页面分成header、con-tent和footer共3部分。

设计页面的初始化样式，代码如下。

（2）header部分

header部分主要完成logo和搜索框的设计，页面结构如下。

对应的样式代码如下。

（3）content部分

content部分主要完成页面主要内容的设计，包括侧边栏sidebar、导航栏nav和主要产品展示的main共3部分，页面结构如下。

其中，sidebar部分的代码如下。

nav部分的代码如下。

（4）main部分

main部分的页面结构如下。

对应的样式代码如下。

(5)footer部分

footer部分主要完成页面版权信息的设计，页面结构如下。

对应的样式代码如下。

至此，整个页面就设计完成了。

3．测试Web应用程序

1)单击工具栏中的部署按钮

，弹出Project Deployments对话框，在Project下拉列表框中选择要发布的项目Example2_12。

2)然后单击右侧的Add按钮，弹出New Deployment对话框，在Server下拉列表框中选择Tomcat 6．x选项，单击Finish按钮，返回Project Deployments对话框，单击OK按钮，即可完成项目的发布。

3)确认Tomcat服务器已经成功启动了，打开浏览器，在地址栏中输入http：//local-host：808 0/Example2_12/Example2_12．isp，即可进行访问。

本章小结

本章通过大量的案例介绍了Web开发前端使用的相关技术，包括HTML和CSS。HTML用于完成页面的结构设计，CSS用于完成页面的样式设计。通过DIV+ CSS这种布局方式，可以真正地实现页面内容和样式设计的彻底分离。

实践与练习

一、选择题

1．在HTML中，插入图片的HTML代码是( )。

A.<img href=”image.gif> B.<img src=”image.gif">

C.<image src=”image.gif"> D.<img﹥image.gif</img> 2．选项( )为正确的CSS语法。

A.body｛color：black；｝

B.｛body；color：black｝

C.｛body-color：black｝

D.｛body：color＝black｝

3.在CSS中，设置某个元素的文字颜色的选项是（ ）。

A.color： B.fgcolor： C.text-color＝ D.text-color：

4.在CSS中，设置超链接没有下划线的选项是（ ）。

A.a｛decoration：no underline｝ B.a｛text-decoration：none｝

C.a｛underline：none｝ D.a｛text-decoration：no underline｝

5.如果希望单击超链接后在新窗口中打开HTML页面，则需将target属性设置为（ ）。

A.self B.top C.parent D.blank

二、填空题

1.在CSS中，________属性是用来设置底边框的。

2.使用link元素引用外部CSS文件，________属性用来指定CSS文件的路径。

3.在CSS中，设置外边距用________属性，设置内边距用________属性。

4.在HTML中，创建超链接用________标记，设置字体加粗用________标记。

5.HTML中用来实现换行的标记是________。

6.CSS的中文名是________。

7.在HTML中，定义无序列表标签是________。

实验指导

题目1 设计表格

1.任务描述

掌握表格标签的使用，灵活应用行、列合并属性。

2.任务要求

1）使用记事本完成任务。

2）使用HTML标签完成表格。

3.操作步骤提示

1）新建一个文本文档，修改扩展名为.html。

2）在记事本中完成相应的代码。运行结果参见图2-21。

图2-21 运行结果

题目2 使用项目列表制作垂直菜单

1.任务描述

使用项目列表制作垂直导航菜单。

2.任务要求

1）使用项目列表设计菜单项。

2）结合CSS完成菜单样式的设定。

3.操作步骤提示

1）创建网页文件。

2）使用项目列表完成菜单项设计，参考代码如下。

3）完成样式设定，参考代码如下。

4）在浏览器中预览页面。运行结果如图2-22所示。

图2-22 运行结果

题目3 使用项目列表设计新闻模块

1.任务描述

使用项目列表设计新闻标题列表。

2.任务要求

1）使用项目列表设计标题列表。

2）结合CSS完成样式的设定。

3.操作步骤提示

1）创建网页文件。

2）整个模块分为上、下两部分，上部分采用＜div＞标签，并设定id属性为title，参考代码如下。

3）使用项目列表完成新闻标题列表设计，参考代码如下。

4）完成样式设定，参考代码如下。

5）在浏览器中预览页面。运行结果如图2-23所示。

图2-23 运行结果