博客也被称为网络日记，是一种深受欢迎的网络交流方式。在博客中，博主（博客账号的拥有者）可以记录技术感悟、旅游随笔、心情写照等。随着互联网用户的激增，博客已经成为一种全新的生活、工作、学习的方式。最近，热爱旅游的小思想要制作一个关于旅游的个人博客页面，用于分享一些旅游心情随笔。由于之前没有接触过网页制作，小思决定先从HTML语法、基本格式、基础标签学起，等夯实基础后、再着手“博客”页面的制作。“博客”页面效果如下两图所示。

任务2-1 认识HTML

需求分析

HTML作为一门标签语言，主要用于描述网页中的文字、图像等信息。网页中所有的结构搭建都是通过HTML标签来完成的。因此，若想制作网页，先要认识HTML。下面将对HTML文档基本格式、HTML标签等知识进行讲解，使读者进一步认识HTML。

知识储备

1.HTML文档基本格式

学习任何一门语言，先要掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML标签语言也不例外，同样需要遵循一定的规范。HTML文档基本格式主要包含<!DOCTYPE>文档类型声明、<html>根标签、<head>头部标签和<body>主体标签等，如下图所示。在上图所示的HTML文档基本格式中，<!DOCTYPE>、<html>、<head>和<body>标签共同组成了HTML文档的主体结构，具体介绍如下。

（1）<!DOCTYPE>标签

<!DOCTYPE>标签位于文档的最前面，也被称为“文档类型声明”，用于向浏览器说明当前文档使用哪种HTML标准规范。一份文档只有在开头处使用<!DOCTYPE>标签声明，浏览器才能将该文档识别为有效的HTML文档，并按指定的HTML文档类型进行解析。

（2）<html>标签

<html>标签位于<!DOCTYPE>标签之后，也被称为“根标签”。根标签是HTML文档的开始标记和结束标记，其中，<html>标签标记HTML文档的开始，</html>标签则标记HTML文档的结束，在它们之间是网页的头部内容和主体内容。

（3）<head>标签

<head>标签用于定义HTML文档的头部信息，也被称为“头部标签”，该标签紧跟在<html>标签之后。头部标签主要用来容纳其他位于文档头部的标签，用于描述文档的标题、作者，以及该文档与其他文档的关系。例如，<title>、<meta>、<link>和<style>标签等，都属于头部标签容纳的子标签。

（4）<body>标签

<body>标签用于定义HTML文档所要显示的内容，也被称为“主体标签”。在网页中，所有文本、图像、音频和视频等内容代码只有放在<body>标签内，才能最终呈现给用户。

概要

初学者想要记住上面这么多标签可能有一定的困难，但不用担心，Dreamweaver会自动生成HTML文档基本格式，因此这些标签并不需要大家牢记。在最新的HTML5版本中，HTML文档基本格式有了一些变化。HTML5对文档类型声明和根标签做了简化。简化后的HTML5文档基本格式如下图所示。通过上图可以看出，简化后的HTML5文档基本格式不仅在结构上更加简单、清晰，而且语义指向也更加明确。本罐头的所有案例都采用HTML5文档基本格式。

2.HTML标签

在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>标签。所谓标签就是放在“<>”符号中表示某个功能的编码命令，也称为HTML标记或HTML元素，本书统一称作“HTML标签”。根据标签的组成特点，HTML标签可分为两大类，分别是双标签、单标签，具体介绍如下。

（1）双标签

双标签也被称为“体标签”，指由开始和结束两个标签符号组成的标签。双标签的基本语法格式如下： <标签名>内容</标签名> 例如，HTML5文档基本格式中的<html>和</html>、<body>和</body>等都属于双标签。

（2）单标签

单标签也被称为“空标签"，指用一个标签符号即可完整地描述某个功能的标签。单标签的基本语法格式如下： <标签名 /> 在上述语法格式中，标签名和“/”之间有一个空格、该空格在HTML语法中可以省略。

为什么要有单标签？

HTML标签的作用原理就是选择网页内容进行描述，即需要描述哪些内容就选择哪些内容，通过双标签可以标示出内容的开始位置和结束位置。但单标签本身就可以描述一个功能，不需要标示内容的开始位置和结束位置。例如、水平线标签<hr />按照双标签的语法规则，它应该写成“<hr></hr>”，但是水平线标签不需要选择网页内容，本身就代表一条水平线，此时如果写成双标签，代码就显得有些冗余。这时就需要用单标签来简化代码结构。

注释标签

在HTML中还有一种特殊的标签-—注释标签，该标签就是一种特殊的单标签。如果需要在HTML文档中添加一些便于阅读和理解、但又不希望其显示在页面中的注释文字、就需要使用注释标签。注释标签的基本语法格式如下：  注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释内容可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释内容。

3.HTML标签的属性

使用HTML标签搭建网页时，通过为HTML标签设置属性的方式可以增加更多的显示样式。例如，将标题文本的字体设置为“微软雅黑”并且居中显示，让段落文本中的某些名词显示其他颜色加以突出，这些都可以通过HTML标签的属性来设置。为HTML标签添加属性的基本语法格式如下： <标签名属性1="属性值1" 属性2="属性值2" …>内容</标签名> 在上述语法格式中，标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。各属性之间排序不分先后，标签名与属性、属性与属性之间均以空格分开。下面的示例代码设置了一段居中显示的文本内容。 <p align="center">我是居中显示的文本</p> 在上述示例代码中，<p>标签用于定义段落文本；“align”为属性名；“center”为属性值，表示文本居中对齐。<p>标签还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。需要说明的是，大多数属性有默认值、例如，省略<p>标签的align属性，段落文本会按默认值左对齐显示，也就是说，<p></p>等价于<p align="left"></p>。

认识键值对

在HTML开始标签中，可以通过“属性="属性值"”的方式为标签添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的。键值对可以简单理解为对“属性”设置“属性值”。在网页设计中，键值对有多种表现形式，例如，color="red"、width:200px;等，其中，“color”和“width”即为键值对中的“键”（英文key ），“red”和“200px”为键值对中的“值”（英文value）。键值对广泛地应用于编程中，HTML标签属性的定义形式“属性="属性值"”只是键值对中的一种。

4.HTML标签的关系

在网页中存在多种标签，各种标签之间都具有一定的关系。标签的关系主要有嵌套关系和并列关系两种，具体介绍如下。

（1）嵌套关系

嵌套关系也称为包含关系，可以简单理解为一个双标签里包含了其他的标签。例如，在HTML5的文档基本语法格式中，<html>标签和<head>标签（或<body>标签）就是嵌套关系。示例代码如下： <html> <head> </head> <body> </body> </html> 在标签的嵌套过程中，必须先结束最靠近内容的标签，再按照由内到外的顺序依次关闭标签。下图所示为嵌套标签正确写法和错误写法的对比。在嵌套关系的标签中，通常把最外层的标签称为“父标签”，里面的标签称为“子标签”。但只有双标签才能作为“父级标签”。

（2）并列关系

并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有嵌套关系。例如，在 HTML5的文档基本格式中，<head>标签和<body>标签就是并列关系。无论是单标签还是双标签，都可以拥有并列关系。

5.HTML文档头部相关标签

制作网页时，经常需要设置网页的基本信息，如网页的标题、作者等。为此，HTML提供了一系列设置网页信息的标签，这些标签通常都写在<head>标签内，也被称为HTML文档头部相关标签。下面将介绍常用的HTML文档头部相关标签。

（1）<title>标签

<title>标签用于设置HTML页面的标题，也就是为网页取一个名称。在网页结构中，<title>标签必须位于<head>标签内。一个HTML文档只能含有一个<title>标签，<title></title>标签之间的内容将显示在浏览器窗口的标题栏中。例如，将某个页面标题设置为“轻松学习HTML5”，示例代码如下： <title>轻松学习HTML5</title> 上述代码对应的页面标题效果如下图所示。

（2）<meta />标签

任务2-2 HTML文本控制标签

需求分析

在一个网页中文字往往占据较大的篇幅，为了让文字能够在网页中排版整齐、结构清晰，HTML提供了一系列的文本控制标签。例如，标题标签<h1>~<h6>、段落标签<p>、字体标签<font>等，下面将对这些HTML文本控制标签进行详细介绍。

知识储备

1.页面格式化标签

一篇结构清晰的文章通常都会通过标题、段落、分割线等对文章进行结构排列。网页也不例外，为了使网页中的内容有序排列，HTML提供了相应的页面格式化标签，主要包括标题标签、段落标签、水平线标签和换行标签，具体介绍如下。

（1）标题标签

HTML提供了6个等级的标题，即h1、h2、h3、h4、h5和 h6，且重要性递减。标题标签的基本语法格式如下： <hn align="对齐方式">标题文本</hn> 在上述语法格式中，n的取值为1~6；align属性为可选属性，可以使用align属性设置标题的对齐方式，该属性的取值如下。 left：设置标题文字左对齐（默认值）。 center：设置标题文字居中对齐。 right：设置标题文字右对齐。了解了标题标签的语法格式后，下面通过一个案例来演示标题标签的使用方法，如例1所示。在例1中，第8~13行代码使用<h1>~<h6>标签设置了6个级别的标题。运行例1，效果如下图所示。从上图可以看出，默认情况下标题文字是加粗左对齐的，并且1级标题~6级标题的字号递减。注意： ①一个页面中只能使用一个<h1>标签，<h1>标签常常被用在网站的Logo部分。 ②标题标签具有明确的语义，初学者禁止仅使用标题标签设置文字加粗效果或更改文字的大小。 ③HTML不赞成使用标题标签的align对齐属性，可使用CSS样式设置。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>标题标签</title> 6 </head> 7 <body> 8 <h1>1级标题</h1> 9 <h2>2级标题</h2> 10 <h3>3级标题</h3> 11 <h4>4级标题</h4> 12 <h5>5级标题</h5> 13 <h6>6级标题</h6> 14 </body> 15 </html>

（2）段落标签

在网页中，段落标签可以把文字有条理地显示出来。就如同人们平常写文章一样，整个网页也可以分为若干个段落。在网页中使用<p>标签来定义段落。<p>标签是HTML中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的基本语法格式如下： <p align="对齐方式">段落文本</p> 在上述语法格式中，align属性为<p>标签的可选属性，与标题标签<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。下面的示例代码就设置了一段居中显示的段落文本。 <p align="center">设计心理学使设计更能反映和满足人们的心理作用。</p>

（3）水平线标签

在网页中，水平线可以将段落与段落之间隔开，使文档层次分明。水平线可以通过<hr />标签来定义。<hr />标签的基本语法格式如下： <hr 属性="属性值" /> <hr />是单标签，在网页中输入一个<hr />标签，就添加了一条默认样式的水平线。<hr />标签有几个常用的属性，具体如下表所示。

（4）换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端、然后自动换行。如果希望文本内容强制换行显示，就需要使用换行标签<br />。在换行时，如果还像在Wond中一样直接按“Enter”键换行，是不会起作用的。换行标签可以直接嵌入文本中，其用法非常简单。下面通过例2做具体演示。在例2中，第8~10行代码分别使用换行标签<br />和按“Enter”键两种方式换行。运行例2，效果如下图所示。从上图容易看出，按“Enter”键换行的段落在浏览器中并没有换行，只是多了一个空白字符，而使用换行标签<br />的段落却实现了强制换行的效果。 <br />标签虽然可以实现换行的效果，但并不能取代结构标签<h>、<p>等。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>使用br标签换行</title> 6 </head> 7 <body> 8 <p>使用HTML制作网页时通过br标签<br />可以实现换行效果</p> 9 <p>如果向在Word中一样 10 单击“Enter”键换行，不会起作用。</p> 11 </body> 12 </html>

2.文本样式标签

HTML提供了文本样式标签<font >，用于控制网页中文本的字体、字号和颜色。<font >标签的基本语法格式如下： <font 属性="属性值">文本内容</font> 在上述语法格式中，<font>标签常用的属性有3个，如下表所示。下而通过一个案例来演示<font>标签的用法，如例3所示。在例3中，使用了4个段落标签，第1个段落中的文本为HTML默认段落样式，第2~4个段落分别使用<font>标签设置了不同的文本样式。运行例3，效果如下图所示。注意：在实际工作中，不建议使用HTML的<font>标签，可使用CSS样式来定义文本样式。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>文本样式标签font</title> 6 </head> 7 <body> 8 <h2 align="center">使用font标签设置文本样式</h2> 9 <p>我是默认样式的文本</p> 10 <p><font size="2" color="blue">我是2号蓝色文本</font></p> 11 <p><font size="5" color="red">我是5号红色文本</font></p> 12 <p><font face="微软雅黑" size="7" color="green">我是7号绿色文本，我的字体是微软雅黑哦</font></p> 13 </body> 14 </html>

3.文本格式化标签

在网页制作中，文本格式化标签可以使文字以特殊的方式突出显示，例如，网页中常见的粗体、斜体或下画线效果。常用的文本格式化标签如下表所示。在上表中，同一行的文本格式化标签都能显示相同的文本样式效果，但<strong>标签、<em>标签<del>标签、<ins>标签更符合HTML结构的语义化，所以在HTML中建议使用这4个标签设置文本样式。下面通过一个案例来演示上表中一些标签的用法，如例4所示。在例4中，为段落文本分别应用不同的文本格式化标签，从而使文字产生特殊的显示效果。运行例4，效果如下图所示。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>文本格式化标签的使用</title> 6 </head> 7 <body> 8 <p>我是正常显示的文本</p> 9 <p><b>我是使用b标签加粗的文本</b>，<strong>推荐使用strong标签加粗</strong></p> 10 <p><i>我是使用i标签倾斜的文本</i>，<em>推荐使用em标签斜体文本</em></p> 11 <p><u>我是使用u标签加下划线文本</u>，不建议使用</p> 12 <p><s>我是使用s标签加删除线文本</s>，<del>推荐使用del标签加删除线</del></p> 13 </body> 14 </html>

4.特殊字符

浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特珠字符的文本呢？HTML为这些特殊字符准备了专门的代码，如下表所示。从上表可以看出，特殊字符的代码通常由前缀“&”、字符名称和后缀英文分号“;”组成。在网页中使用这些特殊字符时只需输入相应的字符代码替代即可。此外，在Dreamweaver中，还可以通过菜单栏中的“插入→HTML→特殊字符”选项直接插入相应特殊字符的代码。注意：浏览器对空格符“ ”的解析是有差异的，导致了使用空格符的页面在各个浏览器中显示效果不同，因此不推荐使用，可使用CSS样式替代。注：表格中的字符代码，“&”和字符名称，以及字符名称和后缀英文分号“;”之间是不能有空格的。这个表中之所以有空格，是因为在MindMaster罐头的表格中键入不带空格的代码，会直接显示代码对应的特殊字符，读者就看不到原始代码了。加空格是笔者为了使之以原始代码的形式显示出来，便于读者查看。

知识拓展

<div>标签

div是英文“division”的缩写，中文译为“分割、区域”。<div>标签可以简单理解成一个容器，用于容纳网页中的文本模块、图像模块，从而实现网页的规划和布局。<dliv>标签可以容纳段落、标题、表格、图像等各种网页元素，即大多数HTML标签都可以嵌套在<div>标签中；此外，<div>标签中还可以嵌套多层<div>标签。下面通过一个案例来演示<div>标签的用法，如例5所示。在例5中，第7~11行代码使用4个<liv>标签对页面进行布局，其中，最外层的<div>标签用于整体控制页面版式，里面嵌套的3个<div>标签分别用于布局页面头部、内容和页脚。代码中的“style=…”，用于为各个<div>标签定义样式（style属性的相关内容将在后面的项目中详细讲解，这里了解即可）。运行例5，效果如下图所示。 <div>标签最大的意义在于可与浮动属性：float配合，进行网页布局，即常说的“DIV+CSS”网页布局。对于浮动和布局这里了解即可，后面的内容将会详细介绍。<div>标签可以替代块级元素（如<h>标签、<p标签等），但是它们在语义上有一定的区别。例如，<div>标签和<h2>标签的不同在于，<h2>标签具有特殊的含义，语义较重，代表着标题、而<div>标签只是代表一个元素。

例5

1 <!doctype html> 2 <html><head> 3 <meta charset="gbk"> 4 <title>div标签的使用</title> 5 </head> 6 <body> 7 <div style="width:980px; margin:0 auto; padding:20px 0; background:#CCC;"> 8 <div style="height:60px; background:#FF0;">头部</div> 9 <div style="height:200px; background:#0C0;">内容</div> 10 <div style="height:60px; background:#6CF;">页脚</div> 11 </div> 12 </body> 13 </html>

任务2-3 HTML图像应用

需求分析

浏览网页时人们常常会被网页中的图像所吸引，巧妙地在网页中使用图像可以让网页更为丰富多彩。下面将通过常用图像格式、图像标签、相对路径和绝对路径这3个知识点，详细讲解HTML中图像的应用。

知识储备

1.常用图像格式

网页中图像太大会造成载入速度缓慢，太小又会影响图像的质量。因此，在网页制作中人们经常会为该使用哪种图像格式而困惑。目前，网页上常用的图像格式主要有GIF格式、PNG格式和JPEG格式三种，具体介绍如下。

（1）GIF格式

GIF格式最突出的特点是支持动画，同时GIF格式也是一种无损压缩的图像格式，即修改图像之后GIF格式的图像质量没有损失。且GIF格式支持透明，因此很适合在互联网上使用。但GIF格式只能处理256种颜色。因此在网页制作中，GIF格式常常用于Logo、小图标和其他色彩相对单一的图像。

（2）PNG格式

PNG格式包括PNG-8格式和真色彩PNG格式（包括PNG-24格式和PNG-32格式）。相对于GIF格式，PNG格式最大的优势是体积更小，支持Alpha透明（全透明、半透明）并且颜色过渡更平滑，但PNG格式不支持动画。其中，PNG-8格式与GIF格式类似，只能支持256种颜色，如果用作静态图可以取代GIF格式；真色彩PNG格式可以支持更多的颜色，同时真色彩PNG格式（特指PNG-32格式）支持半透明图像效果。

（3）JPEG格式

JPEG格式显示的颜色比GIF格式和PNG-8格式要多，可以用于保存颜色超过256种的图像，但是JPEG格式是一种有损压缩的图像格式，这就意味着每修改一次图像都会造成一些（图像数据的丢失。JPEG格式是特别为照片设计的文件格式，网页制作过程中类似于照片的图像（如横幅广告（Banner）、商品图像、较大的插图等）都可以保存为JPEG格式。

概要

总的来说，在网页中小图像、图标、按钮等建议使用GIF格式或PNG-8格式，半透明图像建议使用真色彩PNG格式（一般指PNG-32格式），色彩丰富的图像则建议使用JPEG格式，动态图像建议使用GIF格式。

2.图像标签

网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。在HTML中使用<img />标签来定义图像、其基本语法格式如下： <img src="图像URL" /> 在上述语法格式中、src属性用于指定图像的路径，它是<img />标签的必备属性。要想在网页中灵活地使用图像，仅仅依靠src属性是远远不够的。为此，HTML还为<img />标签提供了其他的属性，具体如下表所示。上表对<img />标签的常用属性做了简要描述，下面对它们进行详细介绍。

（1）alt属性

有时页面中的图像可能无法正常显示，例如，图像加载错误、浏览器版本过低等。因此，需要为页面上的图像添加替换文本、在图像无法显示时告诉用户该图像的信息。在HTML中，alt 属性用于设置图像的替换文本。下面通过一个案例来演示alt属性的用法，如例6所示。如例6所示，在HTML网页文档所在的文件夹中放入名称为“banner1.jpg”的图像，并且通过src属性插入图像，通过alt属性指定图像不能显示时的替代文本。运行例6，图像正常显示，效果如下图所示。如果图像不能显示，在谷歌浏览器中就会出现下图所示的效果。在以前网速较低的时候，alt属性主要用于使看不到图像的用户了解图像内容。随着网络的发展，现在网页不能显示图像的情况已经很少见了，alt属性又有了新的作用。谷歌和百度等搜索引擎在收录页面时，会通过alt属性的内容来解析网页的内容。因此、在制作网页时，为图像设置替换文本，可以帮助搜索引擎更好地理解网页内容、从而更有利于网页的优化。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>图像标签img之alt属性的使用</title> 6 </head> 7 <body> 8 <img src="banner1.jpg" alt="百搭、白色、涂鸦、T恤、精品女装"/> 9 </body> 10 </html>

使用title属性设置提示文字

图像标签<img />有一个与alt属性十分类似的属性——title。 title属性用于设置鼠标指针悬停时图像的提示文字。示例代码如下： <img src="banner1.jpg" title="百搭、白色、涂鸦、T恤、精品女装"/> 示例代码的运行结果如下图所示。在上图所示的页面中，当鼠标指针移动到图像上时就会出现提示文本。

（2）width属性和height属性

通常情况下，如果不为<img />标签设置宽度和高度属性，图像就会按照它的原始尺寸显示。这时可以通过width属性和height属性来定义图像的宽度和高度。通常，只设置width属性和height属性中的一个即可，另一个属性就会依据已设置的属性将原图等比例显示。如果同时设置两个属性，且设置的比例与原图的比例不一致，显示的图像就会变形。

（3）border属性

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、并且可以设置边框的宽度、但使用HTML的border属性无法更改边框颜色。

（4）vspace属性和hspace属性

在网页中，由于排版要求，有时候还需要调整图像的边距。HTML通过vspace属性和hspace属性可以分别调整图像的垂直边距和水平边距。

（5）align属性

图文混排是网页中很常见的效果，默认情况下图像的底部会与文本的第一行文字对齐、如下图所示。但是在制作网页时经常需要实现图像和文字环绕效果（如左图右文），这就需要使用图像的对齐属性align。下面通过一个案例来实现网页中常见的图文混排效果。如例7所示。在例7中，第5行代码使用hspace属性和vspace属性为图像设置了水平边距和垂直边距，同时为图像添加了5像素的边框，并且通过align="left"使图像左对齐。运行例7，效果如下图所示。注意：实际制作中图像标签的border、vspace、hspace和align等HTML属性，均可以使用CSS样式替代。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>图像标签的边距属性和对齐属性</title> 6 </head> 7 <body> 8 <img src="images/chenpi.png" alt="陈皮的功效与作用" border="1" hspace="10" vspace="10" align="left" /> 9 陈皮是临床常用的利气燥湿药,药苦、辛而温,药归肺经和脾经,药的功效就是理气健脾、燥混化痰。可以治疗气滞与胸胁的病症,比如可以治疗胸闷、胃胀、腹胀，可以治疗心、胸、胃的疾患。陈皮有开胃的作用，可以治疗食欲不振,也可以治疗吐泄、呕吐、泄泻的胃肠道消化功能的障碍。除此之外、陈皮有燥湿的作用，燥湿化痰，可以治疗这种咳嗽、痰多等病症。陈皮在临床非常常用，陈皮、半夏经常是搭配在一起来使用。 10 </body> 11 </html>

3.相对路径和绝对路径

在计算机中查找文档时，需要明确文档所在位置。通常，把网页文档所在的位置称作路径。网页中的路径分为绝对路径和相对路径两种，具体介绍如下。

（1）绝对路径

绝对路径就是网页上的文档或目录在盘符（即C盘、D盘等）中的真正路径，例如，“D:\案例源码\chapter03\images\banner1.jpg”就是一个盘符中的绝对路径。再如，完整的网络地址“http://www.zcool.com.cn/imnages/logo.gif”也是一个绝对路径。

（2）相对路径

相对路径就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。相对路径的设置分为以下3种。图像和HTML文档位于同一文件夹：设置相对路径时，只需输入图像的名称即可，如<img src="logo.gif" />。图像位于HTML文档的下一级文件夹：设置相对路径时，输入文件夹名和图像名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。图像位于HTML文档的上一级文件夹：设置相对路径时，在图像名之前加入“../”，如果是上两级，则需要使用“../ ../”，以此类推，如<img src="../logo.gif" />。需要说明的是，在网页中并不推荐使用绝对路径，因为网页制作完成后需要将所有的文档上传到服务器，上传后很有可能不存在“D:\案例源码\chapter02\images\banmer1.jpg”这样一个很精准的路径，故网页也就无法正常显示图像。

知识拓展

切图

为了提高浏览器的加载速度，并满足一些页面设计的特殊要求，通常需要把效果图中不能用代码实现的图像剪切下来作为网页素材，这个剪切图像的过程被称为“切图”。切图的目的是把设计效果图转化成结构化的网页代码素材。常用的切图工具主要有Photoshop和Fireworks。下面以Fireworks CS6 的“切片”工具为例，分步骤讲解切图技术。切图的具体步骤如下。

（1）选择“切片”工具

打开Fireworks，选择工具箱中的“切片”工具，如下图所示。

（2）绘制切片区域

根据需要在网页效果图上绘制切片区域，如下图所示。

（3）导出切片

绘制完成后，在菜单栏上选择“文件→导出”选项，如下图所示。在弹出的“导出”对话框中，重命名文件，在“导出”下拉列表中选择“仅图像”选项，在“切片”下拉列表中选择“导出切片”选项并勾选“仅已选切片”复选框，选择需要存储图像的文件夹。“导出”对话框的具体设置如下图所示。单击“保存”按钮，即可完成一次切图。

任务2-4 页面建设准备工作

在制作“博客”页面之前，小思需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析、页面布局，具体介绍如下。

网站素材整理

网站素材整理主要包括建立网站站点和“博客”页面切图，具体介绍如下。

1.建立网站站点

网站通常由HTML文档、图像、CSS文档等构成。建立站点就是定义一个存放网站中零散文档的文件夹，其对于网站的上传维护、内容扩充移植都有着重要作用，能够帮助人们系统地管理网站文档。建立网站站点的具体步骤如下。

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本项目在“D:\案例源码\chapter02”文件夹中新建一个名称为“boke”的文件夹作为网站根目录，如下图所示。

（2）在根目录下新建文件夹

打开网站根目录文件夹“boke”，在根目录下新建“images”文件夹，用于存放网站所需的图像，如下图所示。

（3）新建“boke”站点

打开Dreamweaver，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称“boke”，并选择站点根目录的存储位置、如下图所示。新建站点时，站点名称既可以使用中文也可以使用英文，但名称一定要有很高的辨识度。单击“保存”按钮，完成站点的建立。

（4）查看站点

站点建立成功后，在Dreamweaver“文件”面板组中可查看到站点的信息，如下图所示。

2.“博客”页面切图

使用Fireworks CS6的“切片”工具进行切图，然后导出“博客”页面中的素材图像，并存储在站点的images文件夹中。导出后的图像素材如下图所示。

页面结构分析

在进行页面制作前，先要对页面结构进行分析，这样有助于了解页面的组成结构，提升页面制作效率。“博客”页面从上到下可以分为5个模块，如下两图所示。

页面布局

页面布局就是为了让网站页面结构更加清晰而对页面进行的“排版”，可以使页面的搭建更有针对性。下面对“博客”页面进行整体布局。在站点根目录下新建一个HTML文档，并命名为“project02”。使用<div>标签对页面进行布局，具体代码如project02.html所示。

project02.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>“博客”页面</title> 6 </head> 7 <body> 8 <div style="width:980px; margin:0 auto"> 9  10 <div></div> 11  12  13 <div></div> 14  15  16 <div></div> 17  18  19 <div></div> 20  21  22 <div></div> 23  24 </div> 25 </body> 26 </html> 在上述代码中、最外层的<div>标签用于定义页面版心。第8行代码中的“style="width:980px; margin:0 auto"用于定义页面的宽度为“980px”且水平居中显示。

任务2-5 制作“头部”模块

效果分析

“头部”模块可以分为左右两个部分，左侧为Logo，可通过<img />标签定义；右侧为页面的导航，可通过<p>标签定义。“头部”模块的结构如下图所示。

模块制作

在project02.html文档内书写“头部”模块的HTML代码，具体如下： 1  2 <div> 3 <div style="height:56px;"> 4 <img src="images/logo.png" alt="" align="left"/> 5 <p align="right">我的博客  |  攻略  |  随笔</p> 6 </div> 7 <hr color="#CCC" /> 8 </div> 9  在上述代码中，第3行代码中的“style="height:56px;"”用于定义“头部”模块的高度；第4行代码中的“align="left"”用于定义图像居左排列；第5行代码中的“align="right"”用于定义段落文本居右排列、同时在第5行代码中使用了空格符“ ”实现多个导航项之间的留白；第7行代码用于定义“头部”模块下的分界线。保存project02.html文档，刷新页面，效果如下图所示。

任务2-6 制作“博主简介”模块

效果分析

“博主简介”模块可以分为左右两个部分，左边为图像，通过<img/>标签定义；右边为文本介绍，通过在<div>标签中嵌套的<p>标签定义。右边文本介绍中特殊显示的文本样式，可通过文本格式化标签和文本样式标签定义。“博主简介”模块的结构如下图所示。

模块制作

在project02.html文档内书写“博主简介”模块的HTML代码，具体如下： 1  2 <div style="height:470px;"> 3 <img src="images/banner1.jpg" alt="" align="left" hspace="12" vspace="12"/> 4 <div> 5 <p align="center"> 6 <strong> 7 <font face="微软雅黑" size="7" color="#0878ff">博</font> 8 <font face="微软雅黑" size="7" color="#0878ff">主</font> 9 <font face="微软雅黑" size="6" color="#333">简</font> 10 <font face="微软雅黑" size="6" color="#333">介</font> 11 </strong> 12 </p> 13 <p> 14     大家好，我是你们的旅行博主——<font color="#0878ff" size="4">LonelyStone</font>。本人是一名资深旅行博主，外向型的内向人格，对世界的好奇心随年龄有增无减。同时是音乐、电影、旅行、文学、篮球、长跑、潜水爱好者。想在老去之前，看遍这颗星球的美好。 15 </p> 16 <p> 17     旅行格言：<ins><em><strong><font color="#0878ff">人生不过一场旅行</font></strong></em></ins>，你路过我,我路过你,然后各自回头,敬往事一杯烈酒。比起说走就走的旅行,很多人的生活都是日趋平淡的怅然,缺少了一种享受生活的阳光悠然。 18 </p> 19 <p> 20     旅行足迹：在纳米比亚的死亡谷、土耳其卡帕多奇亚、日本镰仓、马达加斯加。<ins><strong><font color="#F90">......[详细]</font></strong></ins> 21 </p> 22 </div> 23 </div> 24  在上述代码中，第2行代码中的“style="height:470px;"”用于定义整个模块的高度；第3行代码中的“align="left"”用于定义图像居左排列，“hspace="12" vspace="12"”用于拉开图像与元素的距离；第4~22行代码通过在<div>标签中嵌套多个<p>标签来定义右侧的文本介绍内容。此外，通过在<p>标签中嵌套文本样式标签<font>与文本格式化标签<strong>、<em>等来定义特殊显示的文本片段。保存project02.html文档、刷新页面、效果如下图所示。

任务2-7 制作“旅行随笔”模块

效果分析

“旅行随笔”模块中的标题通过<h2>标签定义；段落文本通过在<p>标签中嵌套<em>标签和<font>标签定义；水平线由<hr />标签定义，图像由<img />标签定义。“旅行随笔”模块的结构如下图所示。

模块制作

在project02.html文档内书写“旅行随笔”模块的HTML代码、具体如下： 1  2 <div> 3 <h2 align="center"> 4 <font size="6"> 5 塔克拉玛干沙漠：爱我就征服我 6 </font> 7 </h2> 8 <p align="center"> 9 <em> 10 <font color="#666666"> 11 2019.04.21    地点：塔克拉玛干沙漠 12 </font> 13 </em> 14 </p> 15 <hr color="#CCC" /> 16 <p> 17       在这浩瀚的大漠我看到了姿态各异、生命力极强的胡杨。没有肥沃的土壤、没有充足的水分、没有适宜的环境，面对着寸草不生的塔克拉玛干大沙漠，却有胡杨毅然傲立戈壁，呈现出生命醉人的绿。 18 </p> 19 <img src="images/banner2.jpg" alt="沙漠" vspace="20" /> 20 <p> 21       据说，守护在戈壁的胡杨，一千年不死，一千年不倒，一千年不朽，这种傲然挺立、不屈不挠的精神，深深震动了我，这正像生活在大漠边缘勤劳勇敢的人们。喜欢摄影的我，想努力用自己的视角体会这种精神。 22 </p> 23 <img src="images/banner3.jpg" alt="沙漠" vspace="20" /> 24 </div> 25  保存project02.html文档，刷新页面，效果如下图所示。

任务2-8 制作“驴友评论”模块

效果分析

“驴友评论”模块由标题和评论构成。其中，标题部分由图像和一条水平分割线构成。评论部分可以分为左边的图像、右边的文本和下方的水平分割线3个部分。右方的文本可以通过在<div>标签中嵌套<p>标签定义，特殊的文本字体可通过<font>标签定义。由于各个评论的样式相同，对于这些样式相同的模块，在制作网页时，只需要制作出一个模块、其他的模块复制制作好的模块并更改内容即可。“驴友评论”模块的结构如下图所示。

模块制作

在project02.html文档内书写“驴友评论”模块的HTML代码、具体如下： 1  2 <div> 3 <img src="images/icon.gif" alt="评论" /> 4 <hr color="#CCC" /> 5 <div> 6 <img src="images/person1.jpg" alt="沙漠" align="left" hspace="10" /> 7 <div> 8 <p> 9 <font color="F60">HXZ9_IT</font>    <font size="2" color="#999">2020-1-2 15:38:37</font> 10 </p> 11 <p> 12 <font size="2">风景太美了，感谢博主的分享，有时间一定去看看！</font> 13 <br /> 14 </p> 15 </div> 16 <hr color="#CCC" size="1" /> 17 </div> 18 <div> 19 <img src="images/person2.jpg" alt="沙漠" align="left" hspace="10" /> 20 <div> 21 <p> 22 <font color="F60">外星人</font>    <font size="2" color="#999">2020-1-15 15:05:37</font> 23 </p> 24 <p> 25 <font size="2">大漠孤烟直，长河落日圆</font> 26 <br /> 27 </p> 28 </div> 29 <hr color="#CCC" size="1" /> 30 </div> 31 <div> 32 <img src="images/person3.jpg" alt="沙漠" align="left" hspace="10" /> 33 <div> 34 <p> 35 <font color="F60">so_cool</font>    <font size="2" color="#999">2020-2-14 10:38:36</font> 36 </p> 37 <p> 38 <font size="2">前几年去过一次，风景可以，适合拍照。</font> 39 <br /> 40 </p> 41 </div> 42 <hr color="#CCC" /> 43 </div> 44 </div> 45  在上述代码中，第3~4行代码用于定义“驴友评论”模块的标题；第5~17行代码用于定义第1条评论，第18～30行代码用于定义第2条评论；第31~43行代码用于定义第3条评论。保存project02.html文档，刷新页面，效果如下图所示。

任务2-9 制作“页脚”模块

效果分析

“页脚”模块水平居中排列，由多行文本构成，因此可通过在<div>标签中嵌套多个<p>标签的方式来定义。段落中特殊显示的文本可通过<font>标签定义。“页脚”模块的结构如下图所示。

模块制作

在project02.html文档内书写“页脚”模块的HTML代码、具体如下： 1  2 <div style="text-align:center;"> 3 <p > 4 <font color="#1d5983" size="2"> 5 网友意见留言板   <font color="#333">电话：000-1234567</font>    欢迎批评指正 6 </font> 7 </p> 8 <p> 9 <font color="#1d5983" size="2"> 10 博客简介 | Abou BOKE | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | BOKE English | 注册产品答疑 11 </font> 12 </p> 13 <p> 14 <font size="2"> 15 Copyright © 2016 - 2016 BOKE.coright All Rights Reserved 16 </font> 17 </p> 18 </div> 19  在上述代码中，第2行代码中的“style="text-align:center;"”用于定义“页脚”模块水平居中排列。保存project02.html文档，刷新页面、效果如下图所示。

项目3 “网上花店”专题页制作

知识目标

掌握CSS样式规则的特点，能够区分HTML属性与CSS样式的写法差异。掌握CSS层叠性、继承性、优先级等特点，能够清晰描述并举例说明。

技能目标

掌握引入CSS样式表的不同方式，能够在网页中引入CSS样式。掌握使用CSS样式控制网页中的文本外观的技巧。

项目描述

在网站中，专题页能够帮助用户深入了解商品的信息，增加用户在网站中的停留时间，并对用户转化起到良好的促进作用。“彼岸花”是一家通过互联网销售鲜花的网店，最近店主Michael联系到小思，想请小思帮忙制作一个“网上花店”专题页。接到朋友的委托后，小思做了进一步学习规划，她计划先深入巩固CSS样式规则、CSS选择器、CSS文本样式属性等CSS基础知识，再动手完成“网上花店”专题页的制作。“网上花店”页面效果如下两图所示。

任务3-1 CSS核心基础

需求分析

随着网页制作技术的不断发展，单调的HTML标签属性已经无法满足网页设计的需求。网页制作人员往往需要更多的字体、更方便的样式、更绚丽的图形动画。CSS在不改变原有HTML结构的情况下，增加了丰富的样式效果，极大地满足了网页制作人员的需求。在深入学习CSS之前，网页制作人员先要了解CSS的基础知识。下面将从结构与表现分离、CSS样式规则、CSS样式表的引入、CSS基础选择器4个方面，对CSS核心基础知识进行讲解。

知识储备

1.结构与表现分离

使用HTML标签属性对网页进行修饰的方式存在很大的局限性，因为将所有的样式都写在标签中既不利于阅读代码，也不利于维护代码。如果希望网页代码美观易读、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现分离是指在网页设计中，HTML只用于搭建网页的结构，不使用HTML标签属性设置网页的显示样式，所有的网页显示样式使用CSS来设置。例如，下图所示的网页代码片段就是将CSS嵌入HTML文档中，虽然此时CSS与HTML在同一个文档中，但CSS集中写在HTML文档的头部，这也是符合结构与表现分离原则的。如今大多数网页都是遵循Web标准开发的，即使用HTML搭建网页结构，而页面布局、文本、图片的显示样式都使用CSS控制，从而实现结构与表现分离。

2.CSS样式规则

使用HTML搭建网页结构时，需要遵从一定的规范，CSS亦如此。要想熟练地使用CSS设置网页样式，先要了解CSS的样式规则。CSS的基本样式规则如下：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 在上述语法格式中，选择器用于指定CSS样式作用的HTML元素，花括号“{}”内是对该HTML元素设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用于声明一个样式。属性是为指定的对象设置的样式名称，如字体大小、文本颜色等。属性值是为指定对象赋予的样式特征，如绿色、14px。属性和属性值之间用英文状态下的“:”连接，多个键值对之间用英文状态下的“;”进行分隔。下图所示为CSS样式规则的结构示意图。书写CSS样式时，除了要遵循CSS样式规则，还需要注意以下几点。 CSS样式中的选择器严格区分大小写，属性和属性值不区分大小写。按照书写习惯，选择器、属性和属性值一般都采用小写的方式。如果属性值由多个单词组成，并且单词中包含空格，则必须为这个属性值加上英文引号。示例代码如下： p{font-family:"Times New Roman";} 为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。示例代码如下： /*这是CSS注释文本,此内容不会显示在浏览器窗口中*/ 在CSS代码中空格是不被解析的，花括号和分号前后的空格可有可无。因此，可以使用“Tab”键、"Enter”键等对代码进行排版，以提高代码的可读性。示例代码如下： h1{font-size:20px;color:red; } 上述写在一行中的示例代码等价于： h1{ font-size:20px; /*定义字体大小*/ color:red; /*定义文本颜色*/ } 属性值和单位之间是不允许出现空格的。例如，下面这行代码的书写方式是错误的。 h1{font-size:20 px; } /*20和单位px之间有空格*/

3.CSS样式表的引入

要想使用CSS样式表修饰网页，就需要在HTML文档中引入CSS样式表。CSS提供了4种引入方式，分别为行内式、内嵌式、外链式和导入式，具体介绍如下。

（1）行内式

行内式也被称为“内联样式”，是通过标签的style属性来设置标签样式的。行内式基本语法格式如下： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名> 在上述语法格式中，style是标签的属性，任何HTML标签都拥有style属性，该属性用于使用行内式引入CSS样式表。该语法格式中属性和属性值的书写规则与CSS样式规则相同。行内式只对其所在的标签及嵌套在该标签中的子标签起作用。通常，CSS的书写位置是在<head>头部标签中，但是行内式却是写在<html>结构标签中。行内式CSS样式示例代码如下： <h1 style="font-size:20px; color:blue;">使用CSS行内式修饰一级标题的字体大小和颜色</h1> 在上述代码中，<h1>标签添加了行内式CSS样式，用于修饰一级标题的字体大小和颜色。示例代码对应效果如下图所示。需要注意的是，行内式是通过标签的属性来控制样式的，这样并没有做到结构与表现分离，所以不推荐使用。

（2）内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>标签中，并且用<style>标签定义。其基本语法格式如下： <head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 在上述语法格式中，<style>标签一般放置在<head>标签中且在<title>标签之后。也可以把<style>标签放置在HTML文档的其他位置，但是并不推荐这样设置。因为浏览器是从上到下解析网页代码的，把CSS代码放在头部有利于网页样式的提前下载和解析，这就避免了网页内容下载后因没有样式修饰而无法正常显示的问题。此外，在<style>标签中还需要设置type属性。type属性的属性值为“text/css”。这样浏览器才知道<style>标签中包含的是CSS代码。在一些宽松的语法格式中，type属性可以省略。了解了内嵌式的语法格式后，下面通过一个案例具体演示内嵌式CSS样式的用法，如例1所示。在例1中，第7~13行代码为嵌入的CSS样式代码，这里不用了解代码的含义，只需了解嵌入方式即可。运行例1，效果如下图所示。在网页设计中，内嵌式并不能将结构与表现完全分离。内嵌式CSS样式只对其所在的HTML页面有效，因此仅设计一个页面时，使用内嵌式是不错的选择。但如果是一个网站，则不建议使用这种方式，因为网站包含多个页面，使用内嵌式不能充分发挥CSS代码的重用优势。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>内嵌式引入CSS样式表</title> 6 <style type="text/css"> 7 h2{text-align:center;} /*定义标题标签居中对齐*/ 8 p{ 9 font-size:16px; 10 font-family:"楷体"; 11 color:purple; 12 text-decoration:underline; 13 } 14 </style> 15 </head> 16 <body> 17 <h2>内嵌式CSS样式</h2> 18 <p>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中且在title标签之后。</p> 19 </body> 20 </html>

（3）外链式

外链式也称为“链入式”，是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文档中。外链式的基本语法格式如下： <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> 在上述语法格式中，<link />标签需要放在<head>头部际签中，其属性有3个，具体介绍如下。 href属性：定义链接外部样式表文件的URL。URL可以是相对路径，也可以是绝对路径。 type属性：定义链接文档的类型，需要将属性值设置为“text/css”，表示链接的外部文件为CSS样式表。在HTML5 的语法格式中，type属性可以省略。 rel属性：定义当前文档与被链接文档之间的关系，需要将属性值设置为“stylesheet”，表示被链接的文档是一个样式表文件。下面通过一个案例来演示如何通过外链式引入CSS样式表，具体步骤如下。 ①创建一个HTML文档，并在该文档中添加一个标题和一个段落文本，具体代码如例2所示。 ②将该HTML文档命名为“example02.html”，保存在“chapter03”文件夹中。 ③打开Dreamweaver，在菜单栏单击“文件→新建”选项，弹出“新建文档”对话框，如下图所示。 ④在“新建文档”对话框的“页而类型”列表框中选择“CSS”选项，单击“创建”按钮，即可打开CSS文档编辑窗口，如下图所示。 ⑤将文件命名为“style.css”，保存在“example02.html”文档所在的文件夹“chapter03”中。 ⑥在上图所示的CSS文档编辑窗口中输入以下代码，并保存CSS样式表文件。 h2{text-align:center;} /*定义标题标签居中对齐*/ p{ /*定义段落标签的样式*/ font-size:16px; font-family:"楷体"; color:purple; text-decoration:underline; } ⑦在<head>头部标签中，添加<link>语句，将“style.css”外部样式表文件链接到“example02.html”文档中，具体代码如下： <link href="style.css" type="text/css" rel="stylesheet" /> ⑧再次保存“example02.html”文档，成功链接后，CSS样式表文件名称会出现在下图中框线标注的位置。至此，外链式引入CSS样式表完成，运行例2，效果如下图所示。外链式最大的好处是同一个CSS样式表可以被多个HTML页面链接使用；并且一个HTML页面也可以通过多个<link />标签链接多个CSS样式表。在网页制作中，外链式是使用频率最高，也是最实用的引入方式。因为外链式将HTML代码与CSS代码分离为单独的文件，实现了将结构与表现完全分离，从而使网页的前期制作和后期维护都十分方便。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>外链式引入CSS样式表</title> 6 </head> 7 <body> 8 <h2>外链式CSS样式</h2> 9 <p>通过link标签可以将扩展名为.css的外部样式表文件链接到HTML文档中。</p> 10 </body> 11 </html>

（4）导入式

导人式与外链式相同，都是针对外部CSS样式表文件，为了实现结构与表现分离而采用的引入方式。导入式的基本语法格式如下： <style type="text/css"> @import url(css文件路径); /*或@import "css文件路径";*/ /*在此还可以存放其他CSS样式*/ </style> 在上述语法格式中，<style>标签内还可以添加其他的内嵌样式。@import语句需要位于其他内嵌样式的前面，用于引入外部的CSS样式表。该语句后面可以使用URL的方式引入CSS样式表，也可以使用双引号的方式引入CSS样式表。如果对例2应用导入式CSS样式，则只需把HTML文档中的<link />语句替换成以下代码即可。 <style type="text/css"> @import url(style.css); </style> 或者 <style type="text/css"> @import "style.css"; </style> 虽然导入式和外链式功能基本相同，但是大多数网站都采用外链式引入外部CSS样式表。其主要原因是两者的加载时间和顺序不同。当一-个页面被加载时，外链式引入的CSS样式表将同时被加载，而导入式引入的CSS样式表会等到页面全部加载完后再开始加载。当用户的网速比较慢时，如果采用导入式引入CSS样式表，网页会先显示没有CSS修饰的效果，用户体验非常差。

4.CSS基础选择器

要想将CSS样式应用于特定的HTML元素，先要找到该元素。在CSS中，执行这一任务的样式规则被称为“选择器”。CSS中的基础选择器有标签选择器、类选择器、id选择器和通配符选择器4种，具体介绍如下。

（1）标签选择器

标签选择器是指用HTML标签名作为选择器，按照标签名分类，为页面中某一类标签指定统一的CSS样式。标签选择器的基本语法格式如下：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 在上述语法格式中，所有的HTML标签名都可以作为标签选择器。例如，body、h1、p、strong等。用标签选择器定义的样式对页面中该类型的所有标签都有效。下面演示使用<p>标签选择器定义HTML页面中所有段落的样式，具体代码如下： p{font-size:12px; color:#666; font-family:"微软雅黑";} 上述CSS样式代码用于设置HTML页面中所有的段落文本字号为12px、颜色为“#666”、字体为“微软雅黑”。标签选择器最大的优点是能快速为页面中同类型的标签统一样式，但这也是标签选择器的缺点，它不能定义差异化样式。

（2）类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。类选择器的基本语法格式如下： .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 在上述语法格式中，类名即为HTML元素class属性的属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为相同的HTML元素定义差异化的样式。下面通过一个案例来学习类选择器的使用，如例3所示。在例3中，第14行代码和第16行代码分别为标题标签<h2>和段落标签<p>添加类名class="green"，并通过类选择器设置文本颜色为绿色。第15行和第16行代码分别为段落标签添加类名class="font1"，并通过类选择器设置字号为22px。第15行代码还设置了另一个类名class="blue"，通过这个类名将文本颜色设置为蓝色。最后，通过标签选择器统一设置所有的段落字体为楷体，同时添加下画线。运行例3，效果如下图所示。在上图中、“静夜思”和“床前明月光”均显示为绿色，可见多个HTML元素可以使用同一个类名，这样可以为不同类型的HTML元素指定相同的样式。并且，同一个HTML元素也可以应用多个class类来设置不同的样式，多个类名之间只需用空格隔开。注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>类选择器</title> 6 <style type="text/css"> 7 .green{ color:green;} 8 .blue{ color:blue;} 9 .font1{ font-size:22px;} 10 p{font-family:"楷体"; text-decoration:underline;} 11 </style> 12 </head> 13 <body> 14 <h2 class="green">静夜思</h2> 15 <p class="blue font1">唐：李白</p> 16 <p class="green font1">床前明月光，</p> 17 <p>疑是地上霜。</p> 18 <p>举头望明月，</p> 19 <p>低头思故乡。</p> 20 </body> 21 </html>

（3）id选择器

id选择器使用“#”进行标识，后面紧跟id名。id选择器的基本语法格式如下： #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 在上述语法格式中，id名即为HTML元素id属性的属性值，大多数HTML元素都可以定义id属性，并且每个HTML元素id属性的属性值是唯一的，只能对应文档中某一个具体的HTML元素。下面通过一个案例来学习id选择器的用法，如例4所示。例4为4个<p>标签川时定义了id属性，并通过对应的id选择器设置加粗效果和文本字号。其中，第2个和第3个<p>标签的id属性的属性值相同，第4个<p>标签定义了两个id属性的属性值。运行例4，效果如下图所示。从上图可以看出、第1~3行文本都显示了定义的CSS样式，但最后一行文本虽然设置了两个id属性的属性值，却没有应用任何CSS样式。这是因为标签id属性的属性值具有唯一性，即id选择器并不像类选择器那样可定义多个值，所以类似“id="bold font24"”的写法是不允许的。注意：同一个id选择器也可以应用于多个标签，浏览器并不报错，但是这种做法是不允许的，因为JavaScript等脚本语言调用id选择器时会出错。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>id选择器</title> 6 <style type="text/css"> 7 #bold{font-weight:bold;} 8 #font24{ font-size:24px;} 9 </style> 10 </head> 11 <body> 12 <p id="bold">段落1：id="bold"，设置粗体文字。</p> 13 <p id="font24">段落2：id="font24"，设置字号为24px。</p> 14 <p id="font24">段落3：id="font24"，设置字号为24px。</p> 15 <p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p> 16 </body> 17 </html>

（4）通配符选择器

通配符选择器用“*”表示，它在所有选择器中作用范围最广，能匹配页面中所有的元素。通配符选器的基本语法格式如下： *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 例如，以下用于清除所有HTML标签的默认边距的实例代码就使用了通配符选择器。 *{ margin:0; /*定义外边距*/ padding:0; /*定义内边距*/ } 在实际制作网页时，不建议使用通配符选择器。因为使用通配符选择器设置的样式对所有的HTML元素都生效，这样反而降低了代码的执行速度。

任务3-2 CSS文本样式属性

需求分析

学习HTML时，可以使用文本样式标签和属性控制文本内容的显示样式，但是这种方式烦琐且不利于代码的维护。为此，CSS提供了文本样式属性。使用CSS文本样式属性可以方便地控制文本内容的显示样式。CSS文本样式属性包括CSS字体样式属性和CSS文本外观属性，下面将对这两种属性做详细讲解。

知识储备

1.CSS字体样式属性

为了更方便地控制网页中各种各样的字体，CSS提供了一系列的字体样式属性，具体如下。

（1）font-size属性：字号

font-size属性用于设置字号，该属性的属性值可以为像素值、百分比数值、倍率等。下表列举了font-size属性常用的属性值单位，具体如下。在上表所列的常用单位中，推荐使用像素值单位——px。例如，将网页中所有段落文本的字号设为12px，CSS样式示例代码如下： p{font-size:12px;}

（2）font-family属性：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如，将网页中所有段落文本的字体设置为微软雅黑，CSS样式示例代码如下： p{font-family:"微软雅黑"} font-family属性可以同时指定多个字体，各字体之间以逗号隔开。如果浏览器不支持第一种字体，则会尝试下一种，直到匹配到合适的字体。例如，同时指定3种字体的CSS样式示例代码如下： body{font-family:"华文彩云","宋体","黑讯";} 当应用上述代码后，浏览器会首选“华文彩云”字体，如果用户计算机上没有安装该字体则选择“宋体”。以此类推，当font-family属性指定的字体都没有安装时，浏览器就会选择用户计算机默认的字体。使用font-family属性设置字体时，需要注意以下几点。各种字体之间必须使用英文逗号隔开。中文字体需要加英文引号，但英文字体不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。CSS祥式示例代码如下： body{font-family:Arial,"微软雅黑","宋体","黑体";} /*正确的书写方式*/ body{font-family:"微软雅黑","宋体","黑体",Arial;} /*错误的书写方式*/ 如果字体名中包含空格、#、$等符号，则该字体必须加英文引号，如“font-family: "Times New Roman";”。尽量使用系统默认字体，以保证网页中的文字在任何用户的浏览器中都能正确显示。

（3）font-weight属性：字体粗细

font-weight属性用于定义字体的粗细、其属性值如下表所示。

（4）font-variant属性：变体

fout-variant属性用于设置英文字符的变体，一般用于定义小型大写字体，该属性仅对英文字符有效。font-variant属性的可用属性值如下。 normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写字母。但是所有使用小型大写字体的字母和其余文本相比，字体尺寸更小。例如，下图中框线标注的小型大写字母，就是使用font-variant属性设置的。

（5）font-style属性：字体风格

font-style属性用于定义字体风格。例如，设置斜体、倾斜或正常字体。font-style属性的可用属性值如下。 normal：默认值，浏览器会显示标准的字体样式。 italic：浏览器会显示斜体的字体样式。 oblique：浏览器会显示倾斜的字体样式。当font-style属性取值为italic或oblique时，文字都会显示倾斜的样式，两者在显示效果上并没有本质区别。但italic使用了字体的倾斜属性，并不是所有的字体都有倾斜属性；而oblique只是使文字倾斜，无关该字体有没有倾斜属性。

（6）font属性：综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器{font:font-style font-variant font-weight font-size/line-height font-family;} 使用font属性综合设置字体样式时，必须按上述语法格式中的顺序书写，各个属性以空格隔开（line-height）用于设置行间距，属于文本外观属性，在后面将具体介绍）。例如，下面设置字体样式的示例代码： p{font-family:Arial,"宋体"; font-size:30px; font-style:italic; font-weight:bold; font-variant:small-caps; line-height:40px;} 上述代码可以使用font属性综合设置字体样式，其等价于： p{font:italic small-caps bold 30px/40px Arial,"宋体";} 其中，不需要设置的属性可以省略（省略的属性将取默认值），但必须保留font-size和lfont-family属性，否则font属性将不起作用。下面通过一个案例具体演示如何使用font属性综合设置字体样式，如例5所示。在例5中，定义了两个段落，同时使用font属性分别对它们进行相应的设置。运行例5，效果如下图所示。从上图可以看出，font属性设置的样式并没有对第二个段落文本生效，这是因为对第二个段落文本的设置中省略了字体属性“font-family”。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>font属性</title> 6 <style type="text/css"> 7 .one{ font:italic 18px/30px "隶书";} 8 .two{ font:italic 18px/30px;} 9 </style> 10 </head> 11 <body> 12 <p class="one">段落1：使用font属性综合设置段落文本的字体风格、字号、行高和字体。</p> 13 <p class="two">段落2：使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family,这时font属性不起作用。</p> 14 </body> 15 </html>

（7）@font-face规则

@font-face是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，可以使用计算机未安装的字体。@font-face规则定义服务器字体的基本语法格式如下： @font-face{ font-fanily:字体名称; src:字体路径; } 在上述语法格式中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src用于指定该字体文件的路径。下面通过一个剪纸字体的案例来演示@font-face规则的具体用法，如例6所示。在例6中，第7~10行代码用于定义服务器字体；第12行代码用于为段落标签设置字体样式。运行例6，效果如下图所示。从上图可以看出，当定义并设置服务器字体后，页面就可以正常显示剪纸字体。总结例6，可以得出使用服务器字体的步骤。下载字体，并存储到相应的文件夹中。使用@font-face规则定义服务器字体。对元素应用“font-family”字体样式。注意：服务器字体定义完成后，还需要对元素应用“font-family”字体样式。注：以上描述称@font-face是用来定义“服务器字体”的，但即使没有使用服务器，只是把下载的字体放到html文件的同一目录下亦可成功使用。在CSS的@font-face规则中提到的“服务器”是一个泛指，它并不特指一个远程的Web服务器。实际上，@font-face规则允许你指定一个字体文件的来源，这个来源可以是本地文件系统中的路径（当你直接打开HTML文件在本地浏览器中查看时），也可以是网络上的一个URL（当HTML文件被部署在Web服务器上并通过网络访问时）。在本例中，字体文件（FZJZJW.TTF）被放到了HTML文件的同一目录下，然后通过url(FZJZJW.TTF)来引用它。当你直接在本地浏览器中打开这个HTML文件时，浏览器会在当前目录下查找这个字体文件并加载它。所以，即使你没有使用远程服务器，你仍然能够成功地使用@font-face规则来嵌入字体。然而，如果你打算将你的网页部署到一个Web服务器上，并通过网络来访问它，那么你就需要确保字体文件的URL是正确的，并且服务器配置允许字体文件被正确地访问和下载。在这种情况下，url()函数中的路径将会是一个相对于网站根目录的路径或者是一个完整的URL。因此，当你在教材或文档中看到“服务器字体”这样的表述时，它通常指的是可以通过网络访问的字体文件，而不一定是指一个特定的远程服务器。这包括了本地文件系统上的字体文件，只要它们能够被浏览器正确访问和加载。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>@font-face规则</title> 6 <style type="text/css"> 7 @font-face{ 8 font-family:jianzhi; /*服务器字体名称*/ 9 src:url(FZJZJW.TTF); /*服务器字体文件的路径*/ 10 } 11 p{ 12 font-family:jianzhi; /*设置字体样式*/ 13 font-size:32px; 14 } 15 </style> 16 </head> 17 <body> 18 <p>明确责任</p> 19 <p>肩负使命</p> 20 </body> 21 </html>

2.CSS文本外观属性

使用HTML可以对文本外观进行简单的控制，但是效果并不丰富。为此，CSS提供了一系列的文本外观属性，具体如下。

（1）color属性：文本颜色

color属性用于定义文本的颜色，属性值有以下3种。颜色英文单词。例如，red、green、blue等。十六进制颜色值。例如，#FF0000、#FF6600、#29D794等。在实际工作中，十六进制颜色值是最常用的方式，并且英文字母不区分大小写。 RGB颜色值。例如，红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

十六进制颜色值的缩写

十六进制颜色值是由#开头的6位十六进制数组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都相同时，可使用CSS缩写。例如，#FF6600可缩写为#F60，#FF0000可缩写为#F00，#FFFFFF可缩写为#FFF。

（2）letter-spacing属性：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白距离。letler-spacing 属性的属性值可以为不同单位的数值。在定义字问距时，letter-spacing属性的取值可以为负，其默认属性值为normal。例如，分别为h2和h3定义不同的字间距，示例代码如下： h2{letter-spacing:20px;} h3{letter-spacing:-0.5em;}

（3）word-spacing属性：单词间距

word-spacing属性用于定义英文单词之间的间距，该属性对中文字符无效。与letter-spacing属性一样，word-spacing属性的属性值也可以为不同单位的数值，并且允许使用负值，其默认属性值为normal。需要说明的是，word-spacing属性和letter-spacing属性均可对英文进行设置。不同的是，letter-spacing属性用于定义字母之间的间距，而word-spacing属性用于定义英文单词之间的间距。

（4）line-height属性：行间距

line-height属性用于设置行间距。所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。下图为文本的行高示例。在下图所示的行高示例中，背景颜色的高度即为这段文本的行高。line-height属性常用的属性值单位有3种，分别为像素（px）、倍率（em）和百分比（%），实际工作中使用最多的是像素（px）。

（5）text-transform属性：文本转换

text-transform属性用于转换英文字符的大小写，其可用属性值如下。 none：不转换（默认值）。 capitalize：首字母大写。 uppercase：全部字符转换为大写。 lowercase：全部字符转换为小写。

（6）text-decoration属性：文本装饰

text-decoration属性用于设置文本的下画线、上画线、删除线等装饰效果，其可用属性值如下。 none：没有装饰（正常文本默认值）。 underline：下画线。 overline：上画线。 line-through：删除线。 text-decoration属性可以赋多个值，各属性值之间使用空格分隔，用于为文本添加多种显示效果。例如，希望文字同时有下画线和删除线效果，就可以将underline和line-through同时赋值给text-decoration属性。

（7）text-align属性：水平对齐方式

text-align属性用于设置文本内容的水平对齐方式，相当于HTML中的align属性。text=align属性的可用属性值如下。 left：左对齐（默认值） right：右对齐。 center：居中对齐。例如，设置二级标题居中对齐、示例代码如下： h2{ text-align:center;} 注意： text-align属性仅适用于块级元素，对行内元素无效，关于块元素和行内元素，会在后面内容中具体介绍。如果需要为图像设置水平对齐，可以为图像添加一个父标签（如<p>或<div>标签），然后对父标签应用text-align属性，即可实现图像的水平对齐。

（8）text-indent属性：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为像素值、倍率或相对于浏览器窗口宽度的百分比数值。text-indent属性的属性值允许使用负数。在实际工作中，建议使用em作为设置单位。下面通过一个案例来学习text-indent属性的用法，如例7所示。在例7中，第1段文本没有设置首行缩进效果；第2段文本使用“text-indent:2em;”设置首行文本缩进两个字符；第3段文本使用“text-indent:50px;”设置首行文本缩进50px。运行例7，效果如下图所示。通过上图可以看出，段落文本显示了不同的缩进效果。text-indent属性的取值越大，缩进效果越明显。注意： text-indent属性仅适用于块级元素，对行内元素无效。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>text-indent属性</title> 6 <style type="text/css"> 7 p{font-family:"微软雅黑"; font-size:14px; color:red;} 8 .two{text-indent:2em;} 9 .three{text-indent:50px;} 10 </style> 11 </head> 12 <body> 13 <p class="one">段落1：这是正常显示的文本内容，并没有设置段落1文本的首行缩进效果。</p> 14 <p class="two">段落2：使用text-indent:2em;设置段落2文本首行缩进2个字符的效果。</p> 15 <p class="three">段落3：使用text-indent:50px;设置段落3文本首行缩进50像素的效果。</p> 16 </body> 17 </html>

（9）white-space属性：空白符处理

空白符是空格符、换行符等的统称。使用HTML制作网页时，无论源代码中有多少空格符、换行符，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式。white-space属性的常用属性值如下。 normal：常规（默认值），文本中的空格无效，满行（到达区域边界）后自动换行。 pre：按文档的书写格式保留空格、换行样式。 nowrap：强制文本不能换行，即使内容超出元素的边界也不换行，超出时浏览器页面则会自动增加滚动条。换行标签<br />可以强制换行，不受属性值nowrap的限制。

（10）text-shadow属性：阴影效果

text-shadow是CSS3新增属性，该属性可以为页面中的文本添加阴影效果。text-shadow属性的基本语法格式如下：选择器{text-shadow:h-shadow v-shadow blur color;} 在上述语法格式中，h-shadow用于设置水平阴影的距离；v-shadow用于设置垂直阴影的距离；blur用于设置模糊半径；color用于设置阴影颜色。下面通过一个案例来演示text-shadow属性的用法，如例8所示。在例8中，第9行代码用于为文字添加阴影效果，设置阴影的水平和垂直偏移距离为“10px”、模糊半径为“10px”、阴影颜色为红色。运行例8，效果如下图所示。通过上图可以看出，文本右下方出现了模糊的红色阴影效果。此外，当设置阴影的水平距离参数或垂直距离参数为负值时，可以改变阴影的投射方向。注意：阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>text-shadow属性</title> 6 <style type="text/css"> 7 p{ 8 font-size: 50px; 9 text-shadow:10px 10px 10px red; /*设置文字阴影的距离、模糊半径和颜色*/ 10 } 11 </style> 12 </head> 13 <body> 14 <p>Hello CSS3</p> 15 </body> 16 </html>

设置多个阴影叠加效果

可以使用text-shadow属性为文字添加多个阴影，从而产生阴影叠加效果。设置阴影叠加的方法非常简单，只需设置多组阴影参数，中间用英文逗号隔开。例如，想要为例8中的段落设置红色和绿色阴影叠加的效果．可以将<p>标签的样式进行如下更改。 p{ font-size:32px; text-shadow:10px 10px 10px red,20px 20px 20px green; /*红色和绿色的阴影叠加*/ } 在上述代码中，为文本依次指定了红色和绿色的阴影效果，并设置了相应的偏移距离和模糊数值，对应的效果如下图所示。

知识拓展

使用CSS定义背景颜色

在CSS中，HTML元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用颜色英文单词、十六进制颜色值或RGB颜色值。background-color属性的默认值为transparent，即背景透明。了解了背景颜色属性background-color后，下面通过一个案例演示使用CSS定义背景颜色的方法、如例9所示。在例9中，第18行和第19行代码用于在页面中添加标题和段落文本，然后通过background-color属性分别控制标题标签<h2>和段落标签<p>的背景颜色。运行例9，效果如下图所示。

例9

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS定义背景颜色</title> 6 <style type="text/css"> 7 h2{ 8 font-family:"微软雅黑"; 9 color:#FFF; 10 background-color:#F00; /*设置标题的背景颜色*/ 11 } 12 p{ 13 background-color:#9FC; /*设置段落的背景颜色*/ 14 } 15 </style> 16 </head> 17 <body> 18 <h2>网页设计课程上线了</h2> 19 <p>时下电商和UI的规范与制作流程迭代很快，我们提供最新的项目案例。</p> 20 </body> 21 </html>

任务 3-3 CSS高级特性

需求分析

要想使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，还需要学习CSS高级特性。CSS高级特性包括CSS复合选择器、CSS层叠性与继承性和CSS优先级，下面将对这些高级特性进行详细讲解。

知识储备

1.CSS复合选择器

书写CSS样式表时，可以使用CSS基础选择器选中HTML元素。但是在实际网站开发中，一个网页可能包含成千上万的HTML元素，如果仅使用CSS基础选择器是远远不够的。为此，CSS提供了几种复合选择器，实现了更强、更方便的选择功能。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。CSS复合选择器包括标签指定式选择器、后代选择器和并集选择器，具体介绍如下。

（1）标签指定式选择器

标签指定式选择器又称为“交集选择器”，由两个选择器构成，一个为标签选择器，另一个为class选择器或id选择器，两个选择器之间不能有空格，例如，“h3.special”或“p#one"。下面通过一个案例对标签指定式选择器做具体演示，如例10所示。例10分别定义了<p>标签和“.special”类的样式；此外，还单独定义了“p.spevial"，用于控制特殊显示的样式。运行例10，效果如下图所示。从上图可以看出，只有第二段文本变成了红色。由此可见，标签选择器p.special定义的样式仅适用于<p class="special">标签，而不会影响使用了special类名的其他标签。

例10

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>标签指定式选择器的应用</title> 6 <style type="text/css"> 7 p{ color:blue;} 8 .special{color:green;} 9 p.special{color:red;} /*标签指定式选择器*/ 10 </style> 11 </head> 12 <body> 13 <p>普通段落文本（蓝色）</p> 14 <p class="special">指定了.special类的段落文本（红色）</p> 15 <h3 class="special">指定了.special类的标题文本（绿色）</h3> 16 </body> 17 </html>

（2）后代选择器

后代选择器用于选择元素或元素组的后代，其定义方法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的“后代”。如果例10中的<p>标签内嵌套<strong>标签，就可以使用后代选择器对其中的<strong>标签进行控制，如例11所示。在例11中，定义了两个<stnong>标签，并将第一个<stong>标签嵌套在<p>标签中，然后分别设置<strong>标签和“p strong”的样式。运行例11，效果如下图所示。通过上图可以看出，第一段部分本文变成红色。由此可见，后代选择器p strong定义的样式仅适用于嵌套在<p>标签中的<strong>标签，其他的<stong>标签不受影响。需要说明的是，后代选择器不局限于应用在两个元素中，如果需要加入更多的元素，只需在元素之间加上空格即可。如果例11中的<strong>标签中还嵌套了一个<em>标签，要想控制这个<em>标签，可以使用“p strong em”选中该<em>标签。

例11

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 p strong{color:red;} /*后代选择器*/ 8 strong{color:blue;} 9 </style> 10 </head> 11 <body> 12 <p>段落文本<strong>嵌套在段落中，使用strong标签定义的文本（红色）。</strong></p> 13 <strong>嵌套之外由strong标签定义的文本（蓝色）。</strong> 14 </body> 15 </html>

（3）并集选择器

并集选择器的各个选择器通过英文逗号连接而成，任何形式的选择器（包括标签选择器、类选择器和id选择器），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，可以利用并集选择器为它们定义相同的CSS样式。如果在页面中有2个标题和3个段落且它们的字号和颜色相同，同时其中一个标题和两个段落文本有下画线效果，这时就可以使用并集选择器定义CSS样式，如例12所示。在例12中，使用不同标签组成的并集选择器“h2,h3,p”控制所有标题和段落的字号和颜色。然后，使用由标签选择器、类选择器、id选择器的并集选择器“h3,.special,#one”定义某些文本的下画线效果。运行例12，效果如下图所示。通过上图可以看出、使用并集选择器定义的样式与使用基础选择器单独定义的样式完全相同，而且这种方式书写的CSS代码更简洁、高效。

例12

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>并集选择器</title> 6 <style type="text/css"> 7 h2,h3,p{color:red; font-size:14px;} /*不同标签组成的并集选择器*/ 8 h3,.special,#one{text-decoration:underline;} /*标签选择器、类选择器、id选择器组成的并集选择器*/ 9 </style> 10 </head> 11 <body> 12 <h2>二级标题文本。</h2> 13 <h3>三级标题文本，加下画线。</h3> 14 <p class="special">段落文本1，加下画线。</p> 15 <p>段落文本2，普通文本。</p> 16 <p id="one">段落文本3，加下画线。</p> 17 </body> 18 </html>

2.CSS层叠性与继承性

CSS是层叠样式表的简称，层叠性和的承性是CSS的基本特征.。在网页制作中，合理利用CSS的层叠性和继承性能够简化代码结构，提升网页运行速度。下面将对CSS的层叠性和继承性进行详细讲解。

（1）层叠性

层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式定义<p>标签字号为12px，同时使用链式CSS样式定义<p>标签颜色为红色后，段落文本的字号为12px且颜色为红色，即这两种样式产生了叠加。下面通过一个案例使读者更好地理解CSS的层叠性，如例13所示。例13定义了2个<p>标签，并通过标签选择器统一设置段落的字号和字体，然后通过类选择器和id选择器为第二个<p>标签单独定义字体风格、颜色、加粗效果。运行例13，效果如下图所示。通过上图可以看出，第二段文本显示了标签选择器“p”定义的字体“微软雅黑”，id选择器“#one”定义的文本绿色、加粗效果，类选择器“.specal”定义的字体倾斜效果，由此可见这3个选择器定义的CSS样式产生了叠加。

例13

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS层叠性</title> 6 <style type="text/css"> 7 p{font-size:18px; font-family:"微软雅黑";} 8 .special{font-style:italic;} 9 #one{color:green; font-weight:bold;} 10 </style> 11 </head> 12 <body> 13 <p>离离原上草，一岁一枯荣。</p> 14 <p class="special" id="one">野火烧不尽，春风吹又生。</p> 15 </body> 16 </html>

（2）继承性

继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。例如，定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面中其他的标签都嵌套在<body>标签中，是<body>标签的子标签。这些子标签继承了父标签<body>的属性。继承性非常有用，它使设计师不必在父标签的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父标签即可。例如，以下代码： p,div,h1, h2,h3,h4,ul,ol,dl,li{color:black;} 上述代码可以改写成如下内容： body{color:black;} 第二种写法可以达到相同的控制效果，且代码更加简洁。恰当地使用CSS继承性可以简化代码。但是如果网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难。所以，在实际工作中，网页通用的全局样式可以进行继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承性控制文档中的文本。其他元素可以使用CSS选择器单独设置。并不是所有的CSS属性都可以继承，例如、以下这些属性就不具有继承性。边框属性。外边距属性。内边距属性。背景属性。定位属性。布局属性。元素宽高属性。注意：标题标签不会采用<body>标签设置的字号，这是因为标题标签默认字号样式覆盖了继承的字号。

3.CSS优先级

定义CSS样式时，经常出现两个或更多样式规则应用在同一元素上的情况。此时CSS就会根据样式规则的权重，优先显示权重最高的样式。CSS优先级是指CSS样式规则的权重。在网页制作中，CSS为每个基础选择器都指定了不同的权重，以便于添加样式代码。为了深入理解CSS优先级，下面将通过一段示例代码进行分析，具体CSS样式代码如下： p{ color:red;} /*标签样式*/ .blue{ color:green;} /*class样式*/ #header{ color:blue;} /*id样式*/ CSS样式代码对应的HTML结构如下： <p id="header" class="blue"> 帮帮我，我到底显示什么颜色? </p> 在上述示例代码中，使用不同的选择器为同一个元素设置文本颜色，这时浏览器会根据CSS选择器的优先级规则解析CSS样式。为了便于判断元素的优先级，CSS为每一种基础选择器都分配了一个权重，可以通过虚拟数值的方式为这些基础选择器匹配权重。假设标签选择器的权重为1，类选择器的权重为10，id选择器的权重为100。这样id选择器“#header”就具有最大的优先级，因此文本显示为蓝色。对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重可以理解为这些基础选择器权重的叠加。例如，以下CSS样式代码： p strong{color:black} /*权重为:1+1*/ strong.blue{color:green;} /*权重为:1+10*/ .father strong{color:yellow} /*权重为:10+1*/ p.father strong{color:orange;} /*权重为:1+10+1*/ p.father .blue{color:gold;} /*权重为:1+10+10*/ #header strong{color:pink;} /*权重为:100+1*/ #header strong.blue{color:red;} /*权重为:100+1+10*/ 对应的HTML结构如下： <p class="father" id="header" > <strong class="blue">文本的颜色</strong> </p> 这时，CSS代码中“#header strong.blue”选择器的权重最高，文本颜色将显示为红色。此外，在考虑权重时，还需要注意以下一些特殊的情况。继承样式的权重为0。在嵌套站构中，不管父标签样式的权重多大，被子标签继承时，它的权重都为0。也就是说，子标签定义的样式会覆盖继承来的样式。例如、以下CSS样式代码： strong{color:red;} #header{color:green;} 上述CSS样式代码对应的HTML结构如下： <p id="header" class="blue"> <strong>继承样式不如自己定义</strong> </p> 在上述代码中，虽然“#header”具有权重100，但被<strong>标签继承时权重为0。而“strong”的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。行内式优先。应用style属性的元素，其行内式的权重非常高。换作数值，可以理解为远大于100。因此，行内式拥有比上面提到的选择器更高的优先级。权重相同时，CSS的优先级遵循就近原则。也就是说，靠近元素的样式具有最大的优先级，或者说按照代码排列上下顺序、排在最下边的样式优先级最大。例如，外部定义的CSS示例代码如下： /*CSS文档，文件名为style_red.css*/ #header{color:red;} /*外部样式*/ 其对应的HTML结构代码如下： 1 <title>css优先级</title> 2 <link rel="stylesheet" href="style_red.css" type="text/css"/> /*引入外部定义的CSS代码*/ 3 <style type="text/css"> 4 #header{color:gray;} /*内嵌式样式*/ 5 </style> 6 </head> 7 <body> 8 <p id="header">权重相同时，就近优先</p> 9 </body> 在上述示例代码中，第2行代码通过外链式引入CSS样式，该样式设置文本样式显示为红色。第3~5行代码通过内嵌式引入CSS样式，该样式设置文本样式显示为灰色。上面的页面被解析后，段落文本将显示为灰色，即内嵌式样式优先。这是因为内嵌式比外链式样式更靠近HTML元素。同理，如果同时引用两个外部样式表，则排在下面的样式表具有较大的优先级。如果将内嵌式样式更改为如下代码： p{color:gray;} /*内嵌式样式*/ 此时，外链式的id选择器和内嵌式的标签选择器权重不同，“#header”的权重更高，文字将显示为外部样式定义的红色。 CSS定义!important命令时，会被赋予最大的优先级。当CSS定义了!important命令后，将不再考虑权重和位置关系，使用!important命令的标签都具有最大优先级。示例代码如下： #header{color:red!important;} 应用此样式的段落文本显示为红色，因为!important命令的样式拥有最大的优先级。需要注意的是，!important命令必须位于属性值和分号之间，否则无效。复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。下面通过一个案例来具体说明，如例14所示。例14共使用了11个<div>标签，它们层层嵌套，为最里层的<div>标签定义类名“inner”。第7行和第8行代码使用类选择器和后代选择器分别定义最里层<div>标签的样式。此时浏览器中文本的样式到底如何显示呢？如果仅仅将基础选择器的权重相加，后代选择器（包含11层<div>标签）的权重为11，大于类选择器“.inner”的权重10、文本将添加下画线。运行例14，效果如下图所示。在上图中，文本并没有像预期的那样添加下画线，而显示了类选择器“.inner”定义的删除线。由此可见，无论在外层添加多少个<div>标签，由这些标签选择器构成的复合选择器的权重都不会高于类选择器。同理，无论有多少个类选择器和标签选择器，这些类选择器和标签选择器构成的复合选择器的权重都不会高于id选择器。

例14

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>复合选择器权重的叠加</title> 6 <style type="text/css"> 7 .inner{text-decoration:line-through;} /*类选择器定义删除线，权重为10*/ 8 div div div div div div div div div div div{text-decoration:underline;} 9 /*后代选择器定义下画线，权重为11个1的叠加*/ 10 </style> 11 </head> 12 <body> 13 <div> 14 <div><div><div><div><div><div><div><div><div> 15 <div class="inner">文本的样式</div> 16 </div></div></div></div></div></div></div></div></div> 17 </div> 18 </body> 19 </html>

任务3-4 页面建设准备工作

在制作“网上花店”专题页之前，小思需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。

网站素材整理

网站素材整理主要包括建立网站站点和“网上花店”专题页切图，具体介绍如下。

1.建立网站站点

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本项目在“D盘：\案例源码\chapter03”文件夹中新建一个文件夹作为网站根目录，并命名为“flower”。

（2）在根目录下新建文件

打开网站根目录“flower”，在根目录下新建“images”和“css”文件夹，分别用于存放网站所需的图像和CSS文件。

（3）在Dreamweaver中新建站点

打开Dreamwraver，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称。浏览并选择站点根目录的存储位置，单击“保存”按钮，完成站点的建立。

2.“网上花店”专题页切图

使用Fireworks CS6的“切片”工具进行切图，导出“网上花店”专题页中的素材图片，并存储在站点中的“images”文件夹中，如下图所示。

页面结构分析

1.HTML结构分析

“网上花店”专题页从上到下可以分为“标题”模块、“分类”模块、“热卖”模块、“页脚”模块4部分。“网上花店”专题页页面结构如下图所示。

2.CSS样式分析

页面主要由背景、文字、图片组成。其中，背景颜色为浅灰色（#ededed）。文字主要由标题文字和内容文字组成，标题字体为“微软雅黑"，内容字体为“楷体”。可以使用CSS设置字号、字体、颜色等样式。图片可以使用相应的素材，在页面中设置位置即可。

定义基础样式

1.页面布局

下面对“网上花店”专题页进行整体布局。在站点根目录下新建一个HTML文件，并命名为“project03.html”，然后使用<div>标签对页面进行布局，具体代码如project03.html所示。

project03.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>网上花店</title> 6 </head> 7 <body> 8  9 <div class="header"></div> 10  11  12 <div class="fenlei"></div> 13  14  15 <div class="bestseller"></div> 16  17  18 <div class="shouhou"></div> 19 <div class="boss"></div> 20  21 </body> 22 </html> 在上述代码中，类名为“header”“fenlei”“bestseller”的3个<div>标签分别用于定义“标题”模块、“分类”模块和“热卖”模块，“页脚”模块内部嵌套的两个<div>标签分别用于定义“品质保障”子模块和“店主信息”子模块。

2.公共样式设置

在站点根目录下的CSS文件夹内新建样式表文件style03.css，使用外链式在project03.html文件中引入CSS样式表文件，然后，定义页面的公共样式，具体代码如下： 1 /*重置浏览器的默认样式*/ 2 *{margin:0; padding:0;} 3 /*全局控制*/ 4 body{ background-color:#ededed; font-family:"楷体"; font-size:16px; color:#a5a5a5;} 在上述代码中，第2行代码用于清除浏览器的默认样式；第4行代码用于定义页面公共样式。

任务3-5 制作“标题”模块

效果分析

1.结构分析

“标题”模块由标题内容和水平线组成。标题内容使用<h1>标签定义，其中的主标题和副标题分别通过在<h1>标签中嵌套<strong>标签、<em>标签来定义；水平线通过<hr>标签定义。“标题”模块的结构如下图所示。

2.样式分析

在整个页面中，“标题”模块水平居中显示，且字体为“微软雅黑”。主标题和副标题的字号需通过CSS样式单独控制。

模块制作

1.搭建结构

在project03.html文件内书写“标题”模块的HTML代码，具体如下：  <div class="header"> <h1><strong>彼岸の花</strong><em>偏安一隅静静生活</em></h1> <hr size="2" color="#d1d1d1" width="980px"/> </div>

2.控制样式

在样式表文件style03.css中书写CSS样式代码，用于控制“标题”模块，具体如下： 1 .header{ 2 width:980px; 3 margin:0 auto 7px; 4 height:86px; 5 line-height:86px; 6 text-align:center; 7 font-family:"微软雅黑"; 8 color:#a5a5a5; 9 } 10 .header h1{ font-weight:normal;} 11 .header strong{ 12 font-weight:normal; 13 font-size:30px; 14 } 15 .header em{ 16 font-style:normal; 17 font-size:14px; 18 } 在上述代码中，第3行代码用于定义“标题”模块在页面中水平居中显示，第6行代码用于定义“标题”模块中的文本水平居中；第10、12、16行代码分别用于清除<h1>标签、<strong>标签、<em>标签默认的样式。

概要

保存project03.html与style03.css文件，刷新页面，效果如下图所示。

任务3-6 制作“分类”模块

效果分析

1.结构分析

“分类”模块由分类标题、商品展示banner和段落文本3部分构成。其中，分类标题可使用<h2>标签定义，商品展示banner可使用<img>标签定义，段落文本可使用<p>标签定义。"分类”模块的结构如下图所示。

2.样式分析

分类标题的字体为“微软雅黑”，且文本垂直居中。商品展示banner为图片，需要设置居中显示。段落文本字体为“楷体”，有一定的行间距，且文本水平居中。

模块制作

1.搭建结构

在project03.html文件内书写“分类”模块的HTML代码，具体如下： 1  2 <div class="fenlei"> 3 <h2>商品分类</h2> 4 <img src="images/banner.jpg" alt="网上花店"/> 5 <br /><br /> 6 <p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...</p> 7 <p>I love flowers, quietly open, never disclose. Little flowers, with the different 8 fragrance...</p> 9 <br /> 10 </div> 11  在上述代码中，第5行代码使用两个换行标签<br />来实现商品展示banner与段落文本间的留白；第9行代码同样使用了<br />标签，使“分类”模块与其下面的模块之间有一定的留白。

2.控制样式

在样式表文件style03.css中书写CSS样式代码，用于控制“分类”模块，具体如下： 1 .fenlei{ 2 width:980px; 3 margin:0 auto; 4 } 5 .fenlei h2{ 6 font-size:14px; 7 font-family:"微软雅黑"; 8 color:#a5a5a5; 9 height:42px; 10 line-height:42px; 11 } 12 .fenlei p{ 13 line-height:30px; 14 text-align:center; 15 font-size:18px; 16 } 在上述代码中，第9行和第10行代码用于定义分类标题文本垂直居中；第13行代码用于设置段落文本的行间距；第14行代码用于定义段落文本水平居中。

概要

保存project03.html与style03.css文件，刷新页面，效果如下图所示。

任务3-7 制作“热卖”模块

效果分析

1.结构分析

“热卖”模块由导航图片、热卖展示图片和文本介绍3部分组成。其中，导航图片和热卖展示图片均可使用<img>标签定义，文本介绍部分可使用<p>标签定义，添加下画线的文本使用<em>标签定义。“热卖”模块的结构如下图所示。

2.样式分析

导航图片、热卖展示图片可以直接使用图片素材，为图片设置居中显示的样式。文本介绍段落之间有一定的行间距，且段首有2个字符的缩进。此外，段落中有一部分文本带有下画线效果。

模块制作

1.搭建结构

在projet03.html文件内书写“热卖”模块的HTML代码，具体如下：  <div class="bestseller"> <img src="images/bestseller1.png" alt="" /> <br /><br /> <img src="images/bestseller2.jpg" alt="" /> <br /><br /> <p class="txt">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p> <p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p> <br /> </div>  在上述代码中，<br>标签用于使页面中各个元素之间有一定的留白效果。

2.控制样式

在样式表文件style03.css中书写CSS样式代码，用于控制“热卖”模块，具体如下： 1 .bestseller{ 2 width:602px; 3 margin:0 auto; 4 } 5 .bestseller .txt{ 6 line-height:30px; 7 text-indent:2em; 8 } 9 .bestseller .txt em{ 10 font-style:normal; 11 text-decoration:underline; 12 } 在上述代码中，第3行代码用于定义“热卖”模块在页面中水平居中显示；第5~8行代码用于定义段落文本的行高和2个字符的缩进；第9~12行代码用于定义下画线文本。

概要

保存project03.html与style03.css文件，刷新页面，效果如下图所示。

任务3-8 制作“页脚”模块

效果分析

1.结构分析

“页脚”模块分为品质保障和店主信息两个部分。品质保障部分是一行文字，直接使用<p>标签定义。店主信息部分主要由标题、图片和段落组成。其中，标题由<h3>标签定义，图片由<img>标签定义，段落由<p>标签定义。“页脚”模块的结构如下图所示。

2.样式分析

控制“页脚”模块的样式主要是控制文本样式。其中，品质保障部分的字体为“微软雅黑”。店主信息部分的标题与段落文本前均有2个字符的缩进，标题文本不加粗，段落文本需要设置行高和斜体。

模块制作

1.搭建结构

在project03.html文件中书写“页脚”模块的HTML结构代码，具体如下： 1  2 <div class="shouhou"> 3 <p>品质保障  |  七天无理由退换货  |  特色服务体验  |  帮助中心</p> 4 </div> 5 <div class="boss"> 6 <img src="images/tuxiang.gif" alt="网上花店" align="left"/> 7 <h3>店主：Michael_唐僧</h3> 8 <p>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！</p> 9 <p>也许这只是秋季里的一场游戏。</p> 10 <br /><br /><br /> 11 </div> 12  在上述代码中，第6行代码中的“align="left"”用于使店主头像在页面中靠左排列，从而产生头像居左、文本居右的图文混排效果。

2.控制样式

在样式表文件style03.css中书写CSS样式代码、用于控制“页脚”模块，具体如下： 1 .shouhou{ 2 width:602px; 3 margin:0 auto; 4 text-align:center; 5 font-family:"微软雅黑"; 6 font-size:16px; 7 font-weight:bold; 8 } 9 .boss{ 10 width:602px; 11 margin:0 auto; 12 } 13 .boss h3,.boss p{ text-indent:2em;} 14 .boss h3{ 15 height:30px; 16 line-height:30px; 17 font-family:"微软雅黑"; 18 font-size:18px; 19 font-weight:normal; 20 } 21 .boss p{ 22 font-style:italic; 23 line-height:26px; 24 font-size:14px; 25 }

概要

保存project03.html与style03.css文件，刷新页面，效果如下图所示。

项目4 “爱家居”企业网站首页制作

知识目标

了解盒子模型的概念，能够举例描述盒子模型结构。掌握元素的类型，能够归纳不同元素类型的特点。熟悉常见的布局类型，能够总结不同类型布局的差异。

技能目标

掌握使用盒子模型相关属性设置不同的盒子模型样式的方法。掌握使用浮动和定位属性对页面进行布局的方法。掌握清除元素浮动的方法。

项目描述

在互联网时代，企业网站因其具有方便、快捷和低成本的优势，被越来越多的企业所使用。企业网站作为企业宣传品牌、展示服务与产品的平台，在营销活动中起到了至关重要的作用。“爱家居”是一家从事线下家居销售的店铺，最近“爱家居”经理老王找到小思，想请小思帮忙制作一个企业网站。通过前面两个页面的制作，小思已经掌握了HTML与CSS的基础。接到老王的委托后，小思先制订了这段时间的学习计划，包括盒子模型、元素的类型与转换、元素的浮动与定位等网页布局的基础知识。之后便开始动手制作“爱家居”企业网站。由于篇幅限制，本项目只讲解“爱家居”企业网站首页的制作过程。“爱家居”企业网站首页的效果如下图所示。

任务4-1 认识盒子模型

需求分析

盒子模型是网页布局的基础，读者只有掌握了盒子模型的各种规律，才可以更好地控制网页中各个元素。下面将带领大家认识盒子模型。

知识储备

在浏览网站时，会发现页面的内容都是按照区域划分的。页面中的每一块区域分别承载不同的内容。因此，网页的内容虽然零散，但在版式排列上依然清晰有条理，如下图所示的“优设”网站页面。在上图所示的“优设”网站页面中，这些承载内容的区域被称为“盒子模型”。盒子模型就是把页面中的HTML元素看作一个方形的盒子、也可以理解为一个盛装内容的容器。每个盒子（容器）都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。为了更形象地认识盒子模型，先从生活中常见的手机盒子的构成说起。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。如果把手机想象成HTML元素，那么手机盒子就是一个盒子模型，其中，手机为盒子模型的内容、填充泡沫的厚度为盒子模型的内边距、纸盒的厚度为盒子模型的边框。当多个手机盒子放在一起时，它们之间的距离就是盒子模型的外边距。下图所示为手机盒子的构成。网页中所有的块元素（关于块元素的介绍详见【任务4-4】）都是由上图所示的基本结构组成的，并呈现出盒子模型的效果。网页就是由多个盒子模型嵌套排列组成的。在盒子模型的基本结构中，内边距出现在内容区域的周围，当为盒子模型添加背景颜色或背景图像时，该盒子模型的背景颜色或背景图像也将出现在内边距中；外边距是当前盒子模型与相邻盒子模型之间的距离，如果为元素定义了边框属性，边框效果将显示在内边距和外边距之间。注意：虽然盒子模型拥有内边距、边框、外边距、宽度和高度这些基础属性，但是并不要求每个盒子模型都必须定义这些属性。

任务4-2 盒子模型基础属性

需求分析

盒子模型的基础属性包括边框属性、内边距属性、外边距属性、背景属性、宽度属性和高度属性。通过设置这些属性可使HTML元素的表现形式更加多样化。下面将带领大家认识盒子模型的基础属性。

知识储备

1.边框属性

为了分割页面中不同的盒子，常常需要为元素设置边框效果。在CSS中，可以设置单侧边框（上边框、下边框、左边框、右边框）的样式属性、宽度属性、颜色属性，也可以综合设置边框的这些属性。设置边框属性的具体方法如下表所示。上表中列出了设置边框属性的具体方法，对于读者来说比较难以理解和记忆。下面将按照边框样式、边框宽度、边框颜色、综合设置边框的分类方式，对这些设置边框属性的方法进行具体讲解。

（1）边框样式

边框样式用于定义页面中边框的风格，在CSS属性中，border-style属性用于设置边框样式，其常用属性值如下。 none：没有边框，即忽略所有边框的宽度，这是默认值。 solid：边框为单实线。 dashed：边框为虚线。 dotted：边框为点线。 double：边框为双实线。例如，想要定义边框显示为双实线，其CSS代码如下： border-style:double; 在设置边框样式时，还可以对盒子的单边进行设置，其具体语法格式如下： border-top-style:上边框样式; border-right-style:右边框样式; border-bottom-style:下边框样式; border-left-style:左边框样式; 同时，为了避免代码冗余，也可以综合设置四条边的样式，各属性值用空格分开，其具体语法格式如下： border-style:上边框样式右边框样式下边框样式左边框样式; border-style:上边框样式左右边框样式下边框样式; border-style:上下边框样式左右边框样式; border-style:上下左右边框样式; 在综合设置边框样式时，边框样式的属性值可以设置1~4个。当设置4个属性值时，边框样式的写法会按照上边框、右边框、下边框、左边框的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边框的样式。例如，设置3个属性值时，边框样式的写法为上边框、左右边框、下边框；设置2个属性值时，边框样式的写法为上下边框和左右边框；设置1个属性值时，4条边框共用一个样式。了解了边框样式的相关属性后，下面通过一个案例进行具体演示。新建HTML页面，并在页面中添加标题和段落文本，然后通过边框样式属性控制标题和段落的边框效果，如例1所示。在例1中，标题只设置边框样式属性；类名为“one”的文本使用单边框属性设置样式；类名为“two”的文本使用综合边框属性设置样式。运行例1，在谷歌浏览器中的边框样式预览效果如下图所示。由于兼容性问题，在不同的浏览器中点线（dotted）和虚线（dashed）的显示样式可能会略有差异。下图所示为例1在火狐浏览器中的预览效果，其中虚线（dashed）显示效果要比在谷歌浏览器中显示得更稀疏。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>边框样式</title> 6 <style type="text/css"> 7 h2{ border-style:double;} /*四条边框相同——双实线*/ 8 .one{ 9 border-top-style:dotted; /*上边框——点线*/ 10 border-bottom-style:dotted; /*下边框——点线*/ 11 border-left-style:solid; /*左边框——单实线*/ 12 border-right-style:solid; /*右边框——单实线*/ 13 /*上面4行代码等价于：border-style:dotted solid;*/ 14 } 15 .two{ 16 border-style:solid dotted dashed; /*上边框实线、左右边框点线、下边框虚线*/ 17 } 18 </style> 19 </head> 20 <body> 21 <h2>四条边框为双实线</h2> 22 <p class="one">上边框和下边框为点线，左边框和右边框为单实线</p> 23 <p class="two">上边框为单实线，左边框和右边框为点线，下边框为虚线</p> 24 </body> 25 </html>

（2）边框宽度

border-width属性用于设置边框的宽度，其常用取值单位为像素（px）。与边框样式一样，也可以针对四条边框分别设置不同的宽度，或综合设置四条边框的宽度，其具体语法格式如下： border-top-width: 上边框宽度; border-right-width: 右边柜宽度; border-bottom-width: 下边框宽度; border-left-width: 左边框宽度; border-width: 上边框宽度 [右边框宽度下边框宽度左边框宽度]; 综合设置四条边框的宽度时，必须按上边框、右边框、下边框、左边框的顺时针顺序书写。当设置1个属性值时，同时设置四条边框宽度；当设置两个属性值时，表示分别设置上下边框宽度和左右边框宽度；当设置了三个属性值时，表示分别设置上边框宽度、左右边框宽度、下边框宽度。了解了边框宽度属性后，下面通过一个案例进行具体演示。新建HTML页面，并在页面中添加段落文本，然后通过边框宽度属性对段落进行控制，如例2所示。在例2中，第8行代码用于综合设置四条边框的宽度；第9行代码单独设置上边框宽度，使上边框的宽度与其他边框不同。运行例2，效果如下图所示。在上图中，段落文本并没有像预期的一样添加边框效果。这是因为在设置边框宽度时，没有设置边框样式。如果未设置边框样式或设置边框样式的属性值为none，则不论边框宽度设置为多少，页面都不会显示边框效果。在例2的CSS代码中，为<p>标签添加边框样式，具体代码如下： border-style:solid; 保存HTML文件，刷新网页，效果如下图所示。在上图中，段落文本添加了预期的边框效果。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>边框宽度</title> 6 <style type="text/css"> 7 p{ 8 border-width:1px; /*综合设置四条边框宽度*/ 9 border-top-width:3px; /*设置上边框宽度覆盖*/ 10 /*上面2行代码等价于：border-width:3px 1px 1px; */ 11 } 12 </style> 13 </head> 14 <body> 15 <p>上边框为3px，下边框、左边框、右边框均为1px。边框样式为单实线。</p> 16 </body> 17 </html>

（3）边框颜色

border-color属性用于设置边框的颜色。border-color属性的属性值可为颜色英文单词（例如，red、blue）、十六进制颜色值（例如，#ff0000、#f00）或RGB模式rgb(r,g,b)（例如，rgb(0,255,0)），实际工作中最常用的是十六进制颜色值。边框的默认颜色为元素的文本颜色，对于没有文本的元素（例如，只包含图像的表格），其默认边框颜色为父元素的文本颜色。边框颜色的设置方式与边框样式和宽度类似，对四条边框分别设置不同的颜色，以及综合设置四条边框的颜色的方式如下。 border-top-color:上边框颜色; border-right-color:右边框颜色; border-bottom-color:下边框颜色; border-left-color:左边框颜色; border-color:上边框频色 [右边框颜色下边框颜色左边框颜色]; 综合设置四条边框颜色时必须按顺时针顺序采用值复制原则。例如，设置段落的边框样式为实线，上下边框颜色为灰色，左右边框颜色为红色，示例代码如下： p{ border-style:solid; /*综合设置边框样式*/ border-color:#ccc #ff0000; /*设置边框颜色，两个值为上下边框和左右边框的颜色*/ } 再如，设置二级标题的边框样式为实线，且下边框为红I色，其余边框采用默认文本的颜色，示例代码如下： h2{ border-style:solid; /*综合设置边框样式*/ border-bottom-color:red; /*单独设置下边框颜色*/ } 注意：使用RGB模式设置颜色时，如果括号里面的数值为百分比数值，必须把“0”也加上百分号，写作“0%”。

巧用边框透明色（transparent）

在为元素添加边框时，如果需要将已有的边框设置为不可见，可使用“border-color:transparent;”样式，此时边框显示透明色。当需要边框可见时，再设置相应的颜色即可。通过这种设置方式可以保证元素的区域不发生变化。边框透明样式和取消边框样式不同，取消边框样式时，虽然边框也不可见，但是边框的宽度为0。

（4）综合设置边框

使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种方式的代码烦琐，且不便于阅读。为此，CSS提供了综合设置边框的方式，其具体语法格式如下： border-top:上边框宽度样式颜色; border-right:右边框宽度样式颜色; border-bottom:下边框宽度样式颜色; border-left:左边框宽度样式颜色; border:四边宽度样式颜色; 上述设置方式将边框的宽度、样式、颜色放在一行代码中，从而简化了代码。边框的宽度、样式、颜色顺序任意。可以只指定需要设置的属性，省略的部分将取默认值，但边框样式不能省略。当每一侧的边框样式都不同，或者只需单独定义某一侧的边框样式时，可以使用单侧边框的综合设置样式属性border-top、border-bottom、border-left或border-right。例如，单独定义段落的上边框，示例代码如下： p{border-top:2px solid #ccc;} /*定义上边框，各个值顺序任意*/ 该样式将段落的上边框设置为2px、单实线、灰色，其他各边的边框取默认值不可见，这段代码等价于如下内容： p{ border-top-style:solid; border-top-width:2px; border-top-color:#ccc; } 当四条边框的边框样式都相同时，可以使用border属性进行综合设置。例如，将二级标题的边框设置为3px、双实线、红色，示例代码如下： h2{border:3px double red;} 在CSS中能够定义元素的多种样式的属性，称为复合属性，例如，border、borler-top等属性。常用的复合属性有font、border、margin、padding和background等。实际工作中常会用到复合属性，它可以简化代码，提高页面的运行速度。但是如果只设置一个属性值，则最好不要应用复合属性，以免样式不被兼容。为了使读者更好地理解复合属性，下面对标题、段落和图像分别应用border相关的复合属性设置边框，如例3所示。在例3中，第7～16行代码使用边框的单侧复合属性设置二级标题和段落文本；第18行代码使用复合属性border为图像设置各边框。运行例3，效果如下图所示。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>综合设置边框</title> 6 <style type="text/css"> 7 h2{ 8 border-bottom:5px double blue; /*使用border-bottom复合属性设置下边框*/ 9 text-align:center; 10 } 11 .text{ /*使用单侧复合属性设置各边框*/ 12 border-top:3px dashed #F00; 13 border-right:10px double #900; 14 border-bottom:3px dotted #CCC; 15 border-left:10px solid green; 16 } 17 .pingmian{ /*使用border复合属性设置各边框相同*/ 18 border:15px solid #CCC; 19 } 20 </style> 21 </head> 22 <body> 23 <h2>设置边框属性</h2> 24 <p class="text">该段落使用单侧边框的复合属性，分别给上、右、下、左四条边框设置不同的样式。</p> 25 <img class="pingmian" src="tu.png" alt="图片" /> 26 </body> 27 </html>

2.内边距属性

在网页设计中，设计师为了调整内容在盒子中的显示位置，经常需要为元素设置内边距。内边距是指元素内容与边框之间的距离，也被称为内填充。在CSS中，padding属性用于设置内边距，与边框属性border一样，padding属性也是复合属性。padding属性的具体语法格式如下： padding-top:上内边距; padding-right:右内边距; padding-bottom:下内边距; padding-left:左内边距; padding:上内边距 [右内边距下内边距左内边距]; 在上面的设置中，padding相关属性的取值可为auto（表示自适应，是CSS默认属性值）、不同单位的数值（例如，像素值、倍率等）、相对于父元素或浏览器宽度的百分比数值等。实际工作中最常用的是像素值。需要注意的是，padding属性的属性值不允许使用负数。与边框属性一样，使用padding属性定义内边距时，必须按顺时针顺序采用值复制原则，即1个值为四边边距，2个值分别为上下边距、左右边距，3个值分别为上边距、左右边距、下边距。下面通过一个案例来演示内边距属性padding的用法和效果。新建HTML页面，在页面中添加一个图像和一段段落，并使用padding属性控制它们的显示位置，如例4所示。在例4中，第9行、第10行和第13行代码使用padding属性设置图像和段落的内边距、其中，段落内边距使用百分比数值。运行例4，效果如下图所示。由于段落的内边距设置为百分比数值，当拖动浏览器窗口改变其宽度时，段落的内边距也会随之发生变化，此时<p>标签的父元素为<body>标签。注意：内边距所设置的百分比数值都是相对于父元素宽度width 的百分比数值，随父元素宽度width的变化而变化，与高度height无关。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>内边距属性</title> 6 <style type="text/css"> 7 .border{border:5px solid #ccc;} /*为图像和段落设置边框*/ 8 img{ 9 padding:80px; /*为图像设置上、下、左、右相同的内边距*/ 10 padding-bottom:0; /*单独设置下边距*/ 11 /*上面两行代码等价于padding:80px 80px 0;*/ 12 } 13 p{padding:5%;} /*段落内边距为父元素宽度的5%*/ 14 </style> 15 </head> 16 <body> 17 <img class="border" src="padding_in.png" alt="内边距" /> 18 <p class="border">段落内边距为父元素宽度的5%。</p> 19 </body> 20 </html>

3.外边距属性

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。外边距指元素边框与相邻元素之间的距离。在CSS中，margin属性用于设置外边距，它是一个复合属性，与内边距属性padding的用法类似。margin属性的具体语法格式如下： margin-top:上外边距; margin-right:右外边距; margin-bottom:下外边距; margin-left:左外边距; margin:上外边距 [右外边距下外边距左外边距]; margin属性的取值遵循值复制的原则，其取值的方式与padding属性相同，但是margin属性的属性值可以使用负数，使设置外边距的元素与相邻元素发生重叠。当对块级元素应用宽度属性width，并将左侧和右侧的margin属性的属性值都设置为auto时，可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下： .header{width:960px; margin:0 auto;} 下面通过一个案例来演示外边距属性margin的用法和效果。新建HTML页面，在页面中添加一个图像和一段文本，然后使用margin相关属性，对图像和段落进行排版，如例5所示。在例5中，第9行代码使用浮动属性float使图像居左；第10行和第11行代码设置图像的右外边距和左外边距分别为50px和30px，使图像和段落文本之间拉开一定的距离，实现图文混排效果（浮动属性将在【任务4-5】中详细讲解，这里了解即可）。运行例4-5，效果如下图所示。在上图中，图像和段落文本之间拉开了一定的距离，实现了图文混排的效果。但是，浏览器边界与网页内容之间也存在一定的距离，而程序中并没有对<p>标签或<body>标签应用内边距或外边距。由此可见，这些元素默认就存在内边距和外边距。网页中默认就存在内边距和外边距的元素有<body>、<h1>~<h6>、<p>等。为了更方便地控制网页中的元素，制作网页时，可使用以下代码清除元素默认的内边距和外边距。 *{ padding:0; /*清除内边距*/ margin:0; /*清除外边距*/ } 清除元素默认的内边距和外边距后，网页效果如下图所示。通过上图可以看出、清除元索默认的内边距和外边距后，浏览器边界与网页内容之间的距离消失。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>外边距</title> 6 <style type="text/css"> 7 img{ 8 border:5px solid green; 9 float:left; /*设置图像左浮动*/ 10 margin-right:50px; /*设置图像的右外边距*/ 11 margin-left:30px; /*设置图像的左外边距*/ 12 /*上面两行代码等价于margin:0 50px 0 30px;*/ 13 } 14 p{text-indent:2em;} /*段落文本首行缩进2字符*/ 15 </style> 16 </head> 17 <body> 18 <img src="longmao.png" alt="龙猫和小月姐妹" /> 19 <p>龙猫剧情简介：小月的母亲生病住院了，父亲带着她与妹妹到乡下居住。她们在乡下遇到了很多小精灵，更与一只大大胖胖的龙猫成为了朋友。龙猫和小精灵们利用它们的神奇力量，为小月和妹妹带来了很多神奇的景观……</p> 20 </body> 21 </html>

4.背景属性

网页能通过背景给用户留下深刻的印象。用户在浏览网页时，在网页中见到的背景颜色、背景图像等都是使用背景属性设置的。设置背景属性主要包括设置背景颜色、设置背景图像、设置背景图像平铺、设置背景图像的位置等，具体介绍如下。

（1）设置背景颜色

在网页设计中，运用background-color属性可以设置背景颜色。关于该属性在项目3的“知识拓展”中已做详细讲解，这里不再赘述。

（2）设置背景图像

在网页设计中，设计师不仅可以把某种颜色作为网页背景，还可以把图像作为网页背景。网页中的背景图像使用background-image属性定义，该属性的具体语法格式如下： background-image:url(图像路径); 在上述语法格式中，图像的路径可以是相对路径或绝对路径。下面通过一个案例对background-image属性进行具体演示，如例6所示。在例6中，第9行代码用于设置网页背景图像。背景图像素材样式如下图所示。运行例6，效果如下图所示。在上图中，背景图像自动沿着水平和竖直两个方向平铺，充满整个网页，并且覆盖了<body>标签的背景颜色。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>设置背景图像</title> 6 <style type="text/css"> 7 body{ 8 background-color:#CCC; /*设置网页的背景颜色*/ 9 background-image:url(pic4.png); /*设置网页的背景图像*/ 10 } 11 h2{ 12 font-family:"微软雅黑"; 13 color:#fff; 14 background-color:#56cbf6; /*设置标题的背景颜色*/ 15 } 16 </style> 17 </head> 18 <body> 19 <h2>UI设计前景超乎想象</h2> 20 <p>“互联网+”与O2O模式的大趋势，使平面设计、网页设计、UI设计、Web前端的前景广阔超乎想象。</p> 21 </body> 22 </html>

（3）设置背景图像平铺

默认情况下，背景图像会自动沿着水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下。 repeat：沿水平和竖直两个方向平铺（默认值） no-repeat：不平铺（图像位于元素的左上角，只显示一次）。 repeat-x：只沿水平方向平铺。 repeat-y：只沿竖直方向平铺。例如，希望例6中的图像只沿着水平方向平铺，可以将body元素的CSS代码进行如下更改： body{ background-color: #CCC; /*设置网页的背景颜色*/ background-image:url(pic4.png); /*设置网页的背景图像*/ background-repeat:repeat-x; /*设置背景图像的平铺*/ } 保存HTML文件，刷新网页，对应效果如下图所示。在上图中，图像只沿着水平方向平铺，背景图像覆盖的区域就显示背景图像，背景图像没有覆盖的区域，按照设置的背景颜色显示。由此可见，当背景图像和背景颜色同时存在时，背景图像优先显示。

（4）设置背景图像的位置

在设置背景图像平铺时，如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将显示在元素的左上角，如例7所示。在例7中，第9行代码将<body>标签背景图像的平铺方式定义为no-repecat。运行例7，效果如下图所示。通过上图可知，背景图像出现在HTML页面的左上角。如果希望背景图像出现在页面的其他位置，就需要设置背景图像的位置。在CSS中，background-position属性用于定义背景图像的位置。例如，想要将例7中的背景图像定义在页面的右下角，可以将<body>标签的CSS样式代码进行如下更改： body{ background-image:url(pic5.png); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:right bottom; /*设置背景图像的位置*/ } 保存HTML文件，刷新网页，效果如下图所示，此时背景图像出现在页面的右下角。在CSS中，通常需要为background-position属性设置两个属性值，这两个属性值之间应用空格隔开，用于定义背景图像在页面的水平方向和垂直方向的坐标。例如，“right bottom”表示背景图像水平方向位于右侧，垂直方向位于下方。background-position属性的默认值为“0 0”或“top left”，即背景图像位于元素的左上角。background-position属性的取值有多种，具体如下。使用不同单位的数值。通过数值直接设置图像左上角在元素中的坐标，最常用的单位是像素。例加，“background-position:20px 20px;”。使用预定义的关键字。通过关键字直接指定背景图像在元素中的对齐方式。其中，水平方向的关键字包括left、center、right；垂直方向的关键字包括top、center、bottom。两个关键字的顺序任意，若只设置一个关键字，则另一个关键字默认为center。例如，“background-position:top;”等价于“background-position:center top;”。使用百分比数值。通过百分比数值将背景图像与元素的指定点对齐。其中，“0% 0%”表示图像左上角与元素的左上角对齐；“50% 50%”表示图像50% 50%的中心点与元素50% 50%的中心点对齐；“20%30%”表示图像20% 30%的点与元素20% 30%的点对齐；“100% 100%”表示图像右下角与元素的右下角对齐。如果只设置一个百分比数值，则其将作为水平属性值，垂直属性值则默认为50%。可以将background-position属性的属性值定义为像素值，用于控制例7中背景图像的位置，则<body>标签的CSS样式代码如下： body{ background-image:url(pic5.png); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:50px 80px; /*用像素值控制背景图像的位置*/ } 保存HTML文件，再次刷新网页，效果如下图所示。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>设置背景图像的位置</title> 6 <style type="text/css"> 7 body{ 8 background-image:url(pic5.png); /*设置网页的背景图像*/ 9 background-repeat:no-repeat; /*设置背景图像不平铺*/ 10 } 11 </style> 12 </head> 13 <body> 14 <h2>UI设计培养如此全能的人才</h2> 15 <p>UI设计培训课程非常系统、全面，软件操作、理论知识、实战练习、就业指导等方面都设置得很科学完善，只要跟着老师的节奏学，哪怕是零基础的学员也不会有任何影响。针对学员的基础情况，我们分为基础班和就业班两种。</p> 17 </body> 18 </html>

（5）设置背景图像固定

有时网页中的内容较多，在浏览网页时背景图像会随着页面滚动条移动。此时使用background-attachment属性可以将背景图像固定。background-attachment属性有两个属性值，分别代表不同的含义，具体介绍如下。 scroll：图像随页面一起滚动（默认值）。 fixed：图像固定在屏幕上，不随页面滚动。例如，下面的示例代码就表示背景图像在距离body元素的左边“50px”、上边“80px”的位置固定。 body{ background-image:url(he.png); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:50px 80px; /*用像素值控制背景图像的位置*/ background-attachment:fixed; /*设置背景图像的位置固定*/ }

（6）综合设置元素的背景

与边框属性一样，背景属性也是一个复合属性，可以将与背景相关的样式都综合定义在一个复合属性background中。background属性综合设置背景样式的语法格式如下： background:背景颜色 url("图像") 平铺定位固定; 在上述语法格式中，各样式顺序任意，中间用空格隔开，不需要的背景样式可以省略。实际工作中通常按照背景颜色、url("图像")、平铺、定位、固定的顺序来书写。例如，例7中<body>标签的背景可以进行综合设置，代码如下： background:url(pic5.png) no-repeat 50px 80px fixed; 综合设置背景样式的代码等价于下面的代码。 body{ background-image:url(images/pic5.png); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/ background-position:50px 80px; /*用像素值控制背景图像的位置*/ background-attachment: fixed; /*设置背景图像的位置固定*/ }

5.宽度属性和高度属性

网页是由多个盒子排列而成的，每个盒子都有固定的大小。在CSS中，使用宽度属性width和高度属性height对盒子的大小进行控制。width和height属性的属性值可以为不同单位的数值或相对于父元素的百分比数值，实际工作中最常用的是像素值。下面将使用width和height属性来控制网页中的段落文本，使大家可以进一步熟悉这两种属性的用法，如例8所示。在例8中，通过width和height属性分别控制段落的宽度和高度，同时对段落应用了盒子模型的其他属性，如边框属性、内边距属性、外边距属性等。运行例8，效果如下图所示。如果问读者例8所示的盒子的宽度是多少，有些读者可能会不假思索地回答“200px”。实际上这是不正确的。因为在CSS规范中，元素的width属性和height属性仅指元素内容的宽度和高度，元素周围的内边距、边框和外边距是单独计算的。大多数浏览器都采用了W3C规范，按照该规范，盒子的总宽度和总高度的计算原则如下。盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和。注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效。特殊的行内元素<img />和<input />除外。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>盒子的宽度与高度</title> 6 <style type="text/css"> 7 .box{ 8 width:200px; /*设置段落的宽度*/ 9 height:50px; /*设置段落的高度*/ 10 background:#CCC; /*设置段落的背景颜色*/ 11 border:10px solid #f00; /*设置段落的边框*/ 12 padding:15px; /*设置段落的内边距*/ 13 margin:15px; /*设置段落的外边距*/ 14 } 15 </style> 16 </head> 17 <body> 18 <p class="box">盒子模型的宽度与高度</p> 19 </body> 20 </html>

任务4-3 盒子模型新增属性

需求分析

为了丰富网页的样式功能，去除一些冗余的样式代码，CSS3中添加了一些新的盒子模型属性。例如，颜色透明、圆角、阴影、渐变等。下面将详细介绍这些全新的CSS样式属性。

知识储备

1.颜色透明

在CSS3之前，设置颜色的方法有使用十六进制颜色值（如#f00）、RGB模式或指定颜色的英文名称（如red）进行设置，但这些方法无法改变颜色的透明度。在CSS3 中新增了两种设置颜色透明度的方法，一种是使用RCBA模式设置透明度，另一种是使用opacity属性设置透明度。下面将详细讲解这两种设置透明度的方法。

（1）RGBA模式

RGBA模式是CSS3新增的颜色模式，它是RGB模式的延伸。RGBA模式是在红、绿、蓝三原色的基础上添加了透明度参数，其语法格式如下： rgba(r,g,b,alpha); 在上述语法格式中，前3个参数与RGB模式中的参数含义相同，表示红、绿、蓝3个通道的参数。括号里是RGB模式的颜色值或者百分比数值，alpha参数是一个介于0（当参数值为0时完全透明）~1（当参数值为1时完全不透明）之间的数字。例如，使用RGBA模式为<p>标签指定透明度为0.5、颜色为红色的背景，示例代码如下： p{background-color:rgba(255,0,0,0.5);} 或 p{background-color:rgba(100%,0%,0%,0.5);}

（2）opacity属性

opacity属性是CSS3的新增属性，该属性能够使任何元素呈现出透明效果。opacity属性的作用范围要比RGBA模式大得多，该属性的语法格式如下： opacity:参数; 在上述语法格式中，opacity属性用于定义标签的不透明度。参数表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

2.圆角

在浏览网页时，经常会看到一些圆角的图形，如圆角按钮、圆角头像图片等。运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。border-radius属性基本语法格式如下： border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂苴半径参数3 垂直半径参数4; 在上述语法格式中，水平半径参数和垂直半径参数均有4个参数值，分别对应矩形的4个圆角，每个角各包含一个水平半径参数和垂直半径参数。水平半径参数和垂直半径参数之间用“/”隔开。参数的取值单位可以为像素（px）或百分比（%）。矩形的圆角和参数示例如下图所示。下面通过个案例来演示border-radius属性的用法，如例9所示。在例9中，第9行代码分别为图片4个角设置了不同的水平半径和垂直半径。运行例9，效果如下图所示。 border-radius属性同样遵循值复制的原则，其水平半径参数和垂直半径参数均可以设置1~4个参数值，用于控制4个角的圆角半径大小。（1）水平半径参数和垂直半径参数设置1个参数值时，表示4个角的圆角半径均相同。（2）水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上圆角半径和左下圆角半径，具体示例代码如下： img{border-radius:50px 20px/30px 60px;} 上述示例代码表示设置图像左上和右下圆角水平半径为“50px”，垂直半径为“30px”；右上和左下圆角水平半径为“20px”，垂直半径为“60px”。示例代码对应的效果如下图所示。（3）水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径；第3个参数值代表右下圆角半径，具体示例代码如下： img{border-radius:50px 20px 10px/30px 40px 60px;} 上述示例代码表示设置图像左上圆角水平半径为“50px”，垂直半径为“30px”；右上和左下圆角水平半径为“20px”，垂直半径为“40px”；右下圆角水平半径为“10px”，垂直半径为“60px”。示例代码对应的效果如下图所示。（4）水平半径参数和垂直半径参数设置4个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上圆角半径，第3个参数值代表右下圆角半径，第4个参数值代表左下圆角半径。示例代码如下： img {border-radius:50px 30px 20px 10px/50px 30px 20px 10px;} 上述示例代码设置图像左上圆角的水平和垂直半径均为“50px”，右上圆角的水平和垂直半径均为“30px”，右下圆角的水平和垂直半径均为“20px”，左下圆角的水平和垂直半径均为“10px”。示例代码对应的效果如下图所示。应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认其等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。例如，水平半径参数和垂直半径参数设置4个参数值的示例代码可以简写如下： img{border-radius:50px 30px 20px 10px;} 需要说明的是，如果想要设置例9中图片的圆角边框显示效果为圆形，只需将第9行代码更改为如下内容： img{border-radius:150px;} /*设置显示效果为圆形*/ 或 img{border-radius:50%;} /*利用百分比设置显示效果为圆形*/ border-radius属性的属性值只需要为图片宽度和高度的一半，图片即可显示为圆形。由于在例9中图片的宽度和高度均为300px，所以border-radius属性的属性值可以设置为“150px”或“50%”。示例代码对应的效果如下图所示。

例9

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>圆角边框</title> 6 <style type="text/css"> 7 img{ 8 border:8px solid black; 9 border-radius:50px 20px 10px 70px/30px 40px 60px 80px;/*分别设置四个角水平半径和垂直半径*/ 10 } 11 </style> 12 </head> 13 <body> 14 <img class="circle" src="2.jpg" alt="图片"/> 15 </body> 16 </html>

3.阴影

在网页制作中，阴影可以使网页效果立体化。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。box-shadow属性的基本语法格式如下： box-shadow: h-shadow v-shadow blur spread color outset; 在上面的语法格式中，box-shadow属性共包含6个属性值。box-shadow属性的属性值说明如下表所示。上表列举了box-shadow属性的属性值和说明，其中，“h-shadow”和“v-shadow”为必选属性值不可以省略，其余为可选属性值。“outset”用于设置外阴影，为默认属性值，“inset”用于设置内阴影。下面通过一个为图片添加阴影的案例来演示box-shadow属性的用法和效果，如例10所示。在例10中，第11行代码为图像添加了内阴影样式。为图片添加内阴影时，需要与内边距属性padding配合使用，使图像和阴影之间拉开一定的距离，不然图片会将内阴影遮挡。运行例10，效果如下图所示。在上图中，图片出现了内阴影效果。box-shadow属性也可以改变阴影的投射方向，并且可以添加多重阴影效果，示例代码如下： box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset; 上述示例代码对应的效果如下图所示。

例10

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>box-shadow属性</title> 6 <style type="text/css"> 7 img{ 8 padding:20px; /*内边距20px*/ 9 border-radius:50%; /*将图像设置为圆形效果*/ 10 border:1px solid #666; 11 box-shadow:5px 5px 10px 2px #999 inset; 12 } 13 </style> 14 </head> 15 <body> 16 <img src="6.jpg" alt="爱护眼睛"/> 17 </body> 18 </html>

4.渐变

在CSS3之前的版本中，渐变效果需要通过设置背景图像来实现。而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变三种，具体介绍如下。

（1）线性渐变

在线性渐变过程中，初始颜色会沿着一条直线按方向顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值);”样式可以实现线性渐变效果，该样式的基本语法格式如下： background-image:linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n); 在上述语法格式中，linear-gradient用于定义渐变方式为线性渐变，括号内的参数值包含渐变角度和颜色值，具体介绍如下。

①渐变角度

渐变角度是指水平线与渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加上"left”“right”"top”“bottom”等关键词（to 可以理解为“到”的意思，如“to top”可以理解为以底部为起点到顶部的渐变）。其中，0deg对“to top”，90deg对应“to right”，180deg对应“to bottom”，270deg对应“to left”，整个过程以bottom为起点顺时针旋转。渐变角度的变化过程如下图所示。当未设置渐变角度时，CSS将渐变角度默认为“180deg”，等同于“to bottom”。

②颜色值

颜色值用于设置渐变颜色，其中“颜色值1”表示初始颜色，“颜色值n”表示结束颜色，初始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。下面通过一个案例对线性渐变的用法进行演示，如例11所示。在例11中，为<p>标签定义了一个渐变角度为30deg、绿色（#0f0）到蓝色（#00f ）的线性渐变。运行例11，效果如下图所示。上图实现了绿色到蓝色的线性渐变。需要说明的是，每一个颜色值后面还可以书写一个百分比数值，用于标识颜色渐变的位置，百分比数值与颜色值之间用空格隔开。示例代码如下： background-image:linear-gradient(30deg,#0f0 50%,#00f 80%); 上述示例代码可以看作绿色（#0f0）由50%的位置开始出现渐变，至蓝色（#00f）位于80%的位置结束渐变。可以用Photoshop中的渐变色块进行类比，如下图所示。上述示例代码对应的效果如下图所示。

例11

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>线性渐变</title> 6 <style type="text/css"> 7 p{ 8 width:200px; 9 height:200px; 10 background-image:linear-gradient(30deg,#0f0,#00f); 11 } 12 </style> 13 </head> 14 <body> 15 <p></p> 16 </body> 17 </html>

（2）径向渐变

径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，初始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变效果。该样式的基本语法格式如下： background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,...,颜色值n); 在上述语法格式中，radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值，对各参数的具体介绍如下。

①渐变形状

渐变形状用于定义径向渐变的形状，其取值既可以是定义水平和垂直半径的像素值或百分比数值，也可以是“circle”“ellipse”这样的关键词，具体介绍如下。像素值/百分比数值：用于定义形状的水平半径和垂直半径。例如，“80px 50px”表示一个水平半径为80px、垂直半径为50px的椭圆形。 circle：指定圆形的径向渐变。 ellipse：指定椭圆形的径向渐变。

②圆心位置

圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或属性值来定义径向渐变的中心位置。圆心位置的属性值类似于CSS中background-position属性的属性值，如果省略则默认为“center”。圆心位置的属性值有以下几种。像素值/百分比数值：用于定义圆心的水平坐标（横坐标）和垂直坐标（纵坐标），可以为负值。 left：设置左边为径向渐变圆心的横坐标值。 center：设置中间为径向渐变圆心的横坐标值或纵坐标值。 right：设置右边为径向渐变圆心的横坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。

③颜色值

其中，“颜色值1”表示初始颜色，“颜色值n”表示结束颜色，初始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

概要

下面运用径向渐变制作一个球体，如例12所示。例12为<p>标签定义了一个渐变形状为椭圆形，径向渐变位置在容器中心点、绿色（#0f0）到深绿色（#030）的径向渐变。同时，使用border-radius属性将容器的边框设置为圆角。运行例12，效果如下图所示。在上图中，球体实现了绿色到深绿色的径向渐变。与线性渐变类似，径向渐变的颜色值后面也可以书写一个百分比数值，用于设置渐变的位置。

例12

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>径向渐变</title> 6 <style type="text/css"> 7 p{ 8 width:200px; 9 height:200px; 10 border-radius:50%; /*设置圆角边框*/ 11 background-image:radial-gradient(ellipse at center,#0f0,#030); /*设置径向渐变*/ 12 } 13 </style> 14 </head> 15 <body> 16 <p></p> 17 </body> 18 </html>

（3）重复渐变

在网页设计中，重复渐变其实就是上述两种渐变方式的多次运用。因此，重复渐变也可以分为重复线性渐变和重复径向渐变两类，具体介绍如下。

①重复线性渐变

在CSS3中，通过“background-image:repeating-linear-gradient(参数值);”样式可以设置重复线性渐变的效果，该样式的基本语法格式如下： background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n); 在上述语法格式中，“repeating-linear-gradient(参数值)”用于定义渐变方式为重复线性渐变，括号内的参数取值与线性渐变相同，分别用于定义渐变角度和颜色值。颜色值同样可以使用百分比数值定义位置。下面通过一个案例对重复线性渐变进行演示，如例13所示。例13为<p>标签定义了一个渐变角度为90deg的红、黄、绿三色重复线性渐变。运行例13，效果如下图所示。

例13

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>重复线性渐变</title> 6 <style type="text/css"> 7 p{ 8 width:200px; 9 height:200px; 10 background-image:repeating-linear-gradient(90deg,#E50743,#E8ED30 10%,#3FA62E 15%); 11 } 12 </style> 13 </head> 14 <body> 15 <p></p> 16 </body> 17 </html>

②重复径向渐变

在CSS3中，通过“background-image:repeating-radial-gradient(参数值);”样式可以设置重复径向渐变效果，该样式的基本语法格式如下： background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,...,颜色值n); 在上述语法格式中，“repeating-radial-gradient(参数值)”用于定义渐变方式为重复径向渐变，括号内的参数取值与径向渐变相同，分别用于定义渐变形状、圆心位置和颜色值。下面通过一个案例对重复径向渐变进行演示，如例14所示。例14为<p>标签定义了一个渐变形状为圆形、径向渐变位置在容器中心点的红、黄、绿三色重复径向渐变。运行例14，效果如下图所示。

例14

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>重复径向渐变</title> 6 <style type="text/css"> 7 p{ 8 width:200px; 9 height:200px; 10 border-radius:50%; 11 background-image:repeating-radial-gradient(circle at 50% 50%,#E50743,#E8ED30 10%,#3FA62E 15%); 12 } 13 </style> 14 </head> 15 <body> 16 <p></p> 17 </body> 18 </html>

任务4-4 元素的类型与转换

需求分析

前面的项目在介绍CSS属性时，经常会提到“仅适用于块级元素”，那么究竟什么是块级元素？在HTML标签语言中元素又是如何分类的呢？下面将对元素的类型与转换进行详细讲解。

知识储备

1.元素的类型

HTML提供了丰富的标签，用于组织页面结构。为了使页面结构的组织更加合理，HTML标签被定义成了不同的类型，分别为块元素和行内元素，也称为块标签和行内标签，对它们的具体介绍如下。

（1）块元素

块元素在页面中以区域块的形式出现，其特点是每个块元素都会独自占据一行或多行。块元素可以设置宽度、高度、对齐等属性。在网页设计中，块元素常用于网页布局和网页结构的搭建。网页中常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中，<div>标签是最典型的块元素。

（2）行内元素

行内元素也称为内联元素或内嵌元素，其特点是每个行内元素不会独自占据一行。一个行内元素通常会与其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的文本内容和图像尺寸来支撑结构。行内元素一般不可以设置宽度、高度、对齐等属性，只用于控制页面中文本的样式。网页中常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>，<u>、<a>、<span>等，其中，<span>标签是最典型的行内元素。

概要

下面通过一个案例来学习块元素与行内元素的具体用法，如例15所示。在例15中，第25~31行代码使用了不同类型的标签，分别定义文本内容，然后对这些标签应用不同的背景颜色。运行例15，效果如下图所示。从上图可以看出，不同类型的元素在页面中所占的区域不同。块元素<h2>和<p>各自占据一个矩形的区域，竖直排列。行内元素<strong>、<em>和<del>排列在同一行。可见块元素通常独占一行，可以设置宽、高和对齐属性，而行内元素通常不独占一行，不可以设置宽、高和对齐属性。行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。注意：在行内元素中有几个特殊的元素。例如，<img />标签和<input />标签。这些特殊的行内元素可以设置宽度、高度和对齐属性，因此它们也被称为行内块元素。

例15

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>块元素和行内元素</title> 6 <style type="text/css"> 7 h2{ 8 background:#39F; /*定义<h2>标签的背景颜色为青色*/ 9 width:350px; /*定义<h2>标签的宽度为350px*/ 10 height:50px; /*定义<h2>标签的高度为50px*/ 11 text-align:center; /*定义<h2>标签的文本水平对齐方式为居中*/ 12 } 13 p{background:#060;} /*定义<p>标签的背景颜色为绿色*/ 14 strong{ 15 background:#66F; /*定义<strong>标签的背景颜色为紫色*/ 16 width:360px; /*定义<strong>标签的宽度为360px*/ 17 height:50px; /*定义<strong>标签的高度为50px*/ 18 text-align:center; /*定义<strong>标签的文本水平对齐方式为居中*/ 19 } 20 em{background:#FF0;} /*定义<em>标签的背景颜色为黄色*/ 21 del{background:#CCC;} /*定义<del>标签的背景颜色为灰色*/ 22 </style> 23 </head> 24 <body> 25 <h2>h2标签定义的文本</h2> 26 <p>p标签定义的文本</p> 27 <p> 28 <strong>strong标签定义的文本</strong> 29 <em>em标签定义的文本</em> 30 <del>del标签定义的文本</del> 31 </p> 32 </body> 33 </html>

2.<span>标签

<span>标签属于行内元素，在<span>与</span>之间只能包含文本和各种行内元索。<span>标签没有固定的表现形式，通常可配合class属性使用。当对<span>标签应用样式时，该标签才会产生视觉上的变化。在搭建HTML结构时，块元素能够嵌套行内元素，但行内元素不能嵌套块元素。例如，<span>标签通常会嵌套在<div>标签中，可以将<div>标签理解为大容器，<span>标签理解为小容器，大容器内可以放置小容器。下面通过一个案例来演示<span>标签的用法，如例16所示。在例16中，第17～19行代码通过在<div>标签中嵌套<span>标签来定义一些特殊显示的文本；第6~13行代码使用CSS设置<span>标签的样式。运行例16，效果如下图所示。上图中的所有课程都是通过CSS控制<span>标签设置的。由此可见，<span>标签可以嵌套于<div>标签中，成为它的子元素，但<span>标签中不能嵌套<div>标签。

例16

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>span标签</title> 6 <style type="text/css"> 7 span{margin:10px;} /*定义<span>标签的外边距*/ 8 .one{color:red;} 9 .two{color:pink;} 10 .three{color:blue;} 11 .four{color:purple;} 12 .five{color:green;} 13 </style> 14 </head> 15 <body> 16 <h2>课程推荐</h2> 17 <div class="list"> 18 <span class="one">UI设计</span><span class="two">Java</span><span class="three">人工智能</span><span class="four">产品经理</span><span class="five">前端移动与开发</span> 19 </div> 20 </body> 21 </html>

3.元素类型的转换

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性（例如，可以设置宽度和高度）或者需要块元素具有行内元素的某些特性（例如，不单独占据一行），就可以使用display属性对元素的类型进行转换。display属性的基本语法格式如下： display:属性值; 在上述语法格式中，不同的属性值代表不同的元素类型。display 属性的属性值如下表所示。下面通过一个案例来演示display属性的用法和效果，如例17所示。在例17中，第6~20行代码为<div>标签和<span>标签设置相同的宽度和高度；第23~32行代码定义了4个<div>标签和4个<span>标签；最后为类名相同的<div>标签和<span>标签分别添加相同的背景样式。运行例17，效果如下图所示。通过上图可以看出，<span>标签的背景图片并未显示。原因是<span>标签为行内元素，设置的宽度高度样式对<span>标签不起作用。此时可以将<span>标签转换为行内块元素，具体代码如下： span{ width:180px; height:175px; display:inline-block; /*将<span>标签转换为行内块元素*/ } 保存后刷新页面，效果如下图所示。在上图中，<span>标签的背景图片正常显示，且排列在同一行。同样，可以修改<div>标签的样式代码，也将其转换为行内块元素，并排列在同一行。具体代码如下： div{ width:180px; height:175px; display:inline-block; /*将<div>标签转换为行内块元素*/ } 保存后刷新页面、效果如下图所示。通过上图可以看出，将<div>和<span>标签都转换为行内块元素后，两部分的显示效果相同。

例17

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>元素的转换</title> 6 <style type="text/css"> 7 div{ /*设置<div>标签的宽高*/ 8 width:180px; 9 height:175px; 10 } 11 span{ /*设置<span>标签的宽高*/ 12 width:180px; 13 height:175px; 14 } 15 p{font-size: 20px;} 16 .spring{background: url(spring.jpg);} 17 .summer{background: url(summer.jpg);} 18 .autumn{background: url(autumn.jpg);} 19 .winter{background: url(winter.jpg);} 20 </style> 21 </head> 22 <body> 23 <p>div部分</p> 24 <div class="spring"></div> 25 <div class="summer"></div> 26 <div class="autumn"></div> 27 <div class="winter"></div> 28 <p>span部分</p> 29 <span class="spring"></span> 30 <span class="summer"></span> 31 <span class="autumn"></span> 32 <span class="winter"></span> 33 </body> 34 </html>

知识拓展

块元素垂直外边距的合并

两个相邻或嵌套的块元素的垂直外边距会自动合并，即发生重叠。了解块元素的这一特性后，有助于设计者更好地使用CSS进行网页布局。块元素垂直外边距的合并分为相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的合并两种情况，具体介绍如下。

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的块元素有下外边距margin-bottom、下面的块元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。下面通过一个案例来帮助大家更好地理解相邻块元素垂直外边距的合并，如例18所示。在例18中，第22行和第23行代码分别定义了两对<div>标签；第7~12行代码和第13~18行代码分别为<div>标签设置实体化三属性；其中，第11行代码为第一个<div>标签定义了下外边距为“margin-bottom:20px;”，第17行代码为第二个<div>标签定义了上外边距为“margin-top:40px;”。运行例18，效果如下图所示。在上图中，两个<div>标签之间的垂直间距并不是第一个<div>标签的margin-bottom与第二个<div>标签的margin-top之和——60px。如果用测量工具测量可以发现，两者之间的垂直间距是40px，即margin-bottom与margin-top属性值中的较大者。

例18

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>相邻块元素垂直外边距的合并</title> 6 <style type="text/css"> 7 .one{ 8 width:150px; 9 height:150px; 10 background:#FC0; 11 margin-bottom:20px; /*定义第一个<div>标签的下外边距为20px*/ 12 } 13 .two{ 14 width:150px; 15 height:150px; 16 background:#63F; 17 margin-top:40px; /*定义第二个<div>标签的上外边距为40px*/ 18 } 19 </style> 20 </head> 21 <body> 22 <div class="one">1</div> 23 <div class="two">2</div> 24 </body> 25 </html>

（2）嵌套块元素垂直外边距的合并

如果两个嵌套关系的块元素的父级块元素没有上内边距和边框，则父级块元素的上外边距会与子级块元素的上外边距发生合并，合并后的外边蹈i为两者中的较大者。下面通过一个案例演示嵌套块元素垂直外边距的合并，如例19所示。在例19中，第23~25行代码分别定义了两对<div>标签，它们之间是嵌套关系，分别为它们设置宽度、高度、背景颜色和上外边距。其中，父级<div>标签的上外边距为“20px”，子级<div>标签的上外边距为“40px”。为了便于观察，在第7行代码中使用通配符选择器清除了所有HTML标签的默认边距。运行例19，效果如下图所示。在上图中，父级<div>标签与子级<div>标签的上边缘重合，这是因为它们的外边距发生了合并。如果使用测量工具测量可以发现，此时的外边距为“40px”，即取父级<div>标签与子级<div>标签上外边距中的较大者。如果希望外边距不合并，可以为父级块元素定义1px的上边框或上内边距。例如，在父级<div>标签的CSS样式中增加边框样式，示例代码如下： border-top:1px solid #FCC; /*定义父级<div>标签的上边框*/ 保存HTML文件，刷新网页，效果如下图所示。在上图中，父级<div>标签与浏览器上边缘的垂直间距为“20px”，子级<div>标签与父级<div>标签上边缘的垂直间距为“40px”，外边距没有发生合并。

例19

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>嵌套块元素上外边距的合并</title> 6 <style type="text/css"> 7 *{margin:0; padding:0;} /*使用通配符清除所有HTML标签的默认边距*/ 8 div.father{ 9 width:400px; 10 height:400px; 11 background:#FC0; 12 margin-top:20px; /*定义第一个<div>标签的上外边距为20px*/ 13 } 14 div.son{ 15 width:200px; 16 height:200px; 17 background:#63F; 18 margin-top:40px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="father"> 24 <div class="son"></div> 25 </div> 26 </body> 27 </html>

任务4-5 元素的浮动

需求分析

在网页中，页面元素是按照默认的排列方向从上到下、从左到右排列的。采用这种默认排列方式搭建页面结构，会使网页版面看起来非常单调。通过元素的浮动属性，可对网页进行多样化布局，使各部分模块有序排列，整个网页的排版也变得丰富、美观。本任务将对元素的浮动进行详细讲解。

知识储备

1.元素的浮动属性

浮动指设置了浮动属性的标签会脱离标准文档流（标准文档流指内容元素排版布局过程中会自动从左到右、从上到下进行流式排列）的控制，移动到其父元素中指定位置的过程。作为CSS的一个重要属性，浮动被频繁地应用在网页制作中。在CSS中，通过float属性来定义浮动。定义浮动的基本语法格式如下：选择器{float:属性值;} 在上述语法中，float属性常用的属性值有3个，具体如下表所示。上表展示了float属性的属性值及其含义。下面通过一个案例来学习float属性的用法，如例20所示。在例20中，分别为3个<div>标签设置了不同的宽度、高度和背景颜色。运行例20，效果如下图所示。上图为未添加浮动属性前的布局样式，3个盒子自上而下排列，符合标准文档流的排列方式。下面修改第1个盒子的样式代码，为其添加左浮动样式，具体代码如下： float:left; 保存HTML文件后，刷新页面，效果如下图所示。通过上图可以看出，第1个盒子添加了左浮动样式后会脱离标准文档流。第2个盒子和第3个盒子会自动填补第1个盒子空出的位置。下面修改第2个盒子的样式代码为其添加左浮动样式，具体代码如下： float:left; 保存HTML文件后，刷新页面，效果如下图所示。通过上图可以看出，第2个浮动的盒子排列到第一个盒子的右侧，与第一个盒子在同一行显示，且两个盒子都脱离了标准文档流。第3个盒子自动向上填补空出位置。下面修改第3个盒子的样式代码，为该盒子添加左浮动样式，具体代码如下： float:left; 保存HTML文件后，刷新页面，效果如下图所示。观察上图发现其与预期效果有所不同，即第3个盒子没有移动到第2个盒子的右侧。原因是第2个盒子右侧所预留的空间不能满足第3个盒子的宽度。此时，第3个盒子会自动换行到下方显示。拖动修改浏览器窗口的宽度后、效果如下图所示。在上图中，3个盒子在同一行显示，且从左向右依次排列。此时，3个盒子脱离了标准文档流从上到下的排列方式。

例20

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>元素的浮动属性</title> 6 <style type="text/css"> 7 .one{ 8 width:100px; 9 height:100px; 10 background:pink; 11 } 12 .two{ 13 width:150px; 14 height:150px; 15 background:red; 16 } 17 .three{ 18 width:200px; 19 height:200px; 20 background:blue; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="one"></div> 26 <div class="two"></div> 27 <div class="three"></div> 28 </body> 29 </html>

2.清除浮动

在网页中，当一个元素被设为浮动后，就不再占用标准文档流的位置，与该元素相邻的其他元素会受浮动的影响，产生位置上的变化。如果要避免浮动对其他元素的影响，就需要清除浮动。在CSS中，使用clear属性清除浮动，其基本语法格式如下：选择器{clear:属性值;} 上述语法中，clear属性的常用属性值有3个，具体如下表所示。上表列举了clear属性的3个属性值及其含义，下面通过一个案例来学习clear属性的用法，如例21所示。在例21中，第11~13行代码为3个<div>标签分别插人一张图片，并设置左浮动；第14行代码为<p>标签定义一段文字。运行例21，效果如下图所示。在上图中，<div>标签设置了左浮动，因此段落标签会围绕图片显示。如果想让段落文本不受浮动元素的影响，则需要清除浮动。在例21中，为<p>标签添加清除浮动的代码，具体如下： p{clear:left;} 保存HTML文件后，刷新页面，效果如下图所示。通过上图可以看出，清除段落文本左侧的浮动后，段落文本不再受到浮动元素的影响，按照元素身的默认排列方式，独自占据一个区域，显示在图片下方。需要说明的是，clear属性只能清除元素左右两侧浮动的影响。但在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，如例22所示。在例22中，第8行代码为div1、div2、div3这3个子元素定义左浮动。同时，类名为box的元素不设置高度。运行例22，效果如下图所示。在上图中，由于受到子元素浮动的影响，未设置高度的父元素变成了一条直线，即父元素不能自适应子元素的高度了。由于子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。那么对于这种情况该如何清除浮动呢？为了使读者在以后的工作中能够轻松地清除一些特殊的浮动，下面总结了3种清除浮动的常用方法。

例21

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>清除浮动的应用</title> 6 <style type="text/css"> 7 div{float:left;} 8 </style> 9 </head> 10 <body> 11 <div><img src="pic11.jpg"/></div> 12 <div><img src="pic22.jpg"/></div> 13 <div><img src="pic33.jpg"/></div> 14 <p>哺乳动物是一种恒温、脊椎动物，身体有毛发，大部分都是胎生，并靠乳腺哺乳后代。哺乳动物是动物发展史上最高级的阶段，也是与人类关系最密切的一个类群。哺乳动物拥有高度发达的神经系统和感官，能协调复杂的机能活动和适应多变的环境条件。而且它们出现了口腔咀嚼和消化，大大提高了对能量的摄取。哺乳动物高而恒定的体温，帮助它们减少了对环境的依赖性。</p> 15 </body> 16 </html>

例22

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>子元素浮动对父元素的影响</title> 6 <style type="text/css"> 7 .one,.two,.three{ 8 float:left; 9 width:100px; 10 height:100px; 11 margin:10px; 12 background: red; 13 } 14 .box{ 15 border:1px solid #ccc; 16 background: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <div class="box"> 23 <div class="one">div1</div> 24 <div class="two">div2</div> 25 <div class="three">div3</div> 26 </div> 27 </div> 28 </body> 29 </html>

（1）使用空标签清除浮动

在浮动元素后面添加空标签，并对该空标签应用“clear:both;”样式，可清除元素浮动所产生的影响。下面通过一个案例演示使用空标签清除浮动的方法，具体代码如例23所示。例23在浮动元素div1、div2、div3之后添加class为four的空<div>标签，然后对其应用“clear.both;”样式。运行例23，效果如下图所示。在上图中，父元素被其子元素撑开了，即子元素的浮动对父元素的影响已经不存在。空标签清除浮动的缺点是增加了不必要的结构元素。

例23

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>空标签清除浮动</title> 6 <style type="text/css"> 7 .one,.two,.three{ 8 float:left; 9 width:100px; 10 height:100px; 11 margin:10px; 12 background: red; 13 } 14 .box{ 15 border:1px solid #ccc; 16 background: blue; 17 } 18 .four{clear:both;} 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="box"> 24 <div class="one">div1</div> 25 <div class="two">div2</div> 26 <div class="three">div3</div> 27 <div class="four"></div> 28 </div> 29 </div> 30 </body> 31 </html>

（2）使用overflow属性清除浮动

为浮动元素的父元素添加“overflow:hidden;”或“overflow:auto;”也可以清除浮动。使用overflow属性清除浮动的方法弥补了使用空标签清除浮动的不足，不会在页面中添加不必要的结构元素。下面通过一个案例演示使用overflow属性清除浮动的方法，具体代码如例24所示。在例24中，第17行代码通过对父元素应用“overflow:hidden;”样式，来清除子元素浮动对父元素的影响。运行例24，效果如下图所示。在上图中，父元素被其子元素撑开，达到了预期的效果。

例24

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>overflow属性清除浮动</title> 6 <style type="text/css"> 7 .one,.two,.three{ 8 float:left; 9 width:100px; 10 height:100px; 11 margin:10px; 12 background:red; 13 } 14 .box{ 15 border:1px solid #ccc; 16 background:blue; 17 overflow:hidden; 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="box"> 24 <div class="one">div1</div> 25 <div class="two">div2</div> 26 <div class="three">div3</div> 27 </div> 28 </div> 29 </body> 30 </html>

（3）使用after伪对象清除浮动

使用after伪对象清除浮动的实现原理与使用空标签清除浮动的原理类似。区别在于使用空标签清除浮动是在结构中插入一个没有内容的标签，而使用after伪对象清除浮动是利用其伪类“:after”在元素内部增加一个类似于空标签的效果。使用after伪对象清除浮动的示例代码如下： .father:after{ /*对父元素应用after伪对象样式*/ display:block; clear:both; content:""; visibility:hidden; height:0; } 在上述示例代码中,“.father”为一个父元素选择器，其后面的“:after”伪类的样式属性可以作为一个固定写法。使用after伪对象清除浮动时需要注意以下两点。必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。必须在伪对象中设置content属性，属性值可以为空。例如，“content:"";”。

3.overflow属性

overflow属性是CSS中的一个重要属性，除了用于清除浮动外，当盒子内的元素超出盒子自身的大小时，该属性还可用于设置溢出内容的显示方式。overflow属性的基本语法格式如下：选择器{overflow:属性值;} 在上述语法格式中，overflow属性的属性值有4个，分别表示不同的含义，具体如下表所示。例如，为div盒子设置宽度、高度、背景和“overflow:visible;”样式，示例代码如下： div{ width:100px; height:140px; background:skyblue; overflow:visible; /*溢出内容呈现在元素框之外*/ } 上述示例代码对应的效果如下图所示。在上图中，溢出的内容不会被修剪，呈现在带有背景的div盒子之外。如果希望溢出的内容被修剪且不可见，可将overflow的属性值修改为hidden。此时效果如下图所示。如果希望div盒子能够自适应内容，例如，在内容溢出时产生滚动条，不溢出时不产生滚动条，则可以将overflow属性的属性值定义为auto。此时效果如下图所示。在下图中，div盒子的右侧产生了滚动条，拖动滚动条即可查看溢出的内容。当div盒子中的内容减少时，滚动条就会消失。当overflow属性的属性值为scroll时，div盒子也会产生滚动条，此时效果如下图所示。在上图中，元素框中同时出现了水平方向和垂直方向的滚动条。与“overflow:auto;”样式不同，定义“overflow:scroll;”样式的div盒子，不论元素是否溢出，该盒子水平方向和垂直方向的滚动条都始终存在。

任务4-6 元素的定位

需求分析

浮动布局虽然灵活，但是却无法对标签的位置进行精确控制。在CSS中，通过定位属性position可以实现网页标签的精确定位。下面将对标签的定位属性，以及常用的几种定位方式进行详细讲解。

知识储备

1.元素的定位属性

制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包括定位模式和边偏移两部分，具体介绍如下。

（1）定位模式

在CSS中，position属性用于设置元素的定位模式，其基本语法格式如下：选择器{position:属性值;} 在上述语法格式中，position属性的常用属性值如下表所示。从上表中可以看出，元素的定位模式主要分为四类，本任务后面会针对每一种定位模式进行详细讲解。

（2）边偏移

定位模式仅用于设置元素以哪种模式定位，并不能指定元素的具体位置。在CSS中，通过边偏移属性可以精确设置定位元素的位置。常用的边偏移属性如下表所示。从上表中可以看出，元素的边偏移属性分为四类。在设置元素定位时，边偏移属性的取值可以为不同单位的数值或百分比数值。

2.静态定位

静态定位是元素的默认定位模式，当position属性的取值为static时，元素为静态定位模式。静态位置指各元素在HTML标准文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置。所以当元素没有设置position属性时，并不是说该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

3.相对定位

相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素设置为相对定位。为元素设置相对定位后，可以通过边偏移属性改变该元素的位置，但是这个元素在文档流中的位置仍然保留。为了使初学者更好地理解相对定位，下面通过一个案例来演示为元素设置相对定位的方法和效果，具体代码如例25所示。在例25中，第25～29行代码用于为“child02”设置相对定位模式，并通过边偏移属性left和top改变“child02”的位置。运行例25，效果如下图所示。从上图可以看出，为“child-02”添加相对定位后，“child-02”会相对自身的默认位置进行偏移，但是它在标准文档流中的位置仍然保留。

例25

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>相对定位</title> 6 <style type="text/css"> 7 body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;} 8 .father{ 9 margin:10px auto; 10 width:300px; 11 height:300px; 12 padding:10px; 13 background:#ccc; 14 border:1px solid #000; 15 } 16 .child01,.child02,.child03{ 17 width:100px; 18 height:50px; 19 line-height:50px; 20 background:#ff0; 21 border:1px solid #000; 22 margin:10px 0px; 23 text-align:center; 24 } 25 .child02{ 26 position:relative; /*相对定位*/ 27 left:150px; /*距左边线150px*/ 28 top:100px; /*距上边线100px*/ 29 } 30 </style> 31 </head> 32 <body> 33 <div class="father"> 34 <div class="child01">child-01</div> 35 <div class="child02">child-02</div> 36 <div class="child03">child-03</div> 37 </div> 38 </body> 39 </html>

4.绝对定位

绝对定位是使元素相对于最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，设置绝对定位的元素会依据body元素（也可以看作浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。为了使初学者更好地理解绝对定位，下面在例25的基础上，将“child02”的定位模式设置为绝对定位，即将第25~29行代码进行如下更改： .child02{ position:absolute; /*绝对定位*/ left:150px; /*距左边线150px*/ top:100px; /*距上边线100px*/ } 保存HTML文件，刷新页面，效果如下图所示。在上图中，设置为绝对定位的“child02”会依据浏览器窗口进行定位。为“child02”设置绝对定位后，“child03”占据了“child02”的位置，即“child02”脱离了标准文档流的控制，并且不再占据标准文档流中的空间。在上述案例中，为“child02”设置了绝对定位，当浏览器窗口放大或缩小时，“child02”相对于其父元素的位置将发生变化。下图所示为缩小浏览器窗口时的页面效果，可以看到“child02”相对于其父元素的位置发生了变化。然而在网页设计中，通常需要子元素相对于其父元素的位置保持不变，即让子元素依据其父元素的位置进行绝对定位。此时如果父元素不需要定位，该如何处理呢？对于上述情况，可以先直接将父元素设置为相对定位，但不为其设置边偏移属性；然后再对子元素应用绝对定位，并通过边偏移属性对其进行精确定位。这样父元素既不会失去其空间，同时还能保证子元素可以依据父元素准确定位。注意： ①如果仅为元素设置绝对定位，不设置边偏移属性，则元素的位置不变，但该元素不再占用标准文裆流中的空间，会与位置上移的元素重叠。 ②定义多个边偏移属性时，如果同时设置left属性的和right属性的参数值，以left属性的参数值为准；如果同时设置top属性的和bottom属性的参数值，以top属性的参数值为准。

5.固定定位

当元素的position属性的取值为fixed时，该元素的定位模式为固定定位。固定定位的元素特性如下。固定定位是相对于“当前浏览器窗口”进行的定位。设置固定定位的元素不再占用标准文裆流的空间，元素层级要高于普通元素，与“浮动”类似。设置固定定位的元素是一个“块元素”，即使行内元素使用fixed定位，也将转换成“块元素”。如果只指定了position层性的层性值为fixed，并没有设置偏移量、则元素会固定在其原始位置。

6.z-index属性

当为多个元素同时设置定位时，定位元素之间有可能会发生重叠，如下图所示。如果想要调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index属性。z-index属性用于调整层叠等级，该属性取值可为正整数、负整数和0，默认状态下z-index属性的属性值为0。z-index属性取值越大，设置该属性的定位元素在层叠元素中越居上。注意： z-index属性仅对定位元素生效。

任务4-7 布局及定义基础样式

在制作“爱家居”企业网站首页之前，小思需要做一些页面建设的准备工作，主要包括网站素材整理、页面绩构分析、定义基础样式，具体介绍如下。

网站素材的整理

网站素材整理主要包括网站站点建立和“爱家居”企业网站首页的切图，具体介绍如下。

1.网站站点建立

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本项目在“D盘:\案例源码\chapter04”文件夹中新建一个文件夹作为网站根目录，并命名为“aijiaju”。

（2）在根目录下新建文件

打开网站根目录“aijiaju”，在根目录下新建“images”和“css”文件夹，分别用于存放网站所需的图像和CSS文件。

（3）新建站点

打开Dreamweaver工具，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称。浏览并选择站点根目录的存储位置，单击“保存”按钮，完成站点的创建。

2.切图

使用Fireworks CS6的“切片”工具切图，导出“爱家居”企业网站首页中的素材图片，并存储在站点中的“images”文件夹中。导出后的图片素材如下图所示。

页面结构分析

1.HTML结构分析

“爱家居”企业网站首页从上到下可以分为5个模块，如下图所示。

2.CSS样式分析

页面中的模块均居中显示，宽度为1200px。另外，页面中的所有字体均为“微软雅黑”，背景颜色为“#fdfdfd”，这些可以通过CSS公共样式定义。

定义基础样式

1.页面布局

对“爱家居”企业网站首页进行整体布局。首先，在站点根目录下新建一个HTML文件，并命名为“project04.html”；然后，使用<div>标签对页面进行布局，具体代码如project04.html所示。

project04.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>爱家居</title> 6 <link href="css/style04.css" type="text/css" rel="stylesheet" /> 7 </head> 8 <body> 9  10 <div id="bg"></div> 11  12  13 <div id="news"></div> 14  15  16 <div id="exhibition"></div> 17  18  19 <div id="footer"></div> 20  21  22 <div class="tree"></div> 23  24 </body> 25 </html> 在上述代码中，第10行j代码定义id为“bg”的<div>标签用于搭建“导航及banner”模块的结构；第13行和第16行代码定义id为“news”和“exhibition”的两个<div>标签分别用于搭建“热门推荐”和“夏日生活”模块的结构；第19行代码定义id为“footer”的<div>标签搭建“版权信息”模块的结构；第22行代码定义类名为“tree”的<div>标签用于搭建“悬浮框”模块的结构。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style04.css，在project04.html文件中引入样式表文件。定义页面基础样式，具体代码如下： 1 *{margin:0; padding:0; outline:none; border:0;} 2 body{font-family:"微软雅黑"; background:#fdfdfd;} 在上述代码中，第1行代码用于清除浏览器的默认样式；第2行代码用于定义页面公共样式。

任务4-8 制作“导航及banner”模块

效果分析

1.结构分析

“导航及banner”模块整体由一个大盒子进行控制。导航部分可通过在<div>标签中嵌套<span>标签来搭建，banner部分为一张图片，可以通过为最外层的<div>标签定义背景图像来实现。“导航及banner”模块的结构如下图所示。

2.样式分析

导航部分在页面中居中显示，需要为其添加宽度、高度和背景样式。导航部分中的Logo可以通过插入背景图像的方式添加。导航部分中的搜索框可以使用圆角边框定义样式。同时，还需要为导航部分设置文字样式。Banner部分作为最外层大盒子的背景图像插入，因此需要为最外层id为“bg”的<div>标签设置宽度和高度。此外，还需要设置模块在页面中水平居中显示。

模块制作

1.搭建结构

在project04.html文件内书写“导航及baner”模块的HTML结构代码，具体如下： 1  2 <div id="bg"> 3 <div class="nav"> 4 <span class="margin_more">网站首页</span> 5 <span>床和床垫</span> 6 <span>卧室纺织品</span> 7 <span>灯具照明</span> 8 <span class="search">输入商品名称</span> 9 </div> 10 </div> 11  在上述代码中，class为“nav”的<div>标签用于搭建导航结构。多个<span>标签分别用于控制各个导航项。

2.控制样式

在样式表文件style04.css中书写“导航及banner”模块对应的CSS样式代码，具体如下： 1 /*head*/ 2 #bg{ 3 width:1200px; 4 height:617px; 5 background:url(../images/bg.png) no-repeat; 6 margin:0 auto; 7 } 8 .nav{ 9 width: 850px; 10 height: 50px; 11 background: url(../images/logo.png) left center no-repeat; 12 margin: 0 auto; 13 padding: 50px 0 0 150px; 14 } 15 .nav span{ 16 color:#685649; 17 font-size:16px; 18 padding:0 30px; 19 } 20 .nav .search{ 21 float:right; 22 width:200px; 23 height:30px; 24 line-height:30px; 25 border-radius:100px; 26 color:#aaa; 27 font-size:14px; 28 background:#fff url(../images/f.png) no-repeat 10px center; 29 } 30 /*head*/ 在上述代码中，第5行代码通过背景图像来定义banner图片；第11行代码用于添加导航部分的背景图片；第20~29行代码用于设置搜索框。

概要

保存project04.html与style04.css文件，刷新页面，效果如下图所示。

任务4-9 制作“热门推荐”模块

效果分析

1.结构分析

“热门推荐”模块由最外层id为“news”的大盒子整体控制。这个大盒子内部包含3个样式相同的小盒子，可以使用3个<div>标签分别进行控制。小盒子中的图片和文本信息可通过在<div>标签中嵌套<img>标签、<h2>标签和<p>标签来定义。“热门推荐”模块的结构如下图所示。

2.样式分析

“热门推荐”图片可通过给最外层id为“news”的大盒子定义背景图像来实现。需要为“news”盒子设置宽度、高度和背景样式。对于内部的3个<div>标签小盒子，先使用浮动对这些小盒子进行布局，然后再为这些小盒子添加外边距样式。

模块制作

1.搭建结构

在project04.html文件内书写“热门推荐”模块的HTML结构代码，具体如下： 1  2 <div id="news"> 3 <div class="news_con"> 4 <img src="images/news1.jpg" /> 5 <h2 class="one">BEST贝达</h2> 6 <p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p> 7 <p class="shadow"></p> 8 </div> 9 <div class="news_con"> 10 <img src="images/news2.jpg" /> 11 <h2 class="one">PONG波昂</h2> 12 <p class="two">当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p> 13 <p class="shadow"></p> 14 </div> 15 <div class="news_con"> 16 <img src="images/news3.jpg" /> 17 <h2 class="one">GUNDE冈德尔</h2> 18 <p class="two">一把椅子蕴含多少亮点？这一款，它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p> 19 <p class="shadow"></p> 20 </div> 21 </div> 22  上述代码中的3个<div>标签中分别嵌套了一个空的段落标签<p>，用于添加阴影效果。

2.控制样式

在样式表文件style04.css中书写CSS样式代码，用于控制“热门推荐”模块，具体如下： 1 /*news*/ 2 #news{ 3 width:1200px; 4 height:455px; 5 background:url(../images/dongtai.jpg) center top no-repeat; 6 margin:18px auto; 7 padding-top:120px; 8 } 9 .news_con{ 10 float:left; 11 margin-left:70px; 12 } 13 .news_con .one{ 14 width:284px; 15 height:50px; 16 padding-left:10px; 17 line-height:50px; 18 font-weight:bold; 19 font-size:16px; 20 border-bottom:1px solid #ddd; 21 } 22 .news_con .two{ 23 width:284px; 24 height:70px; 25 line-height:20px; 26 padding:10px 0 0 10px; 27 font-size:12px; 28 color:#bbb; 29 } 30 .news_con .shadow{ 31 width:294px; 32 height:5px; 33 background:url(../images/yinying.jpg) no-repeat; 34 } 35 /*news*/ 在上述代码中，第5行代码用于设置模块上方的“热门推荐”图片；第9~12行代码用于设置3个小<div>标签的浮动和外边距样式；第30~34行代码用于定义阴影效果。

概要

保存project04.html与style04.css文件，刷新页面，效果如下图所示。

任务4-10 制作“夏日生活”模块

效果分析

1.结构分析

“夏日生活”模块整体由一个大盒子控制。大盒子内部包含的图像可通过在<div>标签中嵌套<img>标签进行定义。“夏日生活”模块的结构如下图所示。

2.样式分析

“夏日生活”模块的背景是一个大盒子。需要为这个盒子添加宽度、高度和径向渐变背景颜色。“夏日生活”模块的标题可以使用<h3>标签定义。在背景大盒子内部，需要嵌套一个小盒子，用于放置图片。需要为小盒子内部的图片添加外边距样式，通过外边距样式让图片之间留有一定的空间。

模块制作

1.搭建结构

在project04.html文件内书写“夏日生活”模块的HTML结构代码，具体如下： 1  2 <div id="exhibition"> 3 <div class="tittle"></div> 4 <div class="pic"> 5 <img src="images/img1.jpg" /> 6 <img src="images/img2.jpg" /> 7 <img src="images/img3.jpg" /> 8 </div> 9 </div> 10

2.控制样式

在样式表文件style04.css中书写CSS样式代码，用于控制“夏日生活”模块，具体如下： 1 /*exhibition*/ 2 #exhibition{ 3 width:1200px; 4 background-image:radial-gradient(ellipse at center,#fff,#d6e4ed); 5 margin:50px auto; 6 } 7 .tittle{ 8 width:636px; 9 height:150px; 10 margin:0 auto; 11 background:url(../images/shenghuo.png) no-repeat center center; 12 } 13 #exhibition .pic{ 14 width:1000px; 15 height:360px; 16 margin:0 auto; 17 } 18 #exhibition .pic img{margin-left:45px;} 19 /*exhibition*/ 在上述代码中，第10行代码用于使放置图片的小盒子水平居中显示。

概要

保存project04.html与style04.css文件，刷新页面，效果如下图所示。

任务4-11 制作“版权信息”模块和“悬浮框”模块

效果分析

1.结构分析

“版权信息”模块和“悬浮框”模块的页面结构相对较为简单，均由外层的<div>标签整体控制。“悬浮框”模块内部需嵌套<img>标签来定义二维码图片。两个模块的结构如下图所示。

2.样式分析

“版权信息”模块背景的锯齿样式需通过背景图像来实现，因此需要为页脚模块添加背景图像。"悬浮框”模块需设置为固定定位，使该模块始终显示在页面的右下角。

模块制作

1.搭建结构

在project04.html文件内书写“版权信息”和“悬浮框”模块的HTML结构代码，具体如下： 1  2 <div id="footer">爱家居版权所有2016-2026京ICP备2222222号  京公网安备22222222222</div> 3  4  5 <div class="tree"> 6 <img src="images/erweima.png"/> 7 </div> 8

2.控制样式

在样式表文件style04.css中书写CSS样式代码，用于控制“版权信息”和“悬浮框”模块，具体代码如下： 1 /*foot*/ 2 #footer{ 3 width:1200px; 4 height:80px; 5 background:url(../images/footer_bg.jpg) repeat-x; 6 color:#fff; 7 text-align:center; 8 line-height:80px; 9 margin:0 auto; 10 } 11 .tree{ 12 position:fixed; 13 right:5%; 14 bottom:5%; 15 } 16 /*foot*/ 在上述代码中，第5行代码用于定义“版权信息”模块的锯齿效果；第11~15行代码通过固定定位的方式使悬浮框固定在页面的右下角。

概要

保存“project04.html”与“style04.css”文件，刷新页面，效果如下图所示。

项目5 “优课教育”网站首页制作

知识目标

掌握无序列表、有序列表和定义列表的特点，能够区分它们之间的差异。掌握4种链接伪类的特点，能够区分不同链接伪类的作用。

技能目标

掌握列表嵌套方法，能够使用无序列表、有序列表和定义列表对模块进行排列。掌握创建超链接的方法，能够为网页添加超链接。熟悉常见的页面布局类型，能够使用这些布局类型完成简单的页面布局。

项目描述

近些年，随着知识经济的快速发展，教育市场呈现良好的增长态势。人们由于受新的生活挑战与岗位竞争压力的影响，越来越多的人开始通过参加各种培训来提升自己，教育市场进入发展高峰期。为了扩大品牌影响力,“优课教育”CEO马总找到小思，想让小思帮忙制作一个网站，展示公司的教育产品。接到“优课教育”网站制作委托后，小思进行了分析，该网站用于展示教育产品，可使用大量的列表来布局，并使用超链接标签链接各个子页面。小思制订了近期计划，首先，学习列表和超链接的相关知识；然后，着手完成网站的制作。由于篇幅限制，本项目只演示“优课教育”网站首页的制作。“优课教育”网站首页效果如下图所示。

任务5-1 列表标签

需求分析

为了便于用户阅读，网页中的信息经常以列表的形式呈现。例如，淘宝网首页的商品分类，排列有序、条理清晰，呈现为列表的形式。在网页设计中，HTML提供了3种常用的列表，分别为无序列表、有序列表和定义列表，下面将对这3种列表进行讲解。

知识储备

1.无序列表

无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul> 在上述语法中，<ul>标签用于定义无序列表，<li>标签嵌套在<ul>标签中，用于描述具体的列表项，每对<ul><ul>标签中至少应包含一对<li></li>标签。下面通过一个案例来演示无序列表的用法，如例1所示。运行例1，效果如下图所示。从上图可以看出，无序列表默认的列表项目符号显示为“·”。注意： ①无序列表拥有type属性，用于指定不同的列表项目符号。但是HTML中不赞成使用type属性，一般通过CSS样式属性替代。 ②在<ul></ul>标签中只能嵌套<li></li>标签，<li与</li>之间相当于一个容器，可以嵌套其他元素。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>无序列表</title> 6 </head> 7 <body> 8 <h2>北京</h2> 9 <ul> 10 <li>朝阳区</li> 11 <li>海淀区</li> 12 <li>昌平区</li> 13 </ul> 14 </body> 15 </html>

2.有序列表

有序列表指有排列顺序的列表，其各个列表项按照一定的顺序排列。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下： <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ol> 在上述语法中，<ol>标签用于定义有序列表，<li>标签为具体的列表项。与无序列表类似，每对<ol></ol>标签中也至少应包含一对<li></li>标签。下面通过一个案例来演示有序列表的用法，如例2所示。运行例2，效果如下图所示。从上图可以看出，有序列表默认的列表项为数字，并且按照“1,2,3…”的顺序排列。注意：有序列表<ol>和列表项<li>拥有一些标签属性，如type、start、value等，但在网页中不常使用，一般通过CSS样式属性替代，读者了解即可。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>有序列表</title> 6 </head> 7 <body> 8 <h2>最新电影排行榜</h2> 9 <ol> 10 <li>可可西里</li> 11 <li>星际穿越</li> 12 <li>盗墓笔记</li> 13 </ol> 14 </body> 15 </html>

3.定义列表

定义列表常用于对术语或名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。定义列表的基本语法格式如下： <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl> 在上述语法格式中，<dl>标签用于指定定义列表，<dt>标签和<dd>标签并列嵌套于<dl></dl>标签中，其中，<dt>标签用于指定术语名词、<dd>标签用于对名词进行解释和描述。一对<dt></dt>标签可以对应多对<dd></dd>标签，即可以对一个名词进行多项解释。下面通过一个案例来演示定义列表的用法和效果，如例3所示。例3创建了一个定义列表，其中，<dt></dt>标签内为术语名词“物联网”，其后紧跟着3对<dd></dd>标签，用于对<dt></dt>标签中的名词进行解释和描述。运行例3，效果如下图所示。从上图容易看出，相对于<dt>标签中的术语或名词，<dd>标签中解释和描述性的内容带有一定的缩进效果。需要说明的是，在网页设计中，定义列表常用于实现图文混排效果，通常在<dt>标签中插入图片，在<dd>标签中放入对图片进行解释说明的文字。例如，下面的“艺术设计”模块就是通过定义列表来实现的，其HTML结构如下图所示。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title></title> 6 </head> 7 <body> 8 <dl> 9 <dt>物联网</dt>  10 <dd>物物相连的互联网</dd>  11 <dd>互联网的应用拓展</dd> 12 <dd>物品与物品之间进行信息交换和通信</dd> 13 </dl> 14 </body> 15 </html>

4.列表的嵌套应用

在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干子类，同样，在使用列表时列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要对列表进行嵌套。下面通过一个案例来演示列表嵌套的方法，如例4所示。在例4中，先定义了一个包含两个列表项的无序列表，然后在第一个列表项中嵌套一个有序列表，在第二个列表项中嵌套一个无序列表。运行例4，效果如下图所示。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>列表嵌套</title> 6 </head> 7 <body> 8 <h2>服装</h2> 9 <ul> 10 <li>男装 11 <ol>  12 <li>衬衫</li> 13 <li>西服</li> 14 </ol> 15 </li> 16 <li>女装 17 <ul>  18 <li>连衣裙</li> 19 <li>打底衫</li> 20 </ul> 21 </li> 22 </ul> 23 </body> 24 </html>

任务5-2 CSS控制列表样式

需求分析

定义无序列表或有序列表时，可以通过标签的属性控制列表的项目符号，但该方式不符合结构与表现分离的网页设计原则，为此，CSS提供了列表样式属性，用于单独控制列表项目符号。下面将详细讲解使用CSS控制列表项目符号的方法。

知识储备

1.list-style复合属性

与盒子模型的边框等属性一样，在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style复合属性设置列表样式的基本语法格式如下： list-style:列表项目符号列表项目符号的位置列表项目图像; 使用list-style复合属性时，通常按上述语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。但是在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style复合属性的属性值定义为none，然后通过为<li>标签设置背景图像的方式实现不同的列表项目符号。

2.通过设置背景图像的方式定义列表项目符号

列表样式对列表项目符号的控制能力不强，没有办法准确控制列表项目符号的位置，因此在实际工作中常通过为<li>标签设置背景图像的方式实现对列表项目符号的控制。下面演示通过为<li>标签设置背景图像的方式定义列表项目符号的方法，如例5所示。例5定义了一个无序列表，第8行代码通过使用“list-style:none;”样式清除列表的默认显示样式；第11行代码通过为<li>标签设置背景图像的方式定义列表项目符号。运行例5，效果如下图所示。在上图所示的页面中，每个列表项前都添加了列表项目图像，如果需要调整列表项目图像只需更改<li>标签的背景属性即可。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>设置背景图像定义列表项目符号</title> 6 <style type="text/css"> 7 li{ 8 list-style:none; /*清除列表的默认样式*/ 9 height:26px; 10 line-height:26px; 11 background:url(images/book.png) no-repeat left center; /*为<li>标签设置背景图像 */ 12 padding-left:25px; 13 } 14 </style> 15 </head> 16 <body> 17 <h2>黑马程序员原创教材</h2> 18 <ul> 19 <li>Photoshop CS6图像设计案例教程</li> 20 <li>网页设计与制作（HTML+CSS）</li> 21 <li>PHP网站开发实例教程</li> 22 <li>C语言开发入门教程</li> 23 </ul> 24 </body> 25 </html>

任务5-3 超链接标签

需求分析

一个网站通常由多个页面构成，用户如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。例如，当浏览淘宝网时，首先看到的是其首页，当单击导航栏中的导航项后，页面会跳转到对应的子页面，这是因为导航项添加了超链接功能。下面将对超链接标签的相关知识进行详细讲解。

知识储备

1.创建超链接

在HTML中创建超链接非常简单，只需用<a></a>标签嵌套需要链接的对象即可。创建超链接的基本语法格式如下： <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 在上述语法格式中，<a>标签是一个行内元素，用于定义超链接；href属性和target属性为<a>标签的常用属性，对它们的具体解释如下。 href属性：用于指定链接目标的URL，当为<a>标签应用href属性时，它就具有了超链接的功能。 target属性：用于指定链接页面的打开方式，其取值有_self和_blank 两种。其中，_self为默认值，表示在原窗口中打开；_blank表示在新窗口中打开。下面通过创建一个带有超链接功能的简单页面来演示超链接的用法，如例6所示。例6创建了两个超链接，并通过href属性将这两个超链接的链接目标分别指定为“黑马程序员教程”和“百度”。同时，通过target属性定义第一个链接页面在原窗口打开，第二个链接页面在新窗口打开。运行例6，效果如下图所示。在上图中，被超链接标签<a>定义的文本“百度一下，你就知道”颜色特殊且带有下画线效果，这是因为超链接标签本身有默认的显示样式。当鼠标指针移至超链接图像或文本上时，鼠标指针会变为的形状，同时，页面的左下方会显示链接页面的地址。当单击超链接图像时，将会在原窗口中打开链接页面，如下图所示。当单击超链接文本时，将会在新窗口中打开链接页面，如下图所示。注意： ①暂时没有确定超链接目标时，通常将<a>标签的href属性的属性值定义为“#”（即href="#"），表示该超链接暂时为一个空超链接。 ②在网页中，不仅可以为文本创建超链接，还可以为图像、表格、音频、视频等网页元素创建超链接。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>创建超链接</title> 6 </head> 7 <body> 8 <a href="https://book.itheima.net/" target="_self"><img src="images/click.png" /></a><br /><br /> 9 <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a> 10 </body> 11 </html>

2.创建锚点链接

浏览网站时，为了提高信息的检索速度，常需要用到HTML中一种特殊的超链接——锚点链接。通过创建锚点链接，用户能够快速定位到目标内容。下面通过一个案例演示创建锚点链接的方法，如例7所示。在例7中，先使用“<a href="#id名">链接文本</a>”创建链接文本，其中，“href="#id名"”用于指定链接目标的id名，如第10～14行代码所示，然后使用相应的id名标注跳转目标的位置。运行例7，效果如下图所示。上图为一个较长的网页页面，当单击“黑马程序员原创教材”下的超链接时，页面会自动定位到相应的内容介绍部分。例如，单击“网页设计与制作（HTML+CSS）”超链接时，页面定位效果如下图所示。通过例7可知，创建锚点链接分为定义锚点和链接到锚点两个步骤。（1）使用“<a href="#id名">链接文本<a>”创建链接文本。（2）使用相应的id名标注跳转目标的位置。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>锚点链接</title> 6 </head> 7 <body> 8 黑马程序员原创教材： 9 <ul> 10 <li><a href="#one">网页设计与制作（HTML+CSS）</a></li> 11 <li><a href="#two">PHP程序设计基础教程</a></li> 12 <li><a href="#three">Java基础入门</a></li> 13 <li><a href="#four">C语言开发入门教程</a></li> 14 <li><a href="#five">Photoshop CS6图像设计案例教程</a></li> 15 </ul> 16 <h3 id="one">网页设计与制作（HTML+CSS）</h3> 17 <p>HTML与CSS是网页制作技术的核心和基础，也是每个网页制作者必须要掌握的基本知识，两者在网页设计中不可或缺。本书从初学者的角度，以形象的比喻、实用的案例、通俗易懂的语言详细介绍了使用HTML与CSS进行网页设计与制作的各方面内容和技巧。</p> 18 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 19 <h3 id="two">PHP程序设计基础教程</h3> 20 <p>PHP是一种运行于服务器端并完全跨平台的嵌入式脚本编程语言，是目前开发各类Web应用的主流语言之一。本书就是面向PHP初学者特别推出的一本入门教材，站在初学者的角度，以形象的比喻、丰富的图解、实用的案例、通俗易懂的语言详细讲解了PHP语言。</p> 21 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 22 <h3 id="three">Java基础入门</h3> 23 <p>本书从初学者的角度详细讲解了Java开发中重点用到的多种技术。本书一共11章，包括Java开发环境的搭建及其运行机制、基本语法、面向对象的思想，采用典型翔实的例子、通俗易懂的语言阐述面向对象中的抽象概念。</p> 24 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 25 <h3 id="four">C语言开发入门教程</h3> 26 <p>本书借鉴了市面多本C语言教材的优点，知识系统全面，涵盖数组、函数、指针、字符串、预处理、数据结构、文件操作、宏等主流C语言开发技术。在章节编排上力求循序渐进，在语言描述上力求准确、易懂，在案例设计上力求实用。</p> 27 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 28 <h3 id="five">Photoshop CS6图像设计案例教程</h3> 29 <p>本书采用理论联系实际的案例驱动式教学方法，以每节一个案例的形式，按节细化知识点，用案例带动知识点的学习，将抽象的知识形象地传授给读者。</p> 30</body> 31 </html>

3.通过链接伪类控制超链接

定义超链接时，为了提升用户体验，经常需要为超链接指定不同的状态，使超链接在未访问时、访问后和鼠标指针悬停时的样式不同。在CSS中，通过链接伪类可以实现不同的链接状态。伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标签名、类名或id名加“:”构成。超链接标签<a>的伪类有4种，具体如下表所示。上表中列出了超链接标签<a>的4种伪类，分别用于定义未访问时、访问后，以及鼠标指针经过、悬停时和单击不动时超链接的状态。下面使用链接伪类来制作一个网页导航，如例8所示。例8通过链接伪类定义超链接不同状态的样式。其中，第9行代码用于清除超链接默认的下画线；第14行代码用于在鼠标指针悬停时为超链接添加下画线。运行例8，效果如下图所示。在上图中，超链接按设置的默认祥式显示，文本颜色为紫色、无下画线。当鼠标指针移至超链接文本上时，文本颜色变为绿色且添加下画线效果，如下图所示。当鼠标单击超链接文本不动时，文本颜色变为红色且添加默认的下画线效果，如下图所示。在实际工作中，通常只需要使用a:link、a:visited和a:hover定义未访问时、访问后和鼠标指针悬停时的超链接样式。并且a:link和a:visited经常应用相同的样式，以使未访问时和访问后的超链接样式保持一致。注意： ①同时使用4种链接伪类时，需要按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。 ②除了文本样式外，链接伪类还可用于控制超链接的背景、边框等样式。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>链接伪类</title> 6 <style type="text/css"> 7 a:link,a:visited{ /*未访问时和访问后*/ 8 color:#F0F; 9 text-decoration:none; /*清除超链接默认的下画线*/ 10 margin-right:20px; 11 } 12 a:hover{ /*鼠标指针悬停时*/ 13 color:#0F0; 14 text-decoration:underline; /*鼠标指针悬停时出现下画线*/ 15 } 16 a:active{color:#F00;} /*单击不动时*/ 17 </style> 18 </head> 19 <body> 20 <a href="#">学习资源</a> 21 <a href="#">课程中心</a> 22 <a href="#">原创教材</a> 23 <a href="#">黑马社区</a> 24 </body> 25 </html>

任务5-4 页面建设准备工作

在制作“优课教育”网站首页之前，小思需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析和定义基础样式，具体介绍如下。

网站素材整理

1.建立站点

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本项目在“D盘:\案例源码\chapter05”文件夹中新建一个文件夹作为网站根目录，并命名为“education”。

（2）在根目录下新建文件

打开网站根目录“education”，在根目录下新建“images”和“css”文件夹，分别用于存放网站所需的图像和CSS样式表文件。

（3）新建站点

打开Dreamweaver，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称“education”。然后，浏览并选择站点根目录的存储位置。单击“保存”按钮，站点即建立成功。

2.切图

使用Fireworks CS6的“切片”工具，导出“优课教育”网站首页中的素材图片，并存储在站点中的“images”文件夹中。导出后的图片素材如下图所示。

页面结构分析

1.HTML结构分析

“优课教育”网站首页整体上分为“导航”模块、“主体”模块和“版权信息”模块3部分。其中，“主体”模块又可以分为“banner”模块、“课程分类”模块和“精品展示”模块3部分，如下图所示。

2.CSS样式分析

在“优课教育”网站首页中，“导航”模块和“版权信息”模块通栏显示，“主体”模块宽980px且居中显示。另外，页面背景为浅橙色，页面中的文字字体多为“微软雅黑”，这些可以通过CSS公共样式进行定义。最后，在“导航”模块和“精品展示”模块中，需要设置鼠标指针经过、悬停时超链接的状态。

定义基础样式

1.页面布局

下面对“优课教育”网站首页进行整体布局。在站点根目录下新建一个HTML文件，并命名为“poject05”，然后使用<div>标签对页面进行布局，具体代码如project05.html所示。

project05.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>优课教育网站首页</title> 6 </head> 7 <body> 8 <div id="header"> 9 </div> 10 <div id="content"> 11 </div> 12 <div id="footer"> 13 </div> 14 </body> 15 </html> 上述代码定义了id为“header”“content”和“footer”的三个<div>标签，分别用于搭建“导航”模块、“主体”模块和“版权信息”模块的结构，将页面整体上分为3部分。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style05.css，使用外链式CSS在project05.html文件中引入样式表文件。然后，定义页面的基础样式，具体代码如下： 1 /*重置浏览器的默认样式*/ 2 *{margin:0; padding:0; list-style:none;} 3 /*全局控制*/ 4 body{background:#fff9ed; font-family:"微软雅黑"; font-size:14px;} 5 a:link,a:visited{text-decoration:none; color:#fff; font-size:16px;} 在上述代码中，第2行代码用于清除浏览器的默认样式；第4行和第5行代码用于定义页面公共样式。

任务5-5 制作“导航”模块

效果分析

1.结构分析

“导航”模块的背景通栏显示，需要在最外层嵌套一个大盒子。“导航”模块由Logo和6个子导航项构成，可以通过在无序列表标签<ul>中嵌套<li>标签定义。此外，每个子导航项都是可以单击的超链接，所以需要在<li>标签中嵌套超链接标签<a>。“导航”模块的结构如下图所示。

2.样式分析

通栏显示需要将最外层大盒子的宽度设置为100%、且背景图像沿x轴平铺。“导航”模块居中显示，需要为<ul>标签设置固定宽度和水平居中样式。“导航”模块中的各子导航项排列在同一行，需要为<li>标签设置左浮动。此外，还需要为超链接标签<a>设置鼠标指针移至时显示的背景图片的样式。

模块制作

1.搭建结构

在project05.html文件内书写“导航”模块的HTML代码，具体代码如下： 1 <div id="header"> 2 <ul class="nav"> 3 <li class="logo"><img src="images/logo.png" /></li> 4 <li><a href="#">首页</a></li> 5 <li><a href="#">学校介绍</a></li> 6 <li><a href="#">课程设置</a></li> 7 <li><a href="#">师资力量</a></li> 8 <li><a href="#">招生问答</a></li> 9 <li><a href="#">教学活动</a></li> 10 </ul> 11 </div> 在上述代码中，定义id为“header”的<div>标签用于搭建导航的整体结构。无序列表标签<ul>整体定义“导航”模块，<li>标签搭建“导航”模块中各个子导航项的结构。此外，通过超链接标签<a>来设置单击导航中的超链接时的跳转链接地址。

2.控制样式

在样式表文件syle05.css中书写CSS样式代码，用于控制“导航”模块，具体如下： 1 #header{ 2 width:100%; 3 height:128px; 4 background:url(../images/head_bg.jpg) repeat-x; 5 border-bottom:3px solid #d5d5d5; 6 } 7 .nav{ 8 width:980px; 9 margin:0 auto; 10 } 11 li{float:left;} 12 li a{ 13 display:inline-block; 14 height:91px; 15 width:119px; 16 text-align:center; 17 line-height:70px; 18 } 19 li a:hover{background:url(../images/xuanfu.png) center center;} 在上述代码中，第12~18行代码通过将行内元素<a>标签转换为块元素来设置宽度、高度，并通过text-align属性设置文本居中对齐；第19行代码用于设置鼠标指针移至超链接时显示的背景图片的效果。

概要

保存style05.css样式表文件，刷新页面，效果如下图所示。当鼠标指针移至“导航”模块的文本超链接上时，将会显示超链接的背景图片，如下图所示。

任务5-6 制作“banner”模块和“课程分类”模块

效果分析

1.结构分析

“banner”模块的结构非常简单，由一张图片构成。“课程分类”模块由一个大盒子构成，该模块主要包括3部，由3个<dl>标签搭建而成。其中，左边的图片由<dt>标签来定义，右边的内容部分由<dd>标签定义。另外，内容部分的文字说明可以通过<a>标签定义。“banner”模块和“课程分类”模块的结构如下图所示。

2.样式分析

“课程分类”模块的左、中、右3部分位于同一行，需要为<dl>标签设置浮动。同样，也需要为各个模块中的<dt>标签、<dd>标签设置浮动。当鼠标指针移至超链接上时，“课程分类”模块的背景颜色会发生变化。

模块制作

1.搭建结构

在project05.html文件的“<div id="content"><div>”标签内书写“banner”模块和“课程分类”模块的HTML代码，具体如下： 1 <div id="content"> 2 <div class="banner"><img src="images/banner.jpg" /></div> 3 <div class="style_bg"> 4 <div class="style"> 5 <dl> 6 <dt class="left1"></dt><dd class="left2"><a href="#">大学专区</a></dd> 7 <dt class="left3"></dt><dd class="left4"><a href="#">求职专区</a></dd> 8 </dl> 9 <dl> 10 <dt class="center1"></dt><dd class="center2"><a href="#">高中专区</a></dd> 11 <dt class="center3"></dt><dd class="center4"><a href="#">考证专区</a></dd> 12 </dl> 13 <dl class="third"> 14 <dt class="right1"></dt><dd class="right2"><a href="#">线上精品课专区</a></dd> 15 </dl> 16 </div> 17 </div> 18 </div> 上述代码分别定义了class为“banner”和“style_bg”的两个<div>标签，用于搭建“banner”模块和“课程分类”模块的结构。另外，分别使用3个<dl>标签定义了“课程分类”模块中的左、中、右3部分。最后、通过定义id为“content”的大盒子来整体控制“主体”模块的结构。

2.控制样式

在样式表文件style05.css 中书写CSS样式代码，用于控制“banner”模块和“课程分类”模块，具体如下： 1 #content{ 2 width:980px; 3 margin:0 auto; 4 } 5 .style_bg{ 6 width:908px; 7 height:330px; 8 background:#6dbf2d; 9 padding:10px 36px 5px; 10 } 11 .style{ 12 width:892px; 13 height:314px; 14 background:#fff; 15 padding:8px 10px 8px 6px; 16 } 17 .style dl{ 18 width:279px; 19 height:313px; 20 float:left; 21 margin-left:4px; 22 } 23 .style .third{width:322px;} 24 .style dt,.style dd{float:left;} 25 .style .left1,.style .left3,.style .center1,.style .center3{width:162px;} 26 .style .left2,.style .left4,.style .center2,.style .center4,.style .right2{width:117px;} 27 .style .left1,.style .left2,.style .center1,.style .center2{ margin-bottom:8px;} 28 .style .left1{ 29 height:169px; 30 background:url(../images/pic01.jpg) no-repeat; 31 } 32 .style .left2{ 33 height:169px; 34 line-height:169px; 35 } 36 .style .left3{ 37 height:137px; 38 background:url(../images/pic02.jpg) no-repeat; 39 } 40 .style .left4{ 41 height:137px; 42 line-height:137px; 43 } 44 .style .center1{ 45 height:117px; 46 background:url(../images/pic03.jpg) no-repeat; 47 } 48 .style .center2{ 49 height:117px; 50 line-height:117px; 51 } 52 .style .center3{ 53 height:188px; 54 background:url(../images/pic04.jpg) no-repeat; 55 } 56 .style .center4{ 57 height:188px; 58 line-height:188px; 59 } 60 .style .right1{ 61 width:205px; 62 height:314px; 63 background:url(../images/pic05.jpg) no-repeat; 64 } 65 .style .right2{ 66 height:314px; 67 line-height:314px; 68 } 69 .style a{ 70 display:block; 71 background:#f2f2f2; 72 text-align:center; 73 color:#333; 74 } 75 .style a:hover{background:#6dbf2d;} 在上述代码中，第5~10行代码用于设置“课程分类”模块的背景颜色和内边距；第20行和第24行代码用于设置<dl>标签、<dt>标签、<dd>标签左浮动，使其在同一行排列；第25行和第26行代码用于为宽度相同的模块统一定义宽度；第30、38、46、54、63行代码分别用于为<dt>标签设置不同的背景图像；第75行代码用于设置鼠标指针移至<a>标签上时，其背景颜色变为绿色。

概要

保存style05.css样式表文件，刷新页面，效果如下图所示。

任务5-7 制作“精品展示”模块

效果分析

1.结构分析

“精品展示”模块分为标题和课程2部分。其中，标题部分由<h2>标签来定义。精品课程部分中的4个列表结构可以通过<dl>标签搭建。同时，使用<dt>标签定义列表中的图片，<dd>标签定义列表中的产品信息。另外，需要通过超链接标签<a>为各个课程设置链接地址。“精品展示”模块的结构如下图所示。

2.样式分析

需要为标题<h2>标签设置字体样式，并设置背景颜色；需要为<dl>标签设置左浮动，并通过“margin-right”设置各个列表间的距离；需要为<dt>标签设置不同的背景图像，为<dd>标签设置文字样式。

模块制作

1.搭建结构

在project05.html文件的“<div id="content"></div>”标签内书写“精品展示”模块的HTML代码，具体如下： 1 <h2>热门课程 / Popular courses</h2> 2 <div class="current"> 3 <dl> 4 <dt class="match_1"></dt> 5 <dd class="current01">软件工程师课程</dd> 6 <dd class="current02"><a class="three" href="#">高级IT人才的捷径</a></dd> 7 </dl> 8 <dl> 9 <dt class="match_2"></dt> 10 <dd class="current01">Java课程</dd> 11 <dd class="current02"><a class="three" href="#">工程师必修课程</a></dd> 12 </dl> 13 <dl> 14 <dt class="match_3"></dt> 15 <dd class="current01">Python课程</dd> 16 <dd class="current02"><a class="three" href="#">热门行业新趋势</a></dd> 17 </dl> 18 <dl> 19 <dt class="match_4"></dt> 20 <dd class="current01">UI设计课程</dd> 21 <dd class="current02"><a class="three" href="#">设计师必修课程</a></dd> 22 </dl> 23 </div> 上述代码定义了class为“current”的<div>标签整体控制“精品展示”部分的列表结构，并使用自定义列表标签<dl>嵌套<dt>标签、<dd>标签来搭建“精品展示”模块的图片和产品信息。

2.控制样式

在样式表文件style05.css中书写CSS样式代码，用于控制“精品展示”模块，具体如下： 1 h2{ 2 width:259px; 3 height:45px; 4 background:#6dbf2d; 5 font-size:20px; 6 font-weight:100; 7 line-height:45px; 8 text-align:center; 9 color:#fff; 10 margin-top:80px; 11 } 12 .current{ 13 width:958px; 14 height:342px; 15 background:#fff; 16 border:1px solid #dcd2ba; 17 padding:13px 0 0 20px; 18 } 19 .current dl{ 20 width:229px; 21 height:330px; 22 border:1px solid #dcd2ba; 23 float: left; 24 margin-right:5px; 25 } 26 .current dt{ 27 width:229px; 28 height:212px; 29 border-bottom:1px solid #dcd2ba; 30 } 31 .current01{ 32 width:229px; 33 height:66px; 34 background:#fff; 35 line-height:66px; 36 color:#7a7a7a; 37 font-size:22px; 38 text-align:center; 39 } 40 .current02{ 41 width:140px; 42 height:38px; 43 background:#6dbf2d url(../images/gouwu.jpg) left center no-repeat; 44 margin:0 14px; 45 line-height:38px; 46 padding-left:60px; 47 color:#fff; 48 } 49 .match_1{background:url(../images/match01.jpg) center center no-repeat;} 50 .match_2{background:url(../images/match02.jpg) center center no-repeat;} 51 .match_3{background:url(../images/match03.jpg) center center no-repeat;} 52 .match_4{background:url(../images/match04.jpg) center center no-repeat;} 53 .current a{display:inline-block; width:180px; height:38px;} 在上述代码中，第12~18行代码用于整体控制“精品展示”模块的宽度、高度、背景颜色、边距和边框效果；第49～53行代码用于为<dt>标签设置不同的背景图像。

概要

保存style05.css样式表文件，刷新页面，效果如下图所示。

任务5-8 制作“版权信息”模块

效果分析

1.结构分析

“版权信息”模块通栏显示，整体由一个<div>标签构成。版权信息的内容通过两个<p>标签来定义。其具体结构如下图所示。

2.样式分析

“版权信息”模块通栏显示，需要设置其宽度为100%。版权信息内容的字体为“微软雅黑”，字号为14px，文字颜色为白色，文本居中对齐显示，这些样式均需要使用CSS文本外观属性来定义。

模块制作

1.搭建结构

在project05.html文件内书写“版权信息”模块的HTML代码，具体如下： <div id="footer"> <p>Copyright © 2020-2030 Edu.com, Allrights reserved.</p> <p>2020-2030，版权所有优课网 00CP备2222222222</p> </div> 上述代码定义了id为“footer”的<div>标签，用于整体控制页面中的“版权信息”模块。另外，通过两个<p>标签定义段落文本，用于搭建版权信息内容的结构。

2.控制样式

在样式表文件style05.css中书写CSS样式代码，用于控制“版权信息”模块，具体如下： 1 #footer{ 2 width:100%; 3 height:103px; 4 background:#020202; 5 color:#fff; 6 line-height:26px; 7 text-align:center; 8 padding-top:50px; 9 margin-top:65px; 10 } 在上述代码中，第2行代码用于设置“版权信息”模块的通栏显示效果；第7行代码用于设置段落文本内容居中对齐；第9行代码用于拉开“版权信息”模块与“主体”模块间的距离。

概要

保存style05.css样式表文件，刷新页面，效果如下图所示。

项目6 “千年之恋”注册页面制作

知识目标

了解表格相关标签，能够区分不同表格标签的作用。熟悉表单的结构，知道各部分表单结构的作用。掌握不同类型表单控件的特点，能够区分它们之间的差异。

技能目标

掌握CSS控制表格样式的方法，能够在网页中设置不同的表格样式。掌握CSS控制表单样式的方法，能够在网页中设置不同的表单样式。

项目描述

随着互联网的不断发展，网络交友已经成为人们生活的重要内容。目前，网络上比较流行的交友方式有QQ、微信、论坛等。此外，还有一些专业的交友网站。“千年之恋”就是众多交友网站中的一个。为了更准确地了解用户信息，近日“千年之恋”项目负责人致电HC公司王经理，计划对“千年之恋”注册页面进行改版。接到王经理安排的任务后，小思制订了近期学习及工作计划：巩固表格及表单相关知识，然后使用表格及<div>标签进行布局，完成页面改版任务。“千年之恋”注册页面效果如下图所示。

任务6-1 认识表格相关标签

需求分析

在网页制作中，表格至关重要，除了用于统计数据，还可以用于进行网页数据排版。通过排版，可使用户更方便地浏览这些网页数据。在网页中，表格是由相关标签组成的，要想使用表格，先要认识表格相关标签。下面将对表格相关标签进行详细讲解。

知识储备

1.创建表格

创建表格非常简单，只需要使用对应的标签搭建表格结构即可。表格的开始标签是<table>，结束标签是</table>，所有表格内容都必须位于这两个标签之间。要想创建一个完整的表格，除了要使用表格标签外，还需要使用行标签<tr>和单元格标签<td>。创建表格的具体语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 对上述语法格式中各项的具体解释如下。 <table></table>：用于定义一个表格。 <tr></tr>：用于定义表格中的一行。<tr>标签必须嵌套在<table>标签中，<table>标签中包含几对<tr></tr>，就表示该表格有几行。 <td></td>：用于定义表格中的单元格。<td>标签必须嵌套在<tr>标签中，<tr>标签中包含几对<td></td>，就表示该行中有多少列。下面创建一个表格，具体代码如例1所示。在例1中，使用表格的相关标签定义了一个3行4列的表格。运行例1，效果如下图所示。在上图中，表格显示为3行4列，并且具有边框效果。表格的宽度和高度被文本内容撑开。如果去掉表格的边框效果，即删除表格border属性后的效果如下图所示。从上图可以看出，表格中内容的排列顺序并没有发生变化，但是边框消失了。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>创建表格</title> 6 </head> 7 <body> 8 <table border="1"> 9 <tr> 10 <td>第1行第1列</td> 11 <td>第1行第2列</td> 12 <td>第1行第3列</td> 13 <td>第1行第4列</td> 14 </tr> 15 <tr> 16 <td>第2行第1列</td> 17 <td>第2行第2列</td> 18 <td>第2行第3列</td> 19 <td>第2行第4列</td> 20 </tr> 21 <tr> 22 <td>第3行第1列</td> 23 <td>第3行第2列</td> 24 <td>第3行第3列</td> 25 <td>第3行第4列</td> 26 </tr> 27 </table> 28 </body> 29 </html>

2.<table>标签的属性

在网页设计中，为<table>标签添加相关属性可以使表格的样式更加丰富。HTML提供了一系列的属性，用于控制表格的显示样式，如border、align等。<table>标签的常用属性如下表所示。上表中列举了<table>标签的常用属性，下面对这些属性进行详细讲解。

（1）border属性

在<table>标签中，border属性会为每个单元格添加边框（称之为内边框），也会为表格添加一个大边框（称之为外边框）。如果 border属性的属性值发生改变，只有外边框的尺寸会发生变化，内边框尺寸不变，仍保持为默认的1px。默认情况下border属性的属性值为0，即表格既不显示内边框，也不显示外边框。为了使读者更好地理解border属性的用法，将例1中<table>标签的border属性的属性值设置为10px，即将例1中的第8行代码更改为 <table border="10"> 保存HTML文件，刷新页面，设置border="10"后的表格边框效果如下图所示。从上图可以看出，表格的外边框变宽了，内边框没有发生变化。

（2）cellspacing属性

cellspacing属性用于设置单元格与单元格之间的空白间距，该属性默认属性值为2px。将例1中<table>标签的cellspacing属性的属性值设置为20px，即将第8行代码更改为 <table border="10" cellspacing="20"> 保存HTML文件，刷新页面，设置cellspacing="20"后的表格边框效果如下图所示。从上图可以看出，单元格与单元格及单元格与表格外边框之间都拉开了20px的距离。

（3）cellpadding属性

cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，该属性默认属性值为1px。将例1中<table>标签的cellpadding属性的属性值设置为10px，即将第8行代码更改为 <table border="20" cellspacing="20" cellpadding="10"> 保存HTML文件，刷新页面，设置cellpading="10"后的表格效果如下图所示。从上图可以看出，单元格内容与单元格边框之间出现了空白间距。 Cellpadding属性类似于盒子模型的内边距属性padding，是指单元格内部的距离，而另一个属性cellspacing则是指外部单元格与单元格之间的距离。可以结合盒子模型的内边距和外边距理解cellpadding属性与cellspacing属性的不同。

（4）width属性和height属性

默认情况下，表格的宽度和高度都是靠表格中的内容撑开的，如果想要更改表格的尺寸，就需要为该表格设置宽度和高度。在表格属性中，width属性用于设置表格宽度，height属性用于设置表格高度。下面为例1中的表格设置宽度和高度，即将第8行代码更改为 <table border="20" cellspacing="20" cellpadding="10" width="600" height="300"> 保存HTML文件，刷新页面，设置宽度和高度后的表格效果如下图所示。对比可知，表格的宽度和高度发生了明显的变化，通过测量工具测量后发现表格的总宽度为600px，总高度为300px。需要说明的是，为表格添加宽度和高度的同时，每一个单元格的宽度和高度均会等比例发生变化。注意：当为表格标签<table>同时设置width、height和cellpadding属性时，cellpadding属性的显示效果不会太明显，所以一般在未给表格设置width和height属性的情况下测试cellpadding属性。

（5）align属性

align属性用于定义元素的水平对齐方式，当对<table>标签应用align属性时，可以控制表格在页面中的水平对齐方式，但单元格中的内容不受align属性的影响。align属性的属性值为left、center、right。下面为例1中的<table>标签添加align属性，即将第8行代码更改为 <table border="20" cellspacing="20" cellpadding="10" width="600" height="300" align="center"> 保存HTML文件，刷新页面，设置align属性后的表格效果如下图所示。从上图可以看出，表格位于浏览器水平居中的位置，但单元格中的内容不受影响，仍靠左显示。

（6）bgcolor属性

bgcolor属性用于为表格指定一个背景颜色。下面为例1中的表格添加背景颜色，可以将第8行代码更改为 <table border="20" cellspacing="20" cellpadding="10" width="600" height="300" align="center" bgcolor="yellow"> 保存HTML文件，刷新页面，添加背景颜色后的表格效果如下图所示。

（7）background属性

backgound属性用于为表格指定一个背景图像。下面为例1中的表格添加背景图像，可以将第8行代码更改为 <table border="20" cellspacing="20" cellpadding="10" width="600" height="300" align="center" bgcolor="red" background="images/pic01.jpg"> 保存HTML文件，刷新页面，添加背景图像后的表格效果如下图所示。在上图中，图像在表格中沿水平方向和垂直方向平铺，填满表格。在<table>标签的各种属性中，需要重点掌握cellspacing属性和cellpadding属性，其他的属性均可用CSS样式属性替代。

3.<tr>标签的属性

通过对<table>标签的各种属性进行设置，可以控制表格的整体显示样式。如果想单独设置表格中某一行的显示效果，就需要为行标签<tr>定义属性。<tr>标签的常用属性如下表所示。上表中列举了<tr>标签的常用属性，其中大部分属性与<table>标签的属性相同，用法也类似。为了使读者加深对这些属性的理解，下面通过一个案例来演示<tr>标签的常用属性效果，如例2所示。在例2中，第9行代码用于为<tr>标签设置相应的属性，从而改变第一行表格内容的显示样式。运行例2，效果如下图所示。从上图可以看出，表格中的第一行内容按照设置的高度显示、文本内容水平垂直居中，并且添加了黄色背景颜色。注意： ①<tr>标签无宽度属性width，其宽度取决于表格标签<table>。 ②可以对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。 ③不建议对<tr>标签应用background属性，以免出现兼容问题。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>行标签tr的属性</title> 6 </head> 7 <body> 8 <table border="1" width="300" height="200" align="center"> 9 <tr height="60" align="center" valign="middle" bgcolor="yellow"> 10 <td>姓名</td> 11 <td>语文</td> 12 <td>数学</td> 13 <td>英语</td> 14 </tr> 15 <tr> 16 <td>小王</td> 17 <td>89</td> 18 <td>90</td> 19 <td>78</td> 20 </tr> 21 <tr> 22 <td>小李</td> 23 <td>90</td> 24 <td>87</td> 25 <td>99</td> 26 </tr> 27 <tr> 28 <td>小张</td> 29 <td>82</td> 30 <td>98</td> 31 <td>96</td> 32 </tr> 33 </table> 34 </body> 35 </html>

4.<td>标签的属性

通过定义单元格标签<td>的属性，可以单独控制某个单元格的样式。<td>标签的常用属性如下表所示。上表中列出了<td>标签的常用属性，其中大部分属性与<tr>标签的属性相同，用法也类似。与<tr>标签不同的是，<td>标签增加了width属性，用于指定单元格的宽度。同时<td>标签还拥有colspan属性和rowspan属性，这两个属性是<td>标签的专有属性，也是<td>标签的重要属性，主要用于对单元格进行合并。下面通过一个案例对colspan属性和rowspan属性的用法做具体演示，如例3所示。在例3中，第11行代码通过将<td>标签的colspan属性设置为2，使当前单元格横跨2列；第19行代码将<td>标签的rowspan属性设置为3，使当前单元格竖跨3行。运行例3，效果如下图所示。从上图可以看出，第1行第2个单元格横跨了2列，第3行第1个单元格竖跨了3行，实现了单元格合并效果。注意：当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>合并单元格</title> 6 </head> 7 <body> 8 <table border="1" width="300" height="200" align="center"> 9 <tr height="60" align="center" valign="middle" bgcolor="yellow"> 10 <td>学校名称</td> 11 <td colspan="2">希望小学</td> 12 </tr> 13 <tr align="center"> 14 <td>年级</td> 15 <td>科目</td> 16 <td>平均分数</td> 17 </tr> 18 <tr align="center"> 19 <td rowspan="3">一年级</td> 20 <td>语文</td> 21 <td>80</td> 22 </tr> 23 <tr align="center"> 24 <td>数学</td> 25 <td>89</td> 26 </tr> 27 <tr align="center"> 28 <td>英语</td> 29 <td>86</td> 30 </tr> 31 </table> 32 </body> 33 </html>

5.<th>标签的属性

<th>标签用于设置表格表头。表头一般位于表格的第一行或第一列，使用<th>标签控制的表头文本显示为粗体。下面在例3的基础上对代码进行修改，演示<th>标签的使用方法，将第10行和第11行代码更改为 <th>学校名称</th> <th colspan="2">希望小学</th> 保存HTML文件，刷新页面，设置表头后的表格效果如下图所示。

任务6-2 CSS控制表格样式

需求分析

虽然表格布局逐渐被DIV+CSS布局所替代，但是作为传统的HTML元素，表格在网页制作中的作用是不可取代的，它不仅是实现数据显示的好方式，而且还可以通过CSS控制，轻松地对网页元素进行排版。下面将对使用CSS控制表格样式的方法进行详细讲解。

知识储备

1.使用CSS控制表格边框

通过表格属性可以在HTML结构中直接控制表格的边框，但这种书写方式不符合结构与表现分离的网页设计原则。为了方便技术人员操作和修改网页代码，可以使用CSS控制表格的边框。下面通过一个案例来演示使用CSS控制表格边框的方法，如例4所示。在例4中，第7~13行代码用于设置表格的宽度、高度、边框样式。运行例4，效果如下图所示。从上图可以看出，虽然通过CSS设置了表格的边框样式，但是单元格并没有添加任何边框效果。所以，在使用CSS设置表格的边框时，还要为单元格单独设置相应的边框样式。在例4的CSS样式代码中添加如下代码： td,th{border:1px solid #F00;} /*为单元格单独设置边框*/ 保存HTML文件，刷新网页，效果如下图所示。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>控制表格边框</title> 6 <style type="text/css"> 7 table{ 8 width:280px; 9 height:280px; 10 border:1px solid #F00; /*设置table的边框*/ 11 text-align: center; 12 margin:0 auto; 13 } 14 </style> 15 </head> 16 <body> 17 <table> 18 <tr> 19 <th>姓名</th> 20 <th>性别</th> 21 <th>年龄</th> 22 <th>身高</th> 23 </tr> 24 <tr> 25 <th>小丽</th> 26 <td>女</td> 27 <td>18</td> 28 <td>160cm</td> 29 </tr> 30 <tr> 31 <th>小红</th> 32 <th>女</th> 33 <td>16</td> 34 <td>163cm</td> 35 </tr> 36 <tr> 37 <th>小明</th> 38 <td>男</td> 39 <td>17</td> 40 <td>170cm</td> 41 </tr> 42 </table> 43 </body> 44 </html>

2.使用CSS控制单元格边距

使用<table>标签的属性美化表格时，可以通过cellpadding属性和cellspacing属性分别控制单元格内容与边框之间的距离。以及单元格之间的距离。这种方式与在盒子模型中设置内边距、外边距的方式非常类似。那么为单元格添加内边距属性padding和外边距属性margin能不能实现这种效果呢？下面做一个测试，新建一个3行2列的表格，并用<table>标签的border属性为表格添加1px的边框，如例5所示。运行例5，效果如下图所示。上图所示的单元格内容紧贴边框，相邻单元格之间的距离也比较小。为了拉开单元格内容与边框之间的距离，以及相邻单元格之间的距离，可以为单元格标签<td>应用内边距属性：padding和外边距属性margin。具体的CSS样式代码如下： <style type="text/css"> td{ padding:10px; margin:10px; } </style> 保存HTML文件，刷新页，设置内边距和外边距后的表格效果如下图所示。从上图可以看出，单元格内容与边框之间出现间距，但是相邻单元格的间距没有任何变化，即对单元格设置的外边距属性margin没有生效。由此可见，对<td>标签应用内边距属性padding，可以设置单元格内容与边框的间距。但<td>标签无外边距属性margin，只能通过cellspacing属性来设置相邻单元格的间距。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS控制单元格边距</title> 6 </head> 7 <body> 8 <table border="1"> 9 <tr> 10 <td>第1行第1列</td><td>第1行第2列</td> 11 </tr> 12 <tr> 13 <td>第2行第1列</td><td>第2行第2列</td> 14 </tr> 15 <tr> 16 <td>第3行第1列</td><td>第3行第2列</td> 17 </tr> 18 </table> 19 </body> 20 </html>

3.使用CSS控制单元格的宽度和高度

<td>标签的width属性和height属性可以用于设置单元格的宽度和高度。同样，使用CSS也可以控制单元格的宽度和高度。下面通过一个案例对使用CSS控制单元格宽度和高度的方法进行演示，如例6所示。在例6中，首先，定义了一个2行2列的表格；然后，将第1个单元格的宽度设为“150px”，高度设为“100px”；最后，将第2个和第3个单元格的宽度均设为“100px”，高度均设为“50px”。运行例6，效果如下图所示。从上图可以看出，第1个和第2个单元格的高度相同，第1个和第3个单元格的宽度相同。由此可知，为同一行中的单元格定义不同的高度，或为同一列中的单元格定义不同的宽度时，同一行中高度会统一，同一列中宽度会统一，并且宽度值和高度值都取其中的较大者。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS控制单元格的宽度与高度</title> 6 <style type="text/css"> 7 table{border:1px solid blue;} 8 td{border:1px solid blue;} 9 .one{ 10 width:150px; 11 height:100px; 12 } 13 .two{ 14 width:100px; 15 height:50px; 16 } 17 .three{ 18 width:100px; 19 height:50px; 20 } 21 </style> 22 </head> 23 <body> 24 <table> 25 <tr> 26 <td class="one">one</td><td class="two">two</td> 27 </tr> 28 <tr> 29 <td class="three">three</td><td class="four">four</td> 30 </tr> 31 </table> 32 </body> 33 </html>

任务6-3 表单描述

需求分析

表单是可以通过网络接收其他用户数据的平台。例如，注册页面的账户密码输入、网上订单页面等，都以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的对话。下面将对表单进行详细讲解，引领读者认识表单。

知识储备

1.初识表单

对于表单读者可能比较陌生，其实表单在互联网上随处可见。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成，表单的基本结构如下图所示。为了使读者更好地理解表单的构成，下面通过创建一个完整的表单来具体介绍表单结构，如例7所示。例7为一个完整的表单结构。在该表单结构中用到了一些陌生的标签和标签属性，此处只需了解即可，后面会进行具体讲解。运行例7，效果如下图所示。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>创建一个完整的表单</title> 6 </head> 7 <body> 8 <form>  9 用户名：  10 <input type="text" name="yonghuming" />  11 密码：  12 <input type="password" name="mima" />  13 <input type="submit" value="确认" />  14 </form> 15 </body> 16 </html>

2.创建表单

创建表单非常简单，只需把表单控件放置在表单域即可。表单域是指表单的开始位置和结束位置，所有的表单控件只有嵌套在表单域中才会生效。在HTML中，<form>标签被用于定义表单域。创建表单的基本语法格式如下： <form action="ur1地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 在上述语法格式中，action、method和name为<form>标签的常用属性，其具体解释如下表所示。需要注意的是，<form>标签的属性并不会让表单具有实质的功能。如果要想让一个表单有意义，就必须在<form>开始标签与</form>结束标签之间添加相应的表单控件。

任务6-4 基础表单控件

需求分析

基础表单控件是指网页设计中经常用到的表单控件，是表单的核心部分。只有掌握了这些基础表单控件的使用方法，才能创建功能多样的表单。下面将对这些基础表单控件进行详细讲解。

知识储备

1.input控件

input控件是表单控件中最常用的控件。通常网页中的单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等都是通过input控件定义的。input控件的基本语法格式如下： <input type="控件类型"/> 在上述语法格式中，<input />标签为单标签，type属性为<input />标签最基本的属性。根据type属性的取值不同，可以在表单中输入、提交不同的数据。除了type属性外，<input />标签还可以定义其他的属性。<input />标签的常用属性如下表所示。上表列出了input控件的常用属性，下面通过一个案例来帮助读者理解这些属性的用法和效果，如例8所示。在例8中，通过对<input />标签应用type属性的不同属性值来定义不同类型的input控件，并且对一些控件应用<input />标签的其他可选属性。其中，第10行代码通过value和maxlength属性定义单行文本输入框中允许输入的最多字符数和默认显示文本；第12行代码通过size属性定义密码输入框的宽度；在第14行代码通过name和checked属性定义单选按钮的名称和默认选中项。运行例8，效果如下图所示。在上图中，不同类型的input控件显示的样式不同。例如，当密码输入框中输入内容时，内容将以圆点或者“*”的形式显示，用于防止密码泄露。为了使初学者更好地理解不同类型的input控件，下面对这些控件做具体解释。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>input控件</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 用户名：  10 <input type="text" value="小明" maxlength="6" /><br /><br /> 11 密码：  12 <input type="password" size="20" /><br /><br /> 13 性别：  14 <input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br /><br /> 15 兴趣爱好：  16 <input type="checkbox" />旅游 17 <input type="checkbox" />读书 18 <input type="checkbox" />摄影<br /><br /> 19 上传照片： 20 <input type="file" /><br /><br />  21 <input type="submit" />  22 <input type="reset" />  23 <input type="button" value="普通按钮" />  24 <input type="image" src="images/enter.jpg" />  25 <input type="hidden" />  26 </form> 27 </body> 28 </html>

（1）单行文本输入框<input type="text" />

单行文本输入框常用于输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

（2）密码输入框<input type="password" />

密码输入框用于输入密码，其内容将以圆点的形式显示。

（3）单选按钮<input type="radio" />

单选按钮用于单项选择，如选择性别、判断操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用checked属性，用于指定默认选中项。

（4）复选框<input type="checkbox" />

复选框常用于多项选择，如兴趣、爱好等。此外，可对复选框应用checked属性，用于指定默认选中项。

（5）文件域<input type="file" />

当定义文件域时，页面中会出现一个文本框和一个“浏览”按钮，用户可以通过填写文件路径或直接选择文件的方式将文件提交给后台服务器。

（6）提交按钮<input type="submit" />

提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的传输。可以对提交按钮应用value属性，从而改变提交按钮上的默认文本。

（7）重置按钮<input type="reset" />

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对重置按钮应用value属性，从而改变重置按钮上的默认文本。

（8）普通按钮<input type="button" />

普通按钮常常与JavaScript配合使用，从而为用户提供单击响应事件，此处了解即可。

（9）图像形式的提交按钮<input type="image" />

图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是用图像替代了默认的按钮样式。图像按钮外观更美观。需要注意的是，必须要为图像按钮定义src属性指定图像的URL。

（10）隐藏域<input type="hidden" />

隐藏域对于用户是不可见的，简单来说，隐藏域可以用于存放和上传一些网页信息。在搭建HTML页面时应用不多，初学者了解即可。

概要

需要说明的是，在实际运用中，常常需要将<input />标签与<label>标签配合使用，以扩大控件的选择范围，为用户提供更好的操作休验。例如，在选择性别时，希望实现单击提示文字“男”或者“女”也可以选中相应的单选按钮的效果。下面通过一个案例来演示<label>标签在input控件中的用法，如例9所示。在例9中，使用<label>标签嵌套表单中的提示信息，并且将<label>标签的for属性取值设置为对应表单控件的id，这样<label>标签标注的内容就绑定到了指定id的表单控件上。当单击<label>标签中的内容时，对应的表单控件就会处于选中状态。运行例9，效果如下图所示。在上图所示的页面中，单击“用户名：”时，光标会自动移动到用户名输入框中，同样单击“男”或“女”时，相应的单选按钮就会处于选中状态。

例9

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>label的使用</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 <label for="name">用户名：</label> 10 <input type="text" maxlength="6" id="name" /><br /><br /> 11 性别： 12 <input type="radio" name="sex" checked="checked" id="man" /><label for="man">男</label> 13 <input type="radio" name="sex" id="woman" /><label for="woman">女</label> 14 </form> 15 </body> 16 </html>

2.textarea控件

当定义input控件type属性的属性值为text时，会创建一个单行文本输入框。如果需要输入大量的信息，单行文本输入框就不适用了，为此HTML提供了<textarea>标签。通过<textarea>标签可以创建多行文本输入框。<textarea>标签的基本语法格式如下： <textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 在上述语法格式中，cols和rows为<textarea>标签的必备属性，其中，cols属性用于定义多行文本输入框每行中的字符数，rows属性用于定义多行文本输入框显示的行数，它们的取值均为正整数。下面通过一个案例来帮助读者理解textarea控件的用法和效果，如例10所示。在例10中，通过<textara>标签定义一个多行文本输入框并对该多行文本输入框应用cols和rows属性来设置每行中的字符数和显示的行数。在多行文本输入框下方，通过input控件定义了一个提交按钮。运行例10，效果如下图所示。在上图中，出现了一个多行文本输入框，用户可以对文本框中的内容进行编辑和修改。需要说明的是，除了cols和rnows属性外，<textarea>标签还拥有几个可选属性，分别为disabled、name和readonly，它们的含义和用法与<input />标签中相应的属性相同。对于这几个属性，本书不再做具体的演示、读者可以自己测试，以加深理解。各浏览器对cols和rows属性的解析不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以，在实际工作中更常用的方法是使用CSS的width属性和height属性来控制多行文本输入框的宽度和高度。

例10

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>textarea控件</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 留言：<br /> 10 <textarea cols="60" rows="8"> 11 请将咨询的相关问题留言给我们，我们会及时给您答复。 12 </textarea><br /><br /> 13 <input type="submit" value="提交" /> 14 </form> 15 </body> 16 </html>

3.select控件

浏览网页时，经常会看到包含多个选项的下拉菜单。例如，选择所在的城市、出生年月、兴趣爱好等。下图所示为下拉菜单，当单击下拉符号时，会弹出一个选择列表，如下图所示。在HTML中，要想制作如下图所示的选择列表，就需要使用select控件。使用select控件定义下拉菜单的基本语法格式如下： <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> 在上述语法格式中，<select>标签用于在表单中添加一个下拉菜单，<option>标签嵌套在<select>标签中，用于定义下拉菜单中的具体选项，每对<select></select>标签中至少应包含一对<option></option>标签。需要说明的是，在HTML中，可以为<select>标签和<option>标签定义属性，以改变下拉菜单的外观显示效果。<select>标签和<option>标签的常用属性如下表所示。下面通过一个案例来演示几种不同的下拉菜单的用法和效果，如例11所示。在例11中，通过<select>标签、<option>标签及相关属性创建了3个下拉菜单。其中，第1个下拉菜单为最基础的下拉菜单；第2个下拉菜单为设置了默认选项的单选下拉菜单；第3个下拉菜单为设置了两个默认选项的多选下拉菜单。在下拉菜单下方，通过input控件定义了一个“提交”按钮。运行例11，效果如下图所示。在上图中，第1个下拉菜单中的默认选项为内部所有选项中的第1项；第2个下拉菜单中的默认选项为设置了selected属性的选项；第3个下拉菜单显示为列表形式，有2个默认选项，按住“Ctrl”键可同时选择多项。对于选项较多的下拉菜单，可以将菜单中的选项分组展示。这样既方便用户查找选项，也让菜单选项的排列更有条理。下图所示为选项分组后的下拉菜单效果。要想实现上图所示的效果，可以在下拉菜单中使用<optgroup>标签。下面通过一个案例来演示为下拉菜单中的选项进行分组的具体方法，如例12所示。在例12中，<optgroup>标签用于定义选项组，必须嵌套在<select>标签中，一个<select>标签中可包含多个<optgroup>标签。在<optgroup>开始标签与</optgroup>结束标签之间可包含多个菜单选项。<optgroup>标签的属性label用于定义具体的组名。运行例12，会出现下图所示的下拉菜单，当单击下拉符号时，会展开菜单选项，如下图所示。

例11

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>select控件</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 学历：<br /> 10 <select>  11 <option>-请选择-</option> 12 <option>博士研究生</option> 13 <option>硕士研究生</option> 14 <option>本科</option> 15 <option>专科</option> 16 <option>高中</option> 17 </select><br /><br /> 18 特长（单选）:<br /> 19 <select> 20 <option>美术</option> 21 <option selected="selected">体育</option>  22 <option>音乐</option> 23 </select><br /><br /> 24 爱好（多选）:<br /> 25 <select multiple="multiple" size="4">  26 <option>摄影</option> 27 <option selected="selected">读书</option>  28 <option>唱歌</option> 29 <option selected="selected">写作</option>  30 <option>运动</option> 31 </select><br /><br /> 32 <input type="submit" value="提交"/> 33 </form> 34 </body> 35 </html>

例12

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>为下拉菜单中的选项分组</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 所在地区：<br /> 10 <select> 11 <optgroup label="北京"> 12 <option>昌平区</option> 13 <option>海淀区</option> 14 <option>朝阳区</option> 15 <option>东城区</option> 16 </optgroup> 17 <optgroup label="天津"> 18 <option>河东区</option> 19 <option>河西区</option> 20 <option>武清区</option> 21 </optgroup> 22 </select> 23 </form> 24 </body> 25 </html>

任务6-5 新增表单控件类型和属性

需求分析

HTML5中增加了许多新的表单控件类型和属性。通过这些新的表单控件类型和属性，可以丰富表单功能，从而更好地对表单进行控制和验证。下面将对HTML5新增的表单控件类型和属性做详细讲解。

知识储备

1.新增input控件类型

HTML5中增加了许多新的input控件类型，例如，email类型、url类型等，这些新增控件类型可以帮助设计人员更加高效且省力地制作出标准的表单。

（1）email类型<input type="email" />

email类型的input控件是一种用于输入E-mail地址的输入框，用于验证email类型输入框的内容是否符合E-mail地址格式。如果输入内容不符合，表单将弹出错误信息提示。

（2）url类型<input type="url" />

url类型的input控件是一种用于输入URL的输入框。如果所输入的内容是URL格式的文本，则表单会提交数据到服务器；如果输入的内容不符合URL格式，则表单不允许提交，并且会显示提示信息。

（3）tel类型<input type="tel" />

tel类型的input控件是一种用于输入电话号码的输入框。tel类型的input控件通常会与pattern属性配合使用，验证输入的电话号码是否正确，关于pattem属性将在“新增input控件属性”中进行讲解。

（4）search类型<input type="search" />

search类型的input控件是一种专门用于输入搜索关键词的输入框，它能自动记录一些字符。在用户输入内容后，search类型的文本框右侧会附带一个删除按钮，单击这个按钮可以快速清除输入的内容。

（5）color类型<input type="color" />

color类型的input控件用于提供设置颜色的选项，用于实现RGB颜色的输入。color类型的input控件颜色取值的基本形式是#RRGGBB，默认值为#000000。通过value属性的属性值可以更改默认颜色。单击color类型的输入框，可以快速打开拾色器面板，方便用户可视化选取颜色。

概要

下面通过设置input控件的type属性来演示不同类型输入框的用法，如例13所示。在例13中，通过input控件的type属性将输入框的类型分别设置为email类型、url类型、tel类型、search类型和color类型。其中，第11行代码通过pattern属性设置tel类型的输入框的输入长度为11位。读者可输入一个简单的手机号码进行验证。运行例13，效果如下图所示。在上图所示的页面中，分别在前3个输入框中输入不符合格式要求的文本内容，依次单击“提交”按钮，效果分别如下三图所示。在第4个输入框中输入要搜索的关键词，搜索框右侧会出现一个“×”按钮，如下图所示。单击该按钮，可以清除已经输入的内容。单击第5个表单控件中的颜色按钮，弹出下图所示的颜色拾取器。如果输入框中输入的内容均符合要求的格式，则单击“提交”按钮后，输入的内容会提交到服务器。注意：不同的浏览器对url类型输入框的要求不同，在多数浏览器中，要求用户必须输入完整的URL，但允许URL前有空格。

例13

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>新增input控件类型体验1</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入您的邮箱：<input type="email" name="formmail"/><br/> 10 请输入个人网址：<input type="url" name="user_url"/><br/> 11 请输入电话号码：<input type="tel" name="telphone" pattern="^\d{11}$"/><br/> 12 输入搜索关键词：<input type="search" name="searchinfo"/><br/> 13 请选取一种颜色：<input type="color" name="color1"/> 14 <input type="color" name="color2" value="#FF3E96"/> 15 <input type="submit" value="提交"/> 16 </form> 17 </body> 18 </html>

（6）number类型<input type="number" />

number类型的input控件用于提供输入数值的输入框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。 number类型的输入框可以通过设置属性对输入的数字进行限制，如规定允许的最大值和最小值、合法的数字间隔或默认值等，具体属性说明如下。 value属性：指定输入框的默认值。 max属性：指定输入框可以接受的最大的输入值。 min属性：指定输入框可以接受的最小的输入值。 step属性：指定输入域合法的间隔，如果不设置，默认值是1。下面通过一个案例来演示number类型input控件的用法，如例14所示。在例14中，将input控件的type属性设置为number类型，并且分别设置min属性、max属性和step属性的值。运行例14，效果如下图所示。从上图可以看出，number类型输入框中的默认值为“1”。用户可以手动在输入框中输入数据或者通过单击输入框的控制按钮来控制数据。例如，当单击输入框中向上的小三角按钮时，效果如下图所示。从上图可以看到，number类型输入框中的数据变为了“5”。这是因为第9行代码将step属性的属性值设置为“4”。另外，当在输入框中输入“25”时，由于max属性的属性值为“20”，所以将出现提示信息，如下图所示。需要注意的是，如果在number类型输入框中输入一个不符合number格式的文本“e”，单击“提交”按钮，也将会出现提示信息，如下图所示。

例14

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>number类型的使用</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入数值：<input type="number" name="number1" value="1" min="1" max="20" step="4"/><br/> 10 <input type="submit" value="提交"/> 11 </form> 12 </body> 13 </html>

（7）range类型<input type="range" />

range类型的input控件用于提供数值的输入范围，在网页中显示样式为滑动条。range类型input控件的常用属性与number类型input控件一样，通过min属性和max属性，可以设置最小值和最大值；通过step属性可指定每次滑动的幅度。

（8）date pickers类型<input type=date,month,week..." />

date pickers类型是指时间日期类型，HTML5中提供了多种可供选取日期和时间的输入类型，用于验证输入的日期，具体如下表所示。在上表中，协调世界时（Universal Time Coordlinated，UTC），又称为世界标准时间。简单地说，UTC时间就是0时区的时间。例如，北京时间为早上8点，则UTC时间为0点，即UTC和北京的时差为8小时。下面在HTML5中添加多个input控件，分别指定这些控件type属性的属性值为时间日期类型，如例15所示。运行例15，效果如下图所示。用户可以直接向输入框中输入内容，也可以单击输入框右侧的按钮进行选择。注意：对当遇到浏览器不支持的input控件输入类型时，该类型input控件将会在网页中显示为一个普通的输入框。

例15

2.新增input控件属性

在HTML5中，还增加了一些新的input控件属性，用于指定输入类型的行为和限制，如autofocus、min、max 、pattern等，下面将对一些新增的input控件属性做具体讲解。

（1）aoutofocus属性

在HTML5中，autofocus属性用于指定页面加载后是否自动获取焦点，将标签属性的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。下面通过一个案例来演示autofocus属性的用法，如例16所示。在例16中，首先，向表单中添加一个<input />标签；然后，通过“autocomplete="off"”语句将自动完成功能设置为关闭状态。最后，将autofocus属性的属性值设置为true，指定在页面加载完毕后会自动获取焦点。运行例16，效果如下图所示。从上图可以看出，<input />标签输入框在页面加载后自动获取焦点，并且关闭了自动完成功能。

例16

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>autofocus属性的使用</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入搜索关键词：<input type="text" name="user_name" autocomplete="off" autofocus="true"/><br/> 10 <input type="submit" value="提交" /> 11 </form> 12 </body> 13 </html>

（2）form属性

在HTML5之前，如果用户要提交一个表单，必须把相关的控件都放在表单内部，即<form>和</form>标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。 HTML5中的form属性可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。此外，form属性还允许一个表单控件从属于多个表单。下面通过一个案例来演示HTML5中form属性的用法，如例17所示。在例17中，第13行代码的<input />标签不在<form>标签中。但指定该标签form属性的属性值为<form>标签的id。此时，如果在输入框中分别输人姓名和昵称，则first_name和last_name将分别被赋值为输入的内容。例如，在姓名处输入“张三”，昵称处输入“小张”，效果如下图所示。单击“提交”按钮，在浏览器的地址栏中可以看到“first_name=张三&last_name=小张#”字样，表示服务器端接收到“name="张三"”和“name="小张"”的数据，如下图所示。注意： form属性适用于所有的input控件输入类型，在使用时只需引用所属表单的id即可。注：在表单的输入框中输入中文后通过get传参提交表单后，浏览器的地址栏中的参数正常显示中文的前提是<head>标签内，<meta>标签中的charset参数被设置为"utf-8"，而在charset参数被设置为"gbk"时，浏览器的地址栏中的参数显示的是乱码。因此在默认字符编码格式为GBK的系统或浏览器中，暂时无法复现上图的显示结果。

例17

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>form属性</title> 6 </head> 7 <body> 8 <form action="#" method="get" id="user_form"> 9 请输入您的姓名：<input type="text" name="first_name"/> 10 <input type="submit" value="提交" /> 11 </form> 12 <p>下面的输入框在form元素外，但因为指定了form属性为表单的id，所以该输入框仍然属于表单的一部分。</p> 13 请输入您的昵称：<input type="text" name="last_name" form="user_form"/><br/> 14 </body> 15 </html>

（3）list属性

在前文中已经学习了如何通过datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素，其值是对应datalist元素的id。下面通过一个案例来进一步学习list属性的用法，如例18所示。在例18中，分别向表单中添加input控件和datalist元素，并且将<input />标签的list属性指定为datalist元索的id。运行例18，单击输入框，就会弹出已定义的网址列表，效果如下图所示。

例18

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>list属性的使用</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入网址：<input type="url" list="url_list" name="weburl"/> 10 <datalist id="url_list"> 11 <option label="新浪" value="http://www.sina.com.cn"></option> 12 <option label="搜狐" value="http://www.sohu.com"></option> 13 <option label="传智" value="http://www.itcast.cn/"></option> 14 </datalist> 15 <input type="submit" value="提交"/> 16 </form> 17 </body> 18 </html>

（4）multiple属性

multiple属性用于指定输入框可以选择多个值，该属性适用于email和file类型的input控件。multiple属性用于email类型的input控件时，表示可以向输入框中输入多个E-mail地址，多个地址之间通过英文逗号隔开。multiple属性用于file类型的input控件时，表示可以选择多个文件。下面通过一个案例来进一步演示multiple属性的用法，如例19所示。在例19中，分别添加email类型和file类型的input控件，并且使用multiple属性指定输入框可以选择多个值。运行例19，效果如下图所示。如果想向文本框中输入多个E-mail地址，可以将多个地址之间通过英文逗号分隔。如果想选择多张照片，可以按“Shift”键的同时进行选择。输入多个E-mail地址和文件的效果如下图所示。

例19

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>multiple属性的使用</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 电子邮箱：<input type="email" name="myemail" multiple="true"/>  （如果电子邮箱有多个，请使用逗号分隔）<br/><br/> 10 上传照片：<input type="file" name="selfile" multiple="true"/><br/><br/> 11 <input type="submit" value="提交"/> 12 </form> 13 </body> 14 </html>

（5）min属性、max属性和step属性

HTML5中的min属性、max属性和step属性用于为包含数字或日期的input控件输入类型规定限值，即为这些类型的输入框加一个数值的约束。min、max和step属性适用于date pickers、number和range类型，这些属性的具体说明如下。 max属性：规定输入框所允许的最大输入值。 min属性：规定输入框所允许的最小输入值。 step属性：为输入框规定合法的数字间隔，如果不设置，默认值是1。由于前面介绍input控件的number类型时，已经讲解过min属性、max属性和step属性的使用，这里就不再举例说明。

（6）pattern属性

pattern属性用于验证input控件中用户输入的内容是否与所定义的正则表达式相匹配（可以理解为验证表单中输入的内容是否符合规范）。pattern属性适用于type属性的属性值是text、search、url、tel、email和password的<input/>标签。pattem属性常用的正则表达式如下表所示。了解了pattern属性及其常用的正则表达式后，下面通过一个案例进行演示，如例20所示。在例20中，第9~12行代码分别用于插入“账号”“密码”“身份证号”“E-mail地址”的输入框，并通过pattern属性来验证输入的内容是否与所定义的正则表达式相匹配。运行例20，效果如下图所示。当输入的内容与所定义的正则表达式格式不相匹配时，单击“提交”按钮，会弹出验证信息提示。

例20

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>pattern属性</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 账    号：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />（以字母开头，允许5～16字节，允许字母、数字和下画线）<br/> 10 密    码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />（以字母开头，长度在6～18之间，只能包含字母、数字和下画线）<br/> 11 身份证号：<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />（15位、18位数字）<br/> 12 E-mail 地址：<input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/> 13 <input type="submit" value="提交"/> 14 </form> 15 </body> 16 </html>

（7）placeholder属性

placeholder属性用于为inpnt控件的输入框设置相关提示信息，以告知用户输入什么内容。在输入框为空时显示提示信息，而当输入框获得焦点时，提示信息消失。下面通过一个案例来演示placeholder属性的使用，如例21所示。在例21中，使用pattern属性来验证输入的邮政编码是否为6位数的数字，使用placeholder属性来提示输入框中需要输入的内容。运行例21，效果如下图所示。 placeholder属性适用于type属性的属性值为text、search、url、tel、email及password的<input/>标签。

例21

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>placeholder属性</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入邮政编码：<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码" /> 10 <input type="submit" value="提交" /> 11 </form> 12 </body> 13 </html>

（8）required属性

required属性用于判断用户是否在表单输入框中输入内容，当表单内容为空时，则不允许用户提交表单。下面通过一个案例来演示required属性的使用，如例22所示。在例22中，为<input/>标签指定了required属性。当输入框中内容为空时，单击“提交”按钮，将会出现提示信息，效果如下图所示。用户必须在输入内容后，才允许提交表单。

例22

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>required属性</title> 6 </head> 7 <body> 8 <form action="#" method="get"> 9 请输入姓名：<input type="text" name="user_name" required="required"/> 10 <input type="submit" value="提交"/> 11 </form> 12 </body> 13 </html>

任务6-6 CSS控制表单样式

需求分析

在制作表单时，既要注重表单的功能，也要注重表单的美观度。一个设计精美的表单能给用户带来良好的使用体验。使用CSS可以轻松地控制表单控件的样式，让表单更加美观。使用CSS控制表单样式主要体现在控制表单控件的字体、边框、背景和内边距等，本任务将对此做具体介绍。

知识储备

下面通过一个登录表单案例来讲解使用CSS对表单样式的控制。登录表单案例效果如下图所示。上图所示的登录表单可以通过在<form>标签内嵌套<input>标签来定义，其HTML结构代码如例23所示。在例23中，表单部分均通过<input/>标签定义。运行例23，效果如下图所示。上图中出现了具有相应功能的表单控件。为了使表单界面更加美观，下面使用CSS对表单样式进行修饰，这里使用内嵌式CSS样式表，具体代码如下： 1 <style type="text/css"> 2 body,form,input{ padding:0; margin:0; border:0;} /*重置浏览器的默认样式*/ 3 form{ 4 width:327px; 5 height:215px; 6 margin:10px auto; /*使表单在页面水平居中显示*/ 7 padding-top:30px; 8 background: url(images/pic02.jpg) no-repeat; /*添加背景图像*/ 9 } 10 .content{ 11 width:250px; 12 height:180px; 13 margin:5px auto; 14 background: rgba(255,255,255,0.5); /*为表单内容部分添加白色半透明背景*/ 15 } 16 .content img{padding:10px 0 0 98px;} 17 .content p{ 18 width:160px; 19 height:19px; 20 background:#fff; 21 margin:10px 0 0 45px; 22 padding:2px; 23 } 24 .content input{ 25 color:#757575; 26 font-size: 16px; 27 font-family: "微软雅黑"; 28 } 29 .name{ 30 padding-left: 20px; 31 background:url(images/pic04.png) no-repeat; /*添加用户名小图标*/ 32 } 33 .pass{ 34 padding-left: 20px; 35 background:url(images/pic05.png) no-repeat; /*添加密码小图标*/ 36 } 37 .left{ 38 margin:10px 0 0 65px; 39 background:rgba(0,0,0,0); /*将按钮背景颜色设置为透明*/ 40 cursor:pointer; 41 } 42 .right{ 43 margin:10px 0 0 35px; 44 background:rgba(0,0,0,0); 45 cursor: pointer; 46 } 47 </style> 保存HTML文件，刷新页面，效果如下图所示。从上图可以看出，使用CSS轻松实现了对表单控件的边框、背景和内边距等样式的控制。注意： ①由于form是块元素，重置浏览器的默认样式时，需要清除form元素的内边距属性padding和外边距属性margin。 ②input控件默认有边框效果，当使用<input />标签定义各种按钮时，通常需要清除其边框。 ③一般需要为文本框和密码框设置2~3px的内边距，使用户输入的内容不会紧贴输入框。

例23

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS控制表单样式</title> 6 </head> 7 <body> 8 <form action="#" method="post"> 9 <div class="content"> 10 <img src="images/pic03.png"/> 11 <p><input class="name" type="text" maxlength="6"/></p> 12 <p><input class="pass" type="password" size="20" /></p> 13 <input class="left" type="button" value="注册"/> 14 <input class="right" type="button" value="登录"/> 15 </div> 16 </form> 17 </body> 18 </html>

任务6-7 页面建设准备工作

学习完上面的理论知识，小思准备着手制作“千年之恋”注册页面。先要进行的是页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。

网站素材整理

1.建立站点

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本项目在“D盘:\案例源码\chapter06”文件夹中新建一个文件夹作为网站根目录，并命名为“Marriage network”。

（2）在根目录下新建文件

打开网站根目录“Marriage network”，在根目录下新建“images”和“css”文件夹，分别用于存放网站所需的图像和CSS样式表文件。

（3）新建站点

打开Dreamweaver，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称“Marriage network”。然后，浏览并选择站点根目录的存储位置。单击“保存”按钮，站点即建立成功。

2.切图

使用Fireworks CS6的“切片”工具，导出“千年之恋”注册页中的素材图像，并存储在站点中的“image”文件夹中。导出后的图像素材如下图所示。

页面结构分析

1.HTML结构分析

“千年之恋”注册页面从上到下可以分为5个模块，如下图所示。

2.CSS样式分析

页面各模块居中显示，页面的版心为980px。页面中的大部分字体均设置为“微软雅黑”，字号为14px，超链接未访问时和访问后的字号为16px，文字颜色为“#fff”，这些可以通过CSS样式进行定义。

定义基础样式

1.页面布局

下面对“千年之恋”注册页面进行整体布局：在站点根目录下新建一个HTML文件，并命名为“project06”，然后使用<div>标签对页面进行布局，具体代码如project06.html所示。

project06.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>千年之恋</title> 6 </head> 7 <body> 8  9 <div id="head"></div> 10  11  12 <div id="nav_bg"></div> 13  14  15 <div id="banner"></div> 16  17  18 <div id="content"></div> 19  20  21 <div id="footer"></div> 22  23 </body> 24 </html> 在上述代码中，id为head的<div>标签用于搭建“头部”模块；另外，通过定义id为nav_bg和banner的两个<div>标签分别用于搭建“导航”和“banner”模块；“内容”模块则通过id为content的<div>标签搭建；“版权信息”模块则通过id为footer的<div>标签搭建。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style06.css，使用外链式在project06.html文件中引入样式表文件。然后，定义页面的基础样式，具体代码如下： 1 /*重置浏览器的默认样式*/ 2 *{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;} 3 /*全局控制*/ 4 body{font-family:"微软雅黑"; font-size:14px;} 5 a:link,a:visited{ text-decoration:none; color:#fff; font-size:16px;} 在上述代码中，第2行代码用于清除浏览器的默认样式；第4行和第5行代码用于定义页面公共样式。

任务6-8 制作“头部”和“导航”模块

效果分析

1.结构分析

“头部”和“导航”模块分别由两个<div>标签定义，其中，“导航”模块由无序列表搭建。“头部”和“导航”模块的结构如下图所示。

2.样式分析

“头部”模块需要添加宽度和高度样式，并设置其在页面中居中显示。由于“导航”模块的背景颜色通栏显示，所以同样需要设置宽度和高度样式，且导航内容在页面中居中显示。当鼠标指针悬停到导航内容上时，当前内容的背景颜色会发生变化。

模块制作

1.搭建结构

在project06.html文件内书写“头部”和“导航”模块的HTML结构代码，具体如下： 1 <div id="head"> 2 <img src="images/logo.jpg" /> 3 </div> 4 <div id="nav_bg"> 5 <ul class="nav"> 6 <li><a href="#">首页</a></li> 7 <li><a href="#">会员</a></li> 8 <li><a href="#">活动</a></li> 9 <li><a href="#">直播</a></li> 10 <li><a href="#">视频</a></li> 11 <li><a href="#" class="bg">注册</a></li> 12 </ul> 13 </div> 在上述代码中，id为head和nav_bg的2个<div>标签分别用于定义网页的“头部”和“导航”模块。<ul>标签用于搭建“导航”模块结构，并为导航列表中最后一个元素单独添加类名，用于为该导航元素设置不同的背景颜色。

2.控制样式

在样式表文件style06.css中书写“头部”和“导航”模块对应的CSS样式代码，具体如下： 1 #head{ 2 width:980px; 3 height:70px; 4 margin:0 auto; 5 padding-top:20px; 6 } 7 #nav_bg{ 8 width:100%; 9 height:48px; 10 background:#fe668f; 11 } 12 .nav{ 13 width:980px; 14 margin:0 auto; 15 } 16 .nav li{float: left;} 17 a{ 18 display:inline-block; 19 height:48px; 20 padding:0 50px; 21 line-height:48px; 22 } 23 .bg{background:#fe9ab5;} 24 a:hover{background:#fe9ab5;} 在上述代码中，第4行代码用于定义“头部”模块在页面中居中显示；第8行代码将“导航”模块的宽度设置为100%，实现导航背景颜色通栏显示；第14行代码用于设置导航内容部分在页面中居中显示；第16行代码为所有导航元素添加了左浮动效果；第24行代码用于设置鼠标指针悬浮到导航元素上时背景颜色。

概要

保存project06.html和style06.css文件，刷新页面，“头部”和“导航”模块的效果如下图所示。

任务6-9 制作“banner”和内容模块

效果分析

1.结构分析

“banner”和“内容”模块分别用两个<div>标签定义，其中，“内容”模块的“注册步骤”由<h2>标题标签定义，其余内容嵌套在<form>表单标签内。“baner”和“内容”模块除标题外的主体结构由表格搭建，并根据页面需求嵌套部分表单控件。“banner”和“内容”模块的结构如下图所示。

2.样式分析

首先，需定义“banner”模块的宽度，并使其在页面中居中显示。然后，设置“内容”模块的宽度和高度，并为其添加背景图像，且在页面中居中显示，设置标题部分的文字样式及背景。最后，定义下拉列表、输入框和按钮等样式。

模块制作

1.搭建结构

继续在project06.html文件内书写“banner”和“内容”模块的HTML结构代码，具体代码如下： 1  2 <div id="banner"> 3 <img src="images/banner.jpg" /> 4 </div> 5  6  7 <div id="content"> 8 <h2 class="step">注册步骤：</h2> 9 <form action="#" method="post" class="one"> 10 <h3>您的账号信息：</h3> 11 <table class="content"> 12 <tr> 13 <td class="left">注册方式：</td> 14 <td> 15 <label for="one"><input type="radio" name="sex" id="one" />E-mail注册 16 </label>     17 <label for="two"><input type="radio" name="sex" id="two" />手机号码注册</label> 18 </td> 19 </tr> 20 <tr> 21 <td class="left">注册邮箱：</td> 22 <td><input type="text" class="right" /></td> 23 </tr> 24 <tr> 25 <td class="left">注册手机：</td> 26 <td><input type="text" class="right" /></td> 27 </tr> 28 <tr> 29 <td class="left">登录密码：</td> 30 <td><input type="text" class="right" /></td> 31 </tr> 32 <tr> 33 <td class="left">昵称：</td> 34 <td><input type="password" maxlength="8" class="right" /></td> 35 </tr> 36 </table> 37 <h3>您的个人信息：</h3> 38 <table class="content"> 39 <tr> 40 <td class="left">性别：</td> 41 <td> 42 <label for="boy"><input type="radio" name="sex" id="boy" />男 43 </label>     44 <label for="girl"><input type="radio" name="sex" id="girl" />女</label> 45 </td> 46 </tr> 47 <tr> 48 <td class="left">学历：</td> 49 <td> 50 <select> 51 <option>-请选择-</option> 52 <option>中职/高中</option> 53 <option>专科/本科</option> 54 <option>硕士研究生</option> 55 <option>博士研究生</option> 56 </select> 57 </td> 58 </tr> 59 <tr> 60 <td class="left">所在城市：</td> 61 <td> 62 <select> 63 <option>-请选择-</option> 64 <option selected="selected">北京</option> 65 <option>上海</option> 66 <option>广州</option> 67 <option>深圳</option> 68 </select> 69 </td> 70 </tr> 71 <tr> 72 <td class="left">兴趣爱好：</td> 73 <td> 74 <input type="checkbox" />足球     75 <input type="checkbox" />篮球     76 <input type="checkbox" />游泳     77 <input type="checkbox" />唱歌     78 <input type="checkbox" />跑步     79 <input type="checkbox" />瑜伽 80 </td> 81 </tr> 82 <tr> 83 <td class="left">自我介绍：</td> 84 <td> 85 <textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea> 86 </td> 87 </tr> 88 <tr> 89 <td colspan="2"><input type="button" class="btn" /></td> 90 </tr> 91 </table> 92 </form> 93 </div> 94  在上述代码中，id为banner和 content的2个<div>标签分别用于定义网页的“banner”模块和“内容”模块。2个类名为content的<table>标签用于搭建“账号信息”和“个人信息”部分。表格内部嵌套<input>标签用于定义单行文本输入框、单选按钮、复选框等，<select>标签用于定义下拉菜单，<textarea>标签用于定义多行文本输入框。

2.控制样式

在样式表文件style06.css中书写“banner”和“内容”模块对应的CSS样式代码，具体如下： 1 #banner{ 2 width:980px; 3 margin:0 auto; 4 } 5 #content{ 6 width:830px; 7 height:934px; 8 background:url(../images/content_bg.jpg) no-repeat; 9 margin:0 auto; 10 padding-left:150px; 11 } 12 .step{ 13 width:454px; 14 height:80px; 15 font-size:20px; 16 font-weight:100; 17 color:#dd8787; 18 background:url(../images/step.jpg) center right no-repeat; 19 line-height:80px; 20 } 21 h3{ 22 width:444px; 23 height:45px; 24 font-size:20px; 25 font-weight:100; 26 color:#dd8787; 27 line-height:45px; 28 border-bottom:1px solid #dd8787; 29 } 30 td{ 31 height:50px; 32 color:#dd8787; 33 } 34 .left{ 35 width:120px; 36 text-align:right; 37 } 38 .right{ 39 width:320px; 40 height:28px; 41 border:1px solid #dd8787; 42 } 43 input{vertical-align:middle;} 44 select{ 45 width:171px; 46 border:1px solid #dd8787; 47 color:#dd8787; 48 } 49 textarea{ 50 width:380px; 51 border:1px solid #dd8787; 52 resize:none; 53 font-size:12px; 54 color:#aaa; 55 padding:20px; 56 } 57 .btn{ 58 width:408px; 59 height:76px; 60 background:url(../images/btn.jpg) right center no-repeat; 61 } 在上述代码中，第3行和第9行代码分别用于设置“banner”模块和“内容”模块在页面中水平居中显示；第43行代码将<input>标签内的元素设置为垂直居中显示；第52行代码用于固定多行文本输入框的大小，使多行文本输入框不能被调节。保存project06.html和style06.css文件，刷新页面，效果如下图所示。

概要

保存project06.html和style06.css文件，刷新页面，效果如下图所示。

任务6-10 制作“页脚”模块

效果分析

1.结构分析

“页脚”模块较为简单，可以通过在<div>标签中嵌套<p>标签实现。“页脚”模块的结构如下图所示。

2.样式分析

由于“页脚”模块的背景颜色通栏显示，所以需设置<div>的标签宽度的值为100%。此外，“页脚”模块的文字样式也需要设置。

模块制作

1.搭建结构

继续在project06.html文件内书写“页脚”模块的HTML结构代码，具体如下： 1  2 <div id="footer"> 3 <p>Copyright © 2020-2030 QIANNIANZHILIANcom, All rights reserved.<br />2020-2030，版权所有千年之恋 85CP 备 3333</p> 4 </div> 5

2.控制样式

在样式表文件style06.css中书写“页脚”模块对应的CSS样式代码，具休如下： 1 #footer{ 2 width:100%; 3 height:68px; 4 line-height:26px; 5 background:#fe668f; 6 color:#fff; 7 text-align:center; 8 padding-top:40px; 9 } 在上述代码中，第7行代码用于设置该部分的文本在页面中水平居中显示。

概要

保存project06.html和style06.css文件，刷新页面，“页脚”模块效果图如下图所示。

项目7 “视频8”首页制作

知识目标

了解网页中常见的视频和音频格式，以及不同视频和音频格式的兼容性。

技能目标

掌握网页中视频和音频的嵌入技术，能够在网页中嵌入视频和音频。掌握网页中添加过渡的方法，能够在网页中设置过渡效果。掌握网页中添加变形的方法，能够在网页中设置变形效果。掌握网页中添加动画的方法，能够在网页中设置动画效果。

项目描述

随着互联网的不断发展，以短视频、网络电视剧、网络电影为代表的网络视频高速增长，市场需求日益旺盛。为了契合市场机遇，“视频8”负责人致电HC公司王经理，计划制作一个网站。接到王经理安排的任务后，小思制订了近期的项目计划：首先，了解网站视频、音频的嵌入方式；然后，学习CSS3新增的过渡、变形、动画等属性；最后，运用所学知识，制作一个带有视频和过渡效果的网站。本书只演示“视频8”首页的制作过程。“视频8”首页效果如下图所示。

任务7-1 在网页中嵌入视频和音频

需求分析

在网络传输速度越来越快的今天，视频和音频嵌入技术已经被越来越广泛地应用在网页设计中，与静态的图片和文字相比，视频和音频可以为用户提供更直观、丰富的信息。下面i将详细讲解在网页中嵌入视频和音频的相关知识。

知识储备

1.视频、音频嵌入技术概述

在全新的视频标签和音顿标签出现之前，W3C并没有提出将视频和音频嵌入到页面的标准方式，视频、音顿在大多数情况下都是通过第三方插件或浏览器的应用程序嵌入到页面中的。例如，可以运用Adobe公司的FlashPlayer插件将视频和音频嵌入到网页中。下图所示为网页中FlashPlayer插件的标志。通过插件或浏览器的应用程序嵌入视顿和音频，这种方式不仅需要借助第三方插件，而且实现的代码复杂冗长。下图所示为运用插件嵌入视顿的代码截图。从上图所示的代码截图中可以看出，该代码不仅包含HTML代码，还包含JavaScript代码，整体代码复杂冗长，不利于初学者学习和掌握。那么该如何化繁为简呢？可以运用HTML5中新增的<video>标签和<audio>标签来嵌入视频或音频。例如，运用<video>标签嵌入视频的示例代码截图如下图所示。上图所示为运用<video>标签嵌入视频的代码，在这段代码中仅需要1行代码就可以实现视频的嵌入，使网页的代码结构变得简单。在HTML5提供的标签中，<video>标签用于为页面添加视频，<audio>标签用于为页面添加音频。到目前为止，绝大多数的浏览器可以支持HTML5中的<video>标签和<audio>标签。浏览器对<video>标签和<audio>标签的支持情况如下表所示。上表列举了主流浏览器对<video>标签和<audio>标签的支持情况。需要注意的是，在不同的浏览器中运用<video>标签和<audio>标签时，浏览器显示视频、音频的界面样式略有不同。下两图所示分别为视频在火狐浏览器和谷歌浏览器中的播放效果。对比上两图可以发现，在不同的浏览器中，对于同样的视频文件，其播放控件的显示样式却不同。例如，调整音量的按钮、全屏播放按钮等。控件显示不同样式是因为每个浏览器对内置视频控件样式的定义不同。

2.嵌入视频

在HTML5中，<video>标签用于定义视频文件，它支持3种视频格式，分别为OGG、WEBM和MPEG4。使用<video>标签嵌入视频的基本语法格式如下： <video src="视频文件路径" controls="controls"></video> 在上述语法格式中，src属性用于设置视频文件的路径；controls属性用于控制是否显示播放控件。这两个属性是<video>标签的基本属性。需要说明的是，在<video>和</video>标签之间还可以插入文字，当浏览器不支持<video>标签时，就会在浏览器中显示该文字。了解了定义视频的基本语法格式后，下面通过一个案例来演示嵌入视频的方法，如例1所示。在例1中，第8行代码使用<video>标签嵌入视频文件。运行例1，效果如下图所示。上图显示的是视频未播放的状态，视频界面底部是浏览器默认添加的视频控件，用于控制视频播放的状态，当单击“播放”▶按钮时，网页开始播放视频，如下图所示。需要说明的是，在<video>标签中还可以添加其他属性，从而进一步优化视频的播放效果。<video>标签的其他属性如下表所示。了解了上表所示的<video>标签属性后，下面在例1的基础上对<video>标签应用部分新属性，进一步优化视频播放效果，修改后的代码如下： <video src="video/pian.mp4" controls="controls" autoplay="autoplay" loop="loop">浏览器不支持<video>标签</video> 在上述代码中，为<video>标签增加了“autoplay="autoplay"”和“loop="loop"”两个样式。其中，“autoplay="autoplay"”样式可以让视频自动播放，“loop="loop"”样式让视频具有循环播放功能。保存HTML文件，刷新页面，视频播放效果如下图所示。需要注意的是，在2018年1月谷歌浏览器增加了对自动播放功能的限制。在正常情况下加载页面，视频是无法进行自动播放的。如果想要自动播放视频，就需要为<video>标签添加muted属性，该属性用于设置视频静音。当设置muted属性后，嵌入的视频才具有mutoplay属性，可以自动静音播放。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>在HTML5中嵌入视频</title> 6 </head> 7 <body> 8 <video src="video/pian.mp4" controls="controls">浏览器不支持<video>标签</video> 9 </body> 10 </html>

3.嵌入音频

在HTML5中，<audio>标签用于定义音频文件，它支持3种音频格式，分别为OGG、MP3和WAV。使用<audio>标签嵌入音频的基本语法格式如下： <audio src="音频文件路径" controls="controls"></audio> 从上述语法格式可以看出，使用<audio>标签嵌入音频的语法格式与<video>标签类似，在使用<audio>标签嵌入音频的语法格式中，src属性用于设置音频文件的路径；controls属性用于为音频提供播放控件。在<audio>和</audio>标签之间同样可以插入文字，当浏览器不支持<audio>标签时，就会在浏览器中显示该文字。下面通过一个案例来演示嵌入音频的方法，如例2所示。在例2中，第8行代码的<audio>标签用于嵌入音频。运行例2，效果如下图所示。上图为谷歌浏览器中默认的音频控件样式，当单击“播放”▶按钮时，就可以在页面中播放音频。需要说明的是，在<audio>标签中还可以添加其他属性，从而进一步优化音频的播放效果，具体如下表所示。上表列举的<audio>标签的其他属性<video>标签也有，这些相同的属性在嵌入音频、视频时是通用的。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>在HTML5中嵌入音频</title> 6 </head> 7 <body> 8 <audio src="music/1.mp3" controls="controls">浏览器不支持<audio>标签</audio> 9 </body> 10 </html>

4.浏览器对视频和音频格式的兼容性

虽然HTML5支持OGG、MPEG4和WEBM这3种视频格式，以及OGG、MP3和WAV这3种音频格式，但并不是所有的浏览器都支持这些格式，因此在嵌入视频和音频时，要考虑浏览器的兼容性问题。下表列举了各浏览器对视频和音频格式的兼容情况。从上表可以看出，除了MPEG4和MP3格式外，各浏览器都会有一些不兼容的视频、音频格式。为了保证不同格式的视颊、音频能够在各浏览器中正常播放，往往需要提供多种格式的视频、音频供浏览器选择。在HTML5中，运用<source>标签可以为<video>标签或<audio>标签提供多个备用文件。使用<source>标签添加视频的基本语法格式如下： <video controls="controls"> <source src="视频文件地址" type="媒体文件类型/格式"> <source src="视频文件地址" type="媒体文件类型/格式"> ...... </video> 在上述语法格式中，可以指定多个<source>标签为浏览器提供备用的视频文件。<source>标签一般需设置src属性和type属性，对它们的具体介绍如下。 src属性：用于指定媒体文件的URL。 type属性：用于指定媒体文件的类型和格式。其中，“媒体文件类型”可以为“video”或“audio”,“格式”为视频或音频的格式。例如，将OGG格式和MP4格式视频同时嵌入页面中，示例代码如下： <video controls="controls"> <source src="video/1.ogg" type="video/ogg"> <source src="video/1.mp4" type="video/mp4"> </video> 运用<source>标签添加音频的方法与添加视频的方法基本相同，只需要把<video>标签换成<audio>标签即可。使用<source>标签添加音频的语法格式如下： <audio controls="controls"> <source src="音频文件地址" type="媒体文件类型/格式"> <source src="音频文件地址" type="媒体文件类型/格式"> ...... </audio> 例如，将MP3格式和WAV格式音频同时嵌入页面中，示例代码如下： <audio controls="controls"> <source src="music/1.mp3" type="audio/mp3"> <source src="music/1.wav" type="audio/wav"> </audio>

5.控制视频的宽度和高度

在网页中嵌入视频时，经常会为<video>标签添加宽度和高度，以给视频预留一定的空间。给视频设置宽度和高度属性后，浏览器在加载页面时就会预先确定视频的尺寸，为视频保留合适的空间，保证页面布局的统一。为<video>标签添加宽度、高度的方法十分简单，可以运用width属性和height属性直接为<video>标签设置宽度和高度。下面将通过一个案例来演示如何为<video>标签设置宽度和高度，如例3所示。在例3中，第11~15行代码设置<div>标签的宽度为“600px”、高度为“300px”。在<div>标签内部嵌套一个<video>标签和2个<p>标签，设置宽度均为“200px”、高度均为“300px”，并使用浮动让它们排列在一行显示。运行例3，效果如下图所示。从上图中可以看出，视频和段落文本排成一行，页面布局没有变化。这是因为定义了视频的宽度和高度，浏览器在加载时会为视频预留合适的空间。此时可以更改例3中的代码、删除视频的宽度和高度属性，修改后的代码如下： video{ background:#F90; float:left; } 保存HTML文件，刷新页面，效果如下图所示。从上图可以看出，视频和其中一个灰色文本模块被挤到了大盒子下面。这是因为未定义视频宽度和高度时，视频会按原始大小显示，此时浏览器因为没有办法控制视频尺寸，只能按照视频默认尺寸加载视频，从而导致页面布局混乱。注意：通过width属性和height属性来缩放视频，虽然可使视频在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”)对视频进行压缩。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>CSS控制视频的宽度和高度</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 div{ 12 width:600px; 13 height:300px; 14 border:1px solid #000; 15 } 16 video{ 17 width:200px; 18 height:300px; 19 background:#9CCDCD; 20 float:left; 21 } 22 p{ 23 width:200px; 24 height:300px; 25 background:#999; 26 float:left; 27 } 28 </style> 29 </head> 30 <body> 31 <div> 32 <p>占位色块</p> 33 <video src="video/pian.mp4" controls="controls">浏览器不支持video元素</video> 34 <p>占位色块</p> 35 </div> 36 </body> 37 </html>

任务7-2 在网页中添加过渡效果

需求分析

CSS提供了强大的过渡属性（CSS3属性），它可以在不使用Flash动画或者JavaSvript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果。例如，渐显、渐隐、速度的变化等。下面将详细讲解在网页中添加过渡效果的方法。

知识储备

1.transition-property属性

transition-property属性用于指定应用过渡效果的CSS属性的名称，例如，宽度属性、背景属性等。transition-property属性的基本语法格式如下： transition-property: none | all | property; 在上述语法格式中，transition-property属性的取值包括none、all和property（代指CSS各类属性名称）。transition-property属性的属性值及其说明如下表所示。在例4中，第15行和16行代码通过transition-property属性指定产生过渡效果的CSS属性为background-color，并设置了鼠标指针移至时其背景颜色变为蓝色。运行例4，默认效果如下图所示。当鼠标指针悬浮到上图所示网页中的色块区域上时，背景颜色立刻由红色变为蓝色，如下图所示。通过对比上两图的变化可知，背景颜色并不会产生过渡。这是因为在设置过渡效果时，必须设置过渡时间，否则不会产生过渡效果。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>transition-property属性</title> 6 <style type="text/css"> 7 div{ 8 width:400px; 9 height:100px; 10 background-color:red; 11 font-weight:bold; 12 color:#FFF; 13 } 14 div:hover{ 15 background-color:blue; 16 transition-property:background-color; /*指定动画过渡的CSS属性*/ 17 } 18 </style> 19 </head> 20 <body> 21 <div>使用transition-property属性改变元素背景色</div> 22 </body> 23 </html>

浏览器私有前缀

浏览器私有前缀是区分不同内核浏览器的标识。由于W3C每提出一个新属性，都需要经过耗时且复杂的标准制定流程，在标准还未确定时，部分浏览器已经根据最初草案实现了新属性的功能，为了与之后确定的标准进行兼容，各浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器再逐步支持不带前缀的CSS3新属性。下表列举了主流浏览器的私有前缀，具体如下。现在很多新版本的浏览器都可以很好地兼容CSS3的新属性，故很多私有前缀可以不写，但为了兼容老版本的浏览器，仍可以使用私有前缀。例如，如果希望例4中的transition-property属性可以兼容老版本的浏览器，应将代码进行如下修改： -webkit-transition-property:background-color; /*Safari浏览器和谷歌浏览器兼容代码*/ -moz-transition-property:background-color; /*火狐浏览器兼容代码*/ -ms-transition-property:background-color; /*IE浏览器兼容代码*/ -o-transition-property:background-color; /*欧朋浏览器兼容代码*/

2.transition-duration属性

transition-duration属性用于指定过渡效果持续的时间，其基本语法格式如下： transition-duration:time; 在上述语法格式中，transition-duration属性取值为时间，常用单位是秒（s）或者毫秒（ms），默认属性值为0。例如，用下面的示例代码替换例4的div:hover样式。 div:hover{ background-color:blue; /*指定动画过渡的CSS属性*/ transition-property:background-color; /*指定动画过渡的CSS属性*/ transition-duration:5s; } 在上述示例代码中，使用transition-duration属性来设置完成过渡效果需要耗时5s。运行案例代码，当鼠标指针悬浮到网页中的<div>区域上时，盒子的颜色经过5s会变成蓝色。

3.transition-timing-fuction属性

transition-timing-function属性用于指定过渡效果的速度曲线，其基本语法格式如下： transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 在上述语法格式中，transition-timing-function属性的取值有很多种，其默认值为ease。transition-timing-function属性常见属性值及其说明如下表所示。在上表中，最后一个属性值“cubic-bezier(n,n,n,n)”中文译为“贝塞尔曲线”，使用贝塞尔曲线可以精确控制速度的变化。但在CSS3中不要求掌握贝塞尔曲线的核心内容，使用前面几个属性值可以满足大部分动画的要求。下面通过一个案例来演示transition-timing-function属性的用法，如例5所示。在例5中，先通过transition-property属性指定产生过渡效果的CSS属性为“border-radius”，并指定过渡动画由方形变为圆形。然后，使用transition-duration属性定义过渡效果需要耗时2s，同时使用transition-timing-function属性规定过渡效果以慢速开始和结束。运行例5，当鼠标指针悬浮到网页中的<div>区域上时，过渡的动作将会被触发，方形将慢速开始变化，然后逐渐加速，最后慢速变为圆形，效果如下图所示。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>transition-timing-function属性</title> 6 <style type="text/css"> 7 div{ 8 width:424px; 9 height:406px; 10 margin:0 auto; 11 background:url(images/HTML5.png) center center no-repeat; 12 border:5px solid #333; 13 border-radius:0px; 14 } 15 div:hover{ 16 border-radius:50%; 17 transition-property:border-radius; /*指定动画过渡的CSS属性*/ 18 transition-duration:2s; /*指定动画过渡的时间*/ 19 transition-timing-function:ease-in-out; /*指定动画过以慢速开始和结束的过渡效果*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div></div> 25 </body> 26 </html>

4.transition-delay属性

transition-delay属性用于指定过渡效果的开始时间，其基本语法格式如下： transition-delay:time; 在上述语法格式中，transition-delay属性默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay属性的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作将被截断；设置为正数时，过渡动作会延迟触发。下面在例5的基础上演示transition-delay属性的用法，在第19行代码后增加的代码如下： transition-delay:2s; /*指定动画延迟触发*/ 上述代码使用transition-delay属性指定过渡的动作会延迟2s触发。保存例5，刷新页面，当鼠标指针悬浮到网页中的<div>区域上时，经过2s后过渡的动作会被触发，方形慢速开始变化，然后逐渐加速、随i后慢速变为圆形。

5.transition属性

transion属性是一个复合属性，用于在一个属性中设置transilion-property、transition-duration、transition-timing-function、transition-delay这4个过渡属性，其基本语法格式如下： transition: property duration timing-function delay; 在使用transition属性设置多个过渡效果时，它的各个参数必须按顺序定义，不能颠倒。例如，例5中设置的4个过渡属性，可以直接通过以下代码实现。 transition:border-radius 5s ease-in-out 2s; 注意：当使用transition属性设置多种过渡效果时，需要为每个过渡属性集中指定所有的值，并且用英文逗号进行分隔。

任务7-3 在网页中添加变形效果

需求分析

在CSS3中，通过变形可以对元素进行平移、缩放、倾斜和旋转等操作。同时，变形可以与过渡属性结合，实现一些绚丽网页动画效果。网页中添加的变形效果主要包括2D变形和3D变形两种，下面将对这两种变形效果进行详细讲解。

知识储备

1.2D变形

在CSS3中，2D变形主要包括4种变形效果，分别是平移、缩放、倾斜、旋转。在进行2D变形时，还可以改变变形对象的中心点，从而实现不同的变形效果。下面将详细讲解2D变形的技巧。

（1）平移

平移是指元素位置的变化，包括水平移动和垂直移动。在CSS3中，使用translate()方法可以实现元素的平移效果，其基本语法格式如下： transform:translate(x-value,y-value); 在上述语法格式中，参数x-value和y-value分别用于定义水平（x轴）和垂直（y轴）坐标。参数值常用单位为像素（px）和百分比（%）。当参数值为负数时，表示反方向移动元素（向左和向上移动）。如果省略了第2个参数，则取默认值0，即在y轴方向不移动。在使用translate()方法移动元素时，坐标点默认为元素中心点，然后根据指定的水平坐标和垂直坐标进行移动，效果如下图所示。在上图中，“①”表示平移前的元素，“②”表示平移后的元素。下面通过一个案例来演示translate()方法的用法，如例6所示。在例6中，使用<div>标签定义两个样式完全相同的盒子。然后，通过translate()方法将第2个盒子沿x轴向右移动100px，沿y轴向下移动30px。运行例6，效果如下图所示。注意： translate()方法中参数值的单位不可以省略，否则平移命令将不起作用。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>translate()方法</title> 6 <style type="text/css"> 7 div{ 8 width:100px; 9 height:50px; 10 background-color:#0CC; 11 } 12 #div2{transform:translate(100px,30px);} 13 </style> 14 </head> 15 <body> 16 <div>盒子1未平移</div> 17 <div id="div2">盒子2平移</div> 18 </body> 19 </html>

（2）缩放

在CSS3中，使用scale()方法可以实现元素缩放效果，其基本语法格式如下： transform:scale(x-value,y-value); 在上述语法格式中，参数x-value和y-value分别用于定义水平（x轴）和垂直（y轴）方向的缩放倍数。参数值可以为正数、负数和小数，不需要加单位。其中，正数用于放大元素，负数用于翻转缩放元素，小于1的小数用于缩小元素。如果第2个参数省略，则第2个参数默认等于第1个参数值。scale()方法缩放示意图如下图所示。其中，实线表示放大前的元素，虚线表示放大后的元素。下面通过一个案例来演示scale()方法的用法，如例7所示。在例7中，使用<div>标签定义两个样式相同的盒子，并通过scale()方法将第2个<div>标签的宽度放大2倍、高度放大3倍。运行例7，效果如下图所示。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>scale()方法</title> 6 <style> 7 div{ 8 width:100px; 9 height:50px; 10 background-color:#FF0; 11 border:1px solid black; 12 } 13 #div2{ 14 margin:100px; 15 transform:scale(2,3) 16 } 17 </style> 18 </head> 19 <body> 20 <div>我是原来的元素</div> 21 <div id="div2">我是放大后的元素</div> 22 </body> 23 </html>

（3）倾斜

在CSS3中，使用skew()方法可以实现元素倾斜效果，其基本语法格式如下： transform:skew(x-value,y-value); 在上述语法格式中，参数x-value和y-value分别用于定义水平（x轴）和垂直（y轴）的倾斜角度。参数值为角度数值，单位为deg，取值可以为正值或者负值，表示不同的倾斜方向。如果省略了第2个参数，则取默认值0。skew()方法倾斜示意图如下图所示。其中，实线表示倾斜前的元素，虚线表示倾斜后的元素。下面通过一个案例来演示skew()方法的用法，如例8所示。在例8中，使用<div>标签定义了两个样式相同的盒子，并且通过skew()方法将第2个<div>标签沿x轴倾斜30deg、沿y轴倾斜10deg。运行例8，效果如下图所示。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>skew()方法</title> 6 <style type="text/css"> 7 div{ 8 width:100px; 9 height:50px; 10 margin:0 auto; 11 background-color:#F90; 12 border:1px solid black; 13 } 14 #div2{transform:skew(30deg,10deg);} 15 </style> 16 </head> 17 <body> 18 <div>我是原来的元素</div> 19 <div id="div2">我是倾斜后的元素</div> 20 </body> 21 </html>

（4）旋转

在CSS3中，使用rotate()方法可以旋转指定的元素对象，其基本语法格式如下： transform:rotate(angle); 在上述语法格式中，参数angle表示要旋转的角度值，单位为deg。如果角度为正数，则按顺时针方向旋转，否则按逆时针方向旋转。rotate()方法旋转示意图如下图所示。在上图中，实线表示旋转前的元素，虚线表示旋转后的元素。例如，设置某个<div>标签按顺时针方向旋转30°，具体示例代码如下： div{transform:rotate(30deg);} 注意：如果一个元素需要设置多种变形效果，可以用空格把多个变形属性值隔开。

（5）变换元素的中心点

通过transform属性可以实现元素的平移、缩放、倾斜和旋转效果，这些变形操作都是以元素的中心点为参照实现的。默认情况下，元素的中心点在x轴和y轴的50%位置。如果需要变换元素的中心点，可以使用transform-origin属性，其基本语法格式如下： transform-origin: x-axis y-axis z-axis; 在上述语法格式中，transform-origin属性包含3个参数，其默认值分别为50%、50% 、0px。 transform-origin各参数说明如下表所示。在上表中，参数x-axis和y-axis表示水平和垂直位置的坐标，用于2D变形；参数z-axis表示空间纵深坐标位置，用于3D变形。下面通过一个案例来演示transform-origin属性的用法，如例9所示。在例9中，通过transform属性的rotate()方法将box02、box03盒子分别旋转45deg，然后通过transform-origin属性来更改box02的中心点的位置。运行例9，效果如下图所示。通过上图可以看出，box02、box03发生了错位。两个盒子的初始位置相同，并且旋转角度相同，发生错位的原因是transform-origin属性改变了box02的中心点。

例9

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>transform-origin属性</title> 6 <style> 7 #div1{ 8 position:relative; 9 width: 200px; 10 height: 200px; 11 margin: 100px auto; 12 padding:10px; 13 border: 1px solid black; 14 } 15 #box02{ 16 padding:20px; 17 position:absolute; 18 border:1px solid black; 19 background-color: red; 20 transform:rotate(45deg); /*旋转45°*/ 21 transform-origin:20% 40%; /*更改中心点坐标的位置*/ 22 } 23 #box03{ 24 padding:20px; 25 position:absolute; 26 border:1px solid black; 27 background-color:#FF0; 28 transform:rotate(45deg); /*旋转45°*/ 29 } 30 </style> 31 </head> 32 <body> 33 <div id="div1"> 34 <div id="box02">box02更改基点位置</div> 35 <div id="box03">box03未更改基点位置</div> 36 </div> 37 </body> 38 </html>

2.3D变形

2D变形是元素在x轴和y轴的变化，而3D变形是元素绕x轴、y轴、z轴的变化。相比于平面化的2D变形，3D变形更注重空间位置的变化。下面将对网页中一些常用的制作3D变形效果的方法做具体介绍。

（1）rotateX()方法

在CSS3中，rotateX()方法可以让指定元素绕x轴旋转，基本语法格式如下： transform:rotateX(a); 在上述语法格式中，参数a用于定义旋转的角度值，单位为deg。旋转的角度值可以是正数也可以是负数。如果角度值为正数，元素将绕x轴顺时针旋转；如果角度值为负数，元素将绕x轴逆时针旋转。下面通过一个案例来演示rotateX()方法的用法，如例10所示。在例10中，第15行代码用于设置<div>标签绕x轴旋转60°。运行例10，效果如下图所示。当鼠标指针悬浮于初始状态时，盒子将绕x轴旋转。

例10

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>rotateX()方法</title> 6 <style type="text/css"> 7 div{ 8 width:250px; 9 height:50px; 10 background-color:#FF0; 11 border:1px solid black; 12 } 13 div:hover{ 14 transition:all 1s ease 2s; /*设置过渡效果*/ 15 transform:rotateX(60deg); 16 } 17 </style> 18 </head> 19 <body> 20 <div>元素旋转后的位置</div> 21 </body> 22 </html>

（2）rotateY()方法

在CSS3中，rotateY()方法可以让指定元素绕y轴旋转，其基本语法格式如下： transform:rotateY(a); 在上述语法格式中，参数a与rotateX(a)中的参数a含义相同，用于定义旋转的角度。如果角度值为正数，元素绕y轴顺时针旋转；如果角度值为负数，元素绕y轴逆时针旋转。下面在例10的基础上演示元素绕y轴旋转的效果。将例10中的第15行代码的进行如下更改： transform:rotateY(60deg); 此时，刷新浏览器页面，元素将绕y轴顺时针旋转60deg，效果如下图所示。注意： rotateZ()方法与rotateX()方法、rotateY()方法功能一样，区别在于rotateZ()方法用于指定元素绕z轴旋转。如果仅从视觉角度上看，rotateZ()方法让元素按顺时针或逆时针方向旋转，与rotate()方法效果等同，但rotateZ()方法不是在2D平面上的旋转。

（3）rotate3d()方法

rotate3d()方法是rotateX()方法、rotateY()方法和rotateZ()方法演变的综合属性，用于设置多个方向的3D旋转。例如，要同时设置元素绕x轴和y轴旋转，就可以使用rotated3d()方法，其基本语法格式如下： rotate3d(x,y,z,angle); 在上述语法格式中，x、y、z可以取0或1，当要沿着某一轴旋转，就将该轴的值设置为1，否则设置为0；angle为要旋转的角度。例如，设置元素绕x轴和y轴均旋转45deg，则示例代码如下： transform:rotate3d(1,1,0,45deg);

（4）perspective属性

petspective属性对于3D变形来说至关重要，该属性主要用于呈现良好的3D透视效果。例如，前面设置的3D环绕效果并不明显，原因在于没有设置perspective属性。其实，可以简单地将perspective属性理解为视距，用于设置透视效果。perspective属性的透视效果由属性值来决定，属性值越小，透视效果越突出。perspective属性包括两个属性值：none和具有单位（通常为像素）的数值。下面通过一个透视旋转的案例演示perspective属性的使用方法，如例11所示。在例11中，第26~28行代码定义了一个大<div>标签，其内部嵌套了一个小<div>标签；第11行代码为大<div>标签添加perspective属性。运行例11，效果如下图所示。当鼠标指针悬浮在盒子上时，小<div>标签将绕x轴旋转，并出现透视效果，如下图所示。

例11

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>perspective属性</title> 6 <style type="text/css"> 7 div{ 8 width:250px; 9 height:50px; 10 border:1px solid #666; 11 perspective:250px; /*设置透视效果*/ 12 margin:0 auto; 13 } 14 .div1{ 15 width:250px; 16 height:50px; 17 background-color:#0CC; 18 } 19 .div1:hover{ 20 transition:all 1s ease 2s; 21 transform:rotateX(60deg); 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <div class="div1">元素透视</div> 28 </div> 29 </body> 30 </html>

概要

需要说明的是，在CSS3中还包含很多转换的属性，通过这些属性可以设置不同的转换效果，下表列举了一些转换的常见属性。除了前面提到的旋转，3D变形还包括移动和缩放，运用下表中的方法可以实现不同的变形效果。下面通过一个综合案例演示3D变形属性和其使用方法，如例12所示。在例12中，第13行代码通过transform-style属性指定元素在3D空间中的显示方式；同时，在整个案例中分别为<div>和<img>标签设置不同的旋转轴和旋转角度。运行例12，移出时的动画过程和鼠标指针悬浮时的效果如下图所示。

例12

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>translate3D()方法</title> 6 <style type="text/css"> 7 div{ 8 width:200px; 9 height:200px; 10 border:2px solid #000; 11 position:relative; 12 transition:all 1s ease 0s; /*设置过渡效果*/ 13 transform-style:preserve-3d; /*规定被嵌套元素如何在3D空间中展示*/ 14 } 15 img{ 16 position:absolute; 17 top:0; 18 left:0; 19 transform:translateZ(100px); 20 } 21 .no2{ 22 transform:rotateX(90deg) translateZ(100px); 23 } 24 div:hover{ 25 transform:rotateX(-90deg); /*设置旋转角度*/ 26 } 27 div:visited{ 28 transform:rotateX(-90deg); /*设置旋转角度*/ 29 transition:all 1s ease 0s; /*设置过渡效果*/ 30 transform-style:preserve-3d; /*规定被嵌套元素如何在3D空间中显示*/ 31 } 32 </style> 33 </head> 34 <body> 35 <div> 36 <img class="no1" src="images/1.png" alt="1"> 37 <img class="no2" src="images/2.png" alt="2"> 38 </div> 39 </body> 40 </html>

任务7-4 在网页中添加动画效果

需求分析

过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制。例如，过渡和变形实现的动态效果不能重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。下面将详细讲解在网页中添加动画效果的方法。

知识储备

1.@keyframes规则

@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画效果，因此在学习animation属性之前，先要学习@keyframes规则。@keyframes规则的基本语法格式如下： @keyframes animationname { keyframes-selector{css-styles;} } 在上述语法格式中，@keyframes属性包含的参数的具体含义如下。 animationname：表示当前动画的名称（即后面讲解的animation-name属性定义的名称），它将作为引用时的唯一标识，因此不能为空。 keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比数值、from或者to。其中，from和0%效果相同，表示动画的开始；to和100%效果相同，表示动画的结束。当两个位置应用同一个效果时，这两个位置使用英文逗号隔开，写在一起即可。例如，“20%,80%{opacity0.5;}”。 css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性定义，多个属性之间用英文分号分隔，不能为空。例如，使用@keyframes规则可以定义一个淡入动画，示例代码如下： @keyframes appear { 0%{opacity:0;} /*动画开始时的状态，完全透明*/ 100%{opacity:1;} /*动画结束时的状态，完全不透明*/ } 上述代码创建了一个名称为appear的动画，该动画在开始时opacity为0（透明），动画结束时opacity为1（不透明）。该动画效果还可以使用等效代码来实现，具体如下： @keyframes appear { from{opacity:0;} /*动画开始时的状态，完全透明*/ to{opacity:1;} /*动画结束时的状态，完全不透明*/ } 另外，如果需要创建一个淡入淡出的动画效果，其示例代码如下： @keyframes appear { from,to{opacity:0;} /*动画开始和结束时的状态，完全透明*/ 20%,80%{opacity:1;} /*动画的中间状态，完全不透明*/ } 在上述代码中，为了实现淡入淡出的效果，需要定义在动画开始和结束时元素不可见，然后渐渐淡入，在动画的20%处变得可见，然后动画效果持续到80%处，再慢慢淡出。注意：版本低于IE9.0的IE浏览器不支持@keyframes规则和animation属性。

2.animation-name属性

animation-name属性用于定义要应用的动画名称，该动画名称会被@keyframes规则引用，其基本语法格式如下： animation-name:keyframename|none; 在上述语法格式中，animation-name属性初始值为none，适用于所有块元素和行内元素；keyframename参数用于规定需要绑定到@keyframes规则的名称，如果值为none，则表示不应用任何动画。

3.animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的时间，其基本语法格式如下： animation-duration: time; 在上述语法格式中，animation-duration属性初始值为0；time参数是以秒（s）或者毫秒（ms）为单位的时间，当设置为0时，表示没有任何动画效果；当取值为负数时会被视为0。下面通过一个小人奔跑案例来演示animation-name属性和animation-duration属性的用法，如例13所示。在例13中，第9行代码使用animation-name属性定义要应用的动画名称；第10行代码使用animation-duration属性定义完成整个动画效果所需要的时间；第13~16行代码使用form、to和百分比数值指定当前关键帧要应用的动画效果。运行例13，卡通人物会从左到右进行一次折返跑，效果如下图所示。需要说明的是，还可以通过定位属性设置元素位置的移动，效果与平移效果一致。

例13

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>animation-duration属性</title> 6 <style type="text/css"> 7 img{ 8 width:200px; 9 animation-name:mymove; /*定义动画名称*/ 10 animation-duration:10s; /*定义动画时间*/ 11 } 12 @keyframes mymove{ 13 from {transform:translate(0) rotateY(180deg);} 14 50% {transform:translate(1000px) rotateY(180deg);} 15 51% {transform:translate(1000px) rotateY(0deg);} 16 to {transform:translate(0) rotate(0deg);} 17 } 18 </style> 19 </head> 20 <body> 21 <img src="images/people.gif" > 22 </body> 23 </html>

4.animation-timing-function属性

animation-timing-function属性用于规定动画的速度曲线，决定了动画将以什么样的速度执行。animnation-timing-function属性的基本语法格式如下： animation-timing-function:value; 在上述语法格式中，animation-timing-function属性的默认属性值为ease。另外，animation-timing-function属性的常用属性值还包括linear 、ease-in、 ease-out、ease-in-out、cubic-bezier(n.n,n,n)等，具体如下表所示。例如，若想让元素匀速运动，则为元素添加的示例代码如下： animation-timing-function:linear; /*定义匀速运动*/

5.animation-delay属性

animation-delay属性用于定义执行动画效果延迟的时间，即规定动画什么时候开始，其基本语法格式如下： animation-delay:time; 在上述语法格式中，参数time用于定义动画开始前等待的时间，其单位是秒（s）或毫秒（ms），默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。例如，要想让添加动画的元素在2s后播放动画效果，可以在该元素中添加如下代码： animation-delay:2s; 此时、刷新浏览器页面，动画会先延迟2s，然后才开始执行动画。需要说明的是，animation-delay属性的属性值也可以设置为负值，当设置为负值后，动画会跳过该时间播放。

6.animation-iteration-count属性

animation-iteration-count属性用于定义动画的播放次数，其基本语法格式如下： animation-iteration-count: number|infinite; 在上述语法格式中，animation-iteration-count属性初始值为1。如果其属性值为数字（number），则表示播放动画的次数；如果为infinite，则指定动画循环播放。示例代码如下： animation-iteration-count:3; 在上述代码中，使用animation-iteration-count属性定义动画效果需要连续播放3次。

7.animation-direction属性

animation-direction属性用于定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。其基本语法格式如下： animation-direction: normal|alternate; 在上述语法格式中，animation-direction属性包括normal和alternate两个属性值。其中，normal为默认属性值，动画会正常播放；alternate会使动画在奇数次（1、3、5等）时正常播放，而在偶数次（2、4、6等）时逆向播放。因此，要想使animation-direction属性生效，先要定义animation-iteration-count属性（播放次数），只有动画播放次数不少于2次时，animation-direction属性才会生效。下面通过一个小球滚动案例来演示animation-direction属性的用法，如例14所示。在例14中，第14行和第15行代码设置了动画的播放次数和逆向播放，此时图形第2次的动画效果就会逆向播放。运行例14，效果如下图所示。

例14

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>animation-direction属性</title> 6 <style type="text/css"> 7 div{ 8 width:200px; 9 height:150px; 10 border-radius:50%; 11 background:#F60; 12 animation-name:mymove; /*定义动画名称*/ 13 animation-duration:8s; /*定义动画时间*/ 14 animation-iteration-count:2; /*定义动画播放次数*/ 15 animation-direction:alternate; /*定义动画逆向播放*/ 16 } 17 @keyframes mymove{ 18 from {transform:translate(0) rotateZ(0deg);} 19 to {transform:translate(1000px) rotateZ(1080deg);} 20 } 21 </style> 22 </head> 23 <body> 24 <div></div> 25 </body> 26 </html>

8.animation属性

animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction这6个动画属性。其基本语法格式如下： animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; 在上述语法格式中，使用animation属性时必须指定animation-name属性和animation-duration属性，否则动画效果将不会播放。下面的示例代码是一个简写后的动画效果代码。 animation:mymove 5s linear 2s 3 alternate; 上述代码也可以拆解为如下内容： animation-name:mymove; /*定义动画名称*/ animation-duration:5s; /*定义动画时间*/ animation-timing-function:linear; /*定义动画速率*/ animation-delay:2s; /*定义动画延迟时间*/ animation-iteration-count:3; /*定义动画播放次数*/ animation-direction:alternate; /*定义动画逆向播放*/

任务7-5 页面建设准备工作

学习完前文介绍的理论知l识后，小思准备着手制作“视频8”首页。先进行页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。

网站素材整理

1.建立站点

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本书在“D盘:\案例源码\chapter07”文件夹中新建一个文件夹作为网站根目录，并命名为“shipin8”。

（2）在根目录下新建文件

打开网站根目录“shipin8”，在根目录下新建“images”文件夹用于存放图像，新建“fonts”文件夹用于存放字体，新建“css”文件夹用于存放CSS样式表文档，新建“video”文件夹用于存放视频素材。

（3）新建站点

打开Dreamweaver工具，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称“shipin8”。浏览并选择站点根目录的存储位置，单击“保存”按钮，站点即创建成功。

2.切图

使用Fireworks CS6的切片工具，导出“视频8”首页中的图像，并存储在站点中的“images”文件夹中。导出后的图像素材如下图所示。

效果分析

1.HTML结构分析

“视频8”首页从上到下可以分为5个模块，分别为“引导栏”模块、“导航”模块、“banner”模块、“内容”模块、“页脚”模块。“视频8”首页的结构如下图所示。

2.CSS样式分析

仔细观察首页的各个模块，其中“引导栏”模块、“导航”模块、“banner”模块和“页脚”模块需要通栏显示，可以将最外层的盒子宽度设置为100%。经过测量效果图发现，“内容”模块宽度为1200px且居中显示，因此可以将首页的版心设置为1200px。首页的其他样式细节可以参照各模块的CSS样式分析和案例源码，根据前面学习的静态网页制作的知识分别进行制作。

定义基础样式

1.页面布局

下面对“视频8”首页进行整体布局。在站点根目录下新建一个HTML文件，并命名为“project07”，然后使用<div>标签对页面进行布局，具体代码如project07.html所示。

project07.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>视频8</title> 6 </head> 7 <body> 8  9 <div id="head"> 10 <div class="con"></div> 11 </div> 12  13  14 <div id="nav"> 15 <div class="nav_in"></div> 16 </div> 17  18  19 <div class="banner"> 20 <div class="banner_pic"></div> 21 </div> 22  23  24 <div class="hot"></div> 25 <div class="share"></div> 26  27  28 <div id="footer"> 29 <div class="foot"></div> 30 </div> 31  32 </body> 33 </html> 在上述代码中，id为head的<div>标签用于控制“引导栏”模块的结构；id为nav的<div>标签用于控制“导航”模块的结构；class为banner 的<div>标签用于控制“banner”模块的结构；class为hot和share的两个<div>标签，分别用于控制“内容”模块的“最热视频”和“观影达人”的结构；id为footer的<div>标签用于控制“页脚”模块的结构。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style07.css，先使用外链式在project07.html文件中引入样式表文件。然后，定义页面的基础样式，具体CSS代码如下： 1 /*重置浏览器的默认样式*/ 2 body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img,video{margin:0;padding:0;border:0;list-style: none; outline:none;} 3 /*全局控制样式*/ 4 body{font-family:"微软雅黑",Arial, Arial, Helvetica, sans-serif; font-size:14px; background:#282828;} 5 a{color:#333;text-decoration: none;} 6 @font-face{ 7 font-family: 'freshskin'; 8 src:url('../fonts/inconfont.ttf'); 9 } 在上述代码中，第6~9行代码用于为网页添加自定义字体“iconfont.ttf”。当使用该字体时，直接引入font-family属性定义的字体名称即可。

任务7-6 制作“引导栏”模块

效果分析

1.结构分析

“引导栏”模块分别由两个<div>标签定义，其中，最外层的大<div>标签用于控制“引导栏”模块通栏显示，内部的小<div>标签用于设置版心的宽度。“引导栏”模块内部的导航分为左右两个部分，可以使用<ul>标签搭建。“引导栏”模块的结构如下图所示。

2.样式分析

“引导栏”模块通栏显示，因此需要将最外层的<div>标签宽度设置为100%。“引导栏”模块的版心宽度为1200px，需要居中对齐显示，可以将次外层的<div>标签宽度设置为1200px，通过“margin:0 auto;”设置居中效果。“引导栏”模块内部的导航可以通过浮动属性让导航分为左右两个部分。

模块制作

1.搭建结构

在project07.html文件内书写“引导栏”模块的HTML结构代码，具体代码如下： 1 <div id="head"> 2 <div class="con"> 3 <ul class="left"> 4 <li>首页</li> 5 <li>电影音乐</li> 6 <li>独家栏目</li> 7 <li>VIP影院</li> 8 <li>电影百科</li> 9 </ul> 10 <ul class="right"> 11 <li>APP下载</li> 12 <li>播放记录</li> 13 <li>登录|注册</li> 14 </ul> 15 </div> 16 </div> 在上述代码中，id为head的<div>标签用于设置“引导栏”模块通栏显示，class为con的<div>标签用于控制版心宽度。

2.控制样式

在样式表文件style07.css中书写“引导栏”模块对应的CSS样式代码，具体如下： 1 #head{ 2 width:100%; 3 height:46px; 4 background:#000 5 } 6 #head .con{ 7 width:1200px; 8 margin:0 auto; 9 } 10 #head .con .left{float:left;} 11 #head .con .right{float:right;} 12 #head .con .left li{ 13 float:left; 14 height:46px; 15 line-height:46px; 16 margin-right:50px; 17 color:#fff; 18 cursor:pointer 19 } 20 #head .con .right li{ 21 float: right; 22 height:46px; 23 line-height: 46px; 24 margin-left:50px; 25 color: #fff; 26 cursor: pointer; 27 } 28 #head .con .right li a{color:#fff;} 在上述代码中，第1~5行代码用于设置“引导栏”模块通栏显示；第6~9行代码用于设置版心居中显示。

概要

保存project07.html与 style07.css文件，刷新页面，“引导栏”模块的效果如下图所示。

任务7-7 制作“导航”模块

效果分析

1.结构分析

“导航”模块的结构与“引导栏”模块类似，同样由两个<div>标签定义。其中，最外层的大<div>标签用于控制导航通栏显示，内部的小<div>标签用于设置版心的宽度。导航内部分为左右两个部分，其中左侧使用<ul>标签搭建，右侧使用<ol>标签搭建。“导航”模块的结构如下图所示。

2.样式分析

“导航”模块通栏显示，因此需要将最外层的<div>标签宽度设置为100%。引导栏的版心宽度为1200px，需要居中对齐显示，可以将内部的<div>标签宽度设置为1200px，通过“margin:0 auto;”设置居中效果。导航内部右侧的<ol>标签用于定义字体图标，当鼠标指针悬浮到图标上时，会有阴影过渡效果，可以使用transition属性和box-shadow属性进行设置。

模块制作

1.搭建结构

继续在project07.html文件内书写“导航”模块的HTML结构代码，具体如下： 1 <div id="nav"> 2 <div class="nav_in"> 3 <ul> 4 <li><a href="#"></a></li> 5 <li><a href="#">个人中心</a></li> 6 <li><a href="#">视频播放</a></li> 7 </ul> 8 <ol> 9 <li></li> 10 <li></li> 11 <li>󰄪</li> 12 <li></li> 13 </ol> 14 </div> 15 </div> 在上述代码中，第8~13行代码用于设置字体图标，<li>标签中的特殊字符为图标对应的编码。

2.控制样式

在样式表文件style07.css中书写“导航”模块对应的CSS样式代码，具体如下： 1 #nav{ 2 width:100%; 3 height:55px; 4 position:absolute; 5 background:rgba(255,255,255,0.8); /*设置背景颜色半透明*/ 6 z-index:10; 7 } 8 #nav .nav_in{ 9 width:1200px; 10 margin:0 auto; 11 } 12 #nav ul{float: left;} 13 #nav ul li{ 14 float: left; 15 margin-right: 50px; 16 font-size: 18px; 17 height:55px; 18 line-height: 55px; 19 } 20 #nav ul li:first-child a{ 21 display:inline-block; 22 height:55px; 23 width:118px; 24 background:url(../images/LOGO.png) no-repeat center left; 25 } 26 @font-face{ 27 font-family:"freshskin"; /*引入和使用自定义字体*/ 28 src:url(../fonts/iconfont.ttf) 29 } 30 #nav .nav_in ol{ 31 float: right; 32 width:300px; 33 height: 55px; 34 font-family:"freshskin"; 35 } 36 #nav .nav_in ol li{ 37 float: left; 38 width:32px; 39 height:32px; 40 line-height: 32px; 41 text-align: center; 42 color:#333; 43 box-shadow: 0 0 0 1px #333 inset; 44 transition:box-shadow 0.5s ease 0s; 45 border-radius: 16px; 46 margin:10px 0 0 30px; 47 cursor: pointer; 48 } 49 #nav .nav_in ol li:hover{ 50 box-shadow: 0 0 0 16px #fff inset; 51 color:#333; 52 } 在上面的代码中，第20行代码通过“:first-child”来控制<ul>标签中第一个<a>标签的显示样式；第32~52行代码用于设置字体图标默认样式和鼠标指针悬浮到字体图标上时的过渡样式。

概要

保存project07.html与style07.css文件，刷新页面，“导航”模块的效果如下图所示。

任务7-8 制作“banner”模块

效果分析

1.结构分析

“banner”模块的结构主要由图片、文本和按钮3部分构成。其中，图片可以通过在<div>标签中嵌套<img>标签来实现；文本可以使用<p>标签定义；按钮为3个，排成一排显示，可以使用<ol>标签定义。此外,模块中还有一个向下的三角图标，可以使用<a>标签定义。“banner”模块的结构如下图所示。

2.样式分析

“banner”模块同样需要通栏显示。因此，可以将最外层<div>标签的宽度设置为100%，内部嵌套的<div>标签可以通过绝对定位的方式设置图片的位置。当鼠标指针进入到“banner”模块区域时，文本和三角图标会显示动画效果，可以通过transform属性和transition属性设置不同样式的过渡动画。按钮部分可以通过float属性来实现，将它们制作排列成一行的显示样式。

模块制作

1.搭建结构

继续在project07.html文件内书写“banner”模块的HTML结构代码，具体如下： 1 <div class="banner"> 2 <div class="banner_pic"> 3 <div class="current"><img class="ban" src="images/banner01.jpg"></div> 4 </div> 5 <p>迅速发现最新影视快讯|尽享国内外优秀视频资源|分享观影心得结识新朋友</p> 6 <p class="ty2">观看最新视频</p> 7 <ol id="button"> 8 <li class="current"></li> 9 <li class="but"></li> 10 <li class="but"></li> 11 </ol> 12 <a href="#con" class="sanjiao"> 13 <img src="images/jiantou.png" alt=""> 14 </a> 15 </div>

2.控制样式

在样式表style07.css中书写“banner”模块对应的CSS样式代码，具体如下： 1 .banner{ 2 width:100%; 3 height:720px; 4 position: relative; 5 color:#fff; 6 overflow: hidden; 7 text-align: center; 8 } 9 .banner .ban{ 10 position: absolute; 11 top:0; 12 left:50%; 13 transform:translate(-50%,0); /*设置图片水平50%的偏移位置*/ 14 } 15 .banner .current{display: block;} 16 #button{ 17 position:absolute; 18 left:50%; 19 top:90%; 20 margin-left:-62px; 21 z-index:9999; /*设置按钮的层叠等级为最高*/ 22 23 } 24 #button .but{ 25 float:left; 26 width:28px; 27 height:1px; 28 border:1px solid #d6d6d6; 29 margin-right:20px; 30 } 31 #button li{cursor:pointer;} 32 #button .current{ 33 background:#F90; 34 float:left; 35 width:28px; 36 height:1px; 37 border:1px solid #F90; 38 margin-right:20px; 39 } 40 body:hover .banner h3{ 41 padding-top:200px; 42 opacity: 1; 43 } 44 .banner p{ 45 width:715px; 46 position: absolute; 47 top:50%; 48 left:50%; 49 font-size: 20px; 50 opacity: 0; 51 transform:translate(-50%,-50%); 52 transition:all 0.8s ease-in 0s; 53 } 54 body:hover .banner p{opacity: 1;} 55 .banner .ty2{ 56 position: absolute; 57 top:1000px; 58 left:50%; 59 font-size: 20px; 60 opacity: 0; 61 transform:translate(-50%,0); 62 transition:all 0.8s ease-in 0s; 63 } 64 body:hover .banner .ty2{ 65 position: absolute; 66 top:400px; 67 opacity: 1; 68 } 69 .sanjiao{ 70 width:40px; 71 height: 30px; 72 padding-top: 10px; 73 border-radius: 20px; 74 box-shadow: 0 0 0 1px #fff inset; 75 text-align: center; 76 position: absolute; 77 top:1000px; 78 left:50%; 79 z-index: 99999; 80 opacity: 0; 81 transform:translate(-50%,0); 82 transition:all 0.8s ease-in 0s; 83 } 84 body:hover .sanjiao{ 85 position: absolute; 86 top:500px; 87 opacity:1; 88 } 89 .sanjiao:hover{box-shadow:0 0 0 20px #2fade7 inset;} 在上述CSS代码中，第9~14行代码通过定位属性设置图片水平居中；第69~83行代码用于设置三角图标默认的显示样式和过渡动画；第84~88行代码用于设置鼠标指针悬浮到三角图标上时，三角图标的悬浮效果。

概要

保存project07.html与style07.css文件，刷新页面，“banner”模块的效果如下图所示。注：因为笔者本人学习时所下载的素材中，图片banner01.jpg的内容与参考教材不一致，所以导致网页最终的显示结果与结构分析中的结果预览不一致，敬请谅解。

任务7-9 制作“内容”模块

效果分析

1.结构分析

“内容”模块包括两个部分——“最热视频”和“观影达人”，这两部分可以使用两个<div>标签定义。“最热视频”中的视频可以使用<video>标签定义，图片可以使用<a>标签嵌套<img>标签定义。“观影达人”中的图片同样可以使用<a>标签嵌套<img>标签定义。此外，“观影达人”部分的鼠标指针悬浮效果可以使用<div>标签定义。“内容”模块的结构如下图所示。

2.样式分析

“内容”模块不需要通栏显示，因此只需要将控制内容模块的两个<div>标签宽度设置为1200px，居中显示即可。在“最热视频”部分，当鼠标指针悬浮到图片时，会有图片放大的动画效果，可以通过transform属性来设置。在“观影达人”部分，当鼠标指针悬浮到图片时，会有图片移出的动画效果，可以通过transition属性和position属性来实现。

模块制作

1.搭建结构

继续在project07.html文件内书写“内容”模块的HTML结构代码，具体如下： 1 <div class="hot"> 2 <h2>最热视频</h2> 3 <video src="video/pian.mp4" controls></video> 4 <a href="#"><img src="images/pic02.jpg" ></a> 5 <a href="#"><img src="images/pic03.jpg" ></a> 6 <a href="#"><img src="images/pic04.jpg" ></a> 7 <a href="#"><img src="images/pic05.jpg" ></a> 8 <a href="#"><img src="images/pic06.jpg" ></a> 9 </div> 10 <div class="share"> 11 <h2>观影达人</h2> 12 <a href="#"> 13 <img src="images/pic07.jpg"> 14 <div class="cur"> 15 <img src="images/pic01.png"> 16 <h3>nosay</h3> 17 <p>视频: 34 订阅粉丝: 30112</p> 18 <span>订阅</span> 19 </div> 20 </a> 21 <a href="#"> 22 <img src="images/pic07.jpg"> 23 <div class="cur"> 24 <img src="images/pic02.png"> 25 <h3>nosay</h3> 26 <p>视频: 34 订阅粉丝: 30112</p> 27 <span>订阅</span> 28 </div> 29 </a> 30 <a href="#"> 31 <img src="images/pic07.jpg"> 32 <div class="cur"> 33 <img src="images/pic03.png"> 34 <h3>nosay</h3> 35 <p>视频: 34 订阅粉丝: 30112</p> 36 <span>订阅</span> 37 </div> 38 </a> 39 <a href="#"> 40 <img src="images/pic07.jpg"> 41 <div class="cur"> 42 <img src="images/pic04.png"> 43 <h3>nosay</h3> 44 <p>视频: 34 订阅粉丝: 30112</p> 45 <span>订阅</span> 46 </div> 47 </a> 48 </div> 在上述代码中，第3行代码中的<video>标签用于在网页中插入视频。

2.控制样式

在样式表文件style07.css中书写“内容”模块对应的CSS样式代码，具体如下： 1 .hot{ 2 width:1200px; 3 height:825px; 4 margin:0px auto; 5 border-bottom: 3px solid #ccc; 6 } 7 .hot h2,.share h2{ 8 text-align: center; 9 color:#eee; 10 font-size: 36px; 11 font-weight: normal; 12 line-height:100px; 13 } 14 .hot video{ 15 float: left; 16 width:792px; 17 height:448px; 18 margin:0 0 12px 17px; 19 overflow: hidden; 20 background:#000; 21 } 22 .hot a{ 23 float: left; 24 width:388px; 25 height:218px; 26 overflow: hidden; 27 margin:0 0 12px 17px; 28 } 29 .hot video,.hot a:nth-of-type(3),.share a:nth-of-type(1),.share a:nth-of-type(3){margin-left:0;} 30 hot a img,.share a img{display: block;} 31 .hot a img{transition:all 0.5s ease-in 0s;} 32 .hot a:hover img{transform: scale(1.1,1.1);} 33 .hot video{ 34 width:795px; 35 height:448px; 36 overflow: hidden; 37 } 38 .share{ 39 width:1200px; 40 height:850px; 41 margin:0 auto; 42 border-bottom: 3px solid #ccc; 43 } 44 .share a{ 45 float: left; 46 position: relative; 47 width:592px; 48 height:343px; 49 margin:0 0 16px 16px; 50 overflow: hidden; 51 } 52 .share a .cur{ 53 width:296px; 54 height:345px; 55 background: rgba(255,255,255,0); 56 position:absolute; 57 left:-296px; 58 top:0; 59 text-align: center; 60 transition:all 0.5s ease-in 0s; 61 } 62 63 .share a:hover .cur{ 64 position: absolute; 65 left:0; 66 top:0; 67 background: rgba(255,255,255,0.5); 68 } 69 .share a:nth-of-type(2) .cur,.share a:nth-of-type(3) .cur{ 70 position: absolute; 71 left:592px; 72 top:0; 73 } 74 .share a:nth-of-type(2):hover .cur,.share a:nth-of-type(3):hover .cur{ 75 position: absolute; 76 left:296px; 77 top:0; 78 } 79 .share a .cur img{ padding:70px 0 15px 125px;} 80 .share a .cur p{padding:10px 0 15px 0;} 81 .share a .cur span{ 82 display: block; 83 width:75px; 84 height:30px; 85 background: #2fade7; 86 border-radius: 5px; 87 margin:30px 0 0 110px; 88 color:#fff; 89 line-height: 30px; 90 } 在上述代码中，nth-of-type()方法用于选择同级中的某个元素。括号中设置某个数字，即表示选择第几个元素。

概要

保存project07.html与style07.css文件，刷新页面，“内容”模块的效果如下图所示。

任务7-10 制作“页脚”模块

效果分析

1.结构分析

“页脚”模块较为简单，只需通过<div>标签嵌套<p>标签和<a>标签即可实现。“页脚”模块的结构如下图所示。

2.样式分析

“页脚”模块需要通栏显示，因此可以将最外层<div>标签的宽度设置为100%；内部嵌套的<div>标签的宽度设置为1200px，并在页面中居中显示作为版心。“Top”按钮是一个可以跳转到顶部的锚点链接，可以通过定位的方式设置“Top”按钮的位置。

模块制作

1.搭建结构

继续在project07.html文件内书写“页脚”模块的HTML结构代码，具体如下： 1 <div id="footer"> 2 <div class="foot"> 3 <a href="#head"><span>Top</span></a> 4 <p>Copyright©2020 视频8 shipin8.com 版权所有</p> 5 </div> 6 </div> 在上述代码中，第3行代码中“href= "#head"”用于设置一个锚点链接，当单击设置了锚点链接的按钮后，页面会跳转到“id="head"”的锚记位置。

2.控制样式

在样式表文件style07.css中书写“页脚”模块对应的CSS样式代码，具体如下： 1 #footer{ 2 width:100%; 3 height:127px; 4 margin-top:100px; 5 background: #000; 6 color:#fff; 7 text-align: center; 8 } 9 #footer .foot{ 10 width:1200px; 11 height:127px; 12 margin:0 auto; 13 position: relative; 14 } 15 #footer span{ 16 width:58px; 17 height:32px; 18 line-height:43px; 19 text-align:center; 20 color:#fff; 21 position: absolute; 22 top:-31px; 23 left:600px; 24 background:url(../images/sanjiao.png); 25 } 26 #footer p{ 27 line-height:127px; 28 } 在上述代码中，第21～23行代码通过绝对定位设置“Top”按钮在页面中的显示位置。

概要

保存project07.html与style07.css文件，刷新页面，“页脚”模块效果如下图所示。

项目8 “甜蜜约会”首页制作

知识目标

熟悉JavaScript的基础知识，包括JavaScript的基本语法和引入方式。了解常用的数据类型和运算符种类。了解流程控制语句的语法格式和判定逻辑。熟悉数组的常用属性和方法。

技能目标

掌握变量的用法，能够声明变量，并为变量赋值。认识函数，掌握调用函数的方法。认识对象，掌握创建对象和删除对象的方法。掌握调用JavaScript事件的方法。

项目描述

如今，甜品店及茶餐厅成为潮流，消费者已不再受缚于传统餐饮，开始追求更好的生活品质。甜品对于消费者来说不仅是—种休闲食品，更是一种生活态度。“甜蜜约会”是一家售卖各类甜点的连锁店，为了契合市场需求，更好地宣传店铺甜品，该店店长致电HC公司王经理，计划制作一个甜品网站。接到王经理安排的任务后，小思制订了近期的项目计划：首先，学习JavaScript编程基础、变量、函数、对象等知识；然后，学习BOM对象、DOM对象、事件等知识；最后，运用所学的JavaScript知识，制作一个带有互动效果的网站。本书只演示“甜蜜约会”首页的制作过程。“甜蜜约会”首页效果如下图所示。

任务8-1 JavaScript基础知识

需求分析

JavaScript是一种功能强大的网页脚本语言，主要用于开发交互式的网站页面。要想使用JavaScript，先要了解JavaScript的基础知识。下面将从JavaSeript简介、JavaScript引入方式和JavaScript基本语法这3个方面详细讲解JavaScript基础知识，并通过一个简单的JavaScript程序进行演习。

知识储备

1.JavaScipt简介

说起JavaScript，其实大家并不陌生，大家浏览的网页中或多或少都有JavaScript的影子。例如，淘宝网中的焦点图，每隔一段时间焦点图就会自动切换。再如，单击网站导航时会弹出一个列表菜单。这些都可以使用JavaScript来实现。下面将从JavaScript的起源、JavaScript的特点、JavaScript的应用3个方面对JavaScript进行简单介绍。

（1）JavaScript的起源

JavaScript是一种被广泛用于Web开发的脚本语言。JavaScript的前身是LiveScript，是由网景（Netscape）公司开发的脚本语言。后来在Sun公司推出著名的Java之后，网景公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。在概念和设计方面，Java和JavaScript是两种完全不同的语言。Java是面向对象的程序设计语言，用于开发企业应用程序；而JavaScript则是在浏览器中执行，用于开发客户端浏览器的应用程序，能够实现用户与浏览器的动态交互。

（2）JavaScript的特点

JavaScript是一种基于对象（Object）和事件驱动（Event-Driven）并具有安全性的脚本语言，它具有以下几个主要特点。解释性：JavaScript不同于一些编译性的程序语言（如C、C++等），它是一种脚本语言。因此，JavaScript的源代码不需要进行编译，而是直接在浏览器中执行。基于对象：JavaScript是一种基于对象的语言，它的许多功能来自于脚本环境中对象的方法与脚本的相互作用。在JavaScript中，既可以使用预定义对象，也可以使用自定义对象。事件驱动：JavaScript可以直接对用户的输入做出响应，无须经过Web服务程序，而是以事件驱动的方式进行。例如，单击鼠标、移动窗口、选择菜单等事件发生后，可以引起事件的响应。跨平台性：在HTML页面中，JavaScript依赖于浏览器本身，与操作环境无关。用户只要在计算机上安装了支持JavaScript的浏览器，程序就可以正确执行。安全性：JavaScript具有安全性，它不允许访问本地硬盘，也不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或者动态交互。

（3）JavaScript的应用

JavaScript功能十分强大，其最主流的应用是创建网页特效。使用JavaScript实现的具有动态交互效果的页面在网页上随处可见。下面将介绍JavaScript的几种常见应用。

①验证用户输入的内容

使用JavaScript可以在客户端对用户输入的内容进行验证。例如，用户注册页面通常会验证用户输入的手机号、昵称和密码是否正确，如下图所示。如果用户在注册信息文本框中输入的信息不符合要求，页面将弹出相应的提示信息，如下图所示。

②添加图片动画特效

在浏览网页时，经常会看到一些图片动画特效，让页面看起来更炫酷。使用JavaScript也可以实现图片动画特效。例如，网页中常见的焦点图切换动画特效，如下图所示。

③弹出广告窗口

在打开网页时，经常会弹出一些广告窗口，这些广告窗口是网站最主要的盈利手段。广告窗口也可以通过JavaScript来实现，如下图所示。

④添加文字动画特效

使用JavaScript可以给文字添加多种动画特效。例如，文字旋转特效，如下图所示。

2.JavaScript引入方式

JavaScript的引入方式与CSS类似。在HTML文档中引入JavaScript的方式主要有3种，即行内式、嵌入式和外链式，具体介绍如下。

（1）行内式

行内式是将JavaScript代码作为HTML标签属性的属性值使用。例如，单击“test”时弹出一个警告框提示“Happy”、具体示例代码如下： <a href="javascript:alert('Happy');">test</a> JavaScript代码还可以写在HTML标签的事件属性中（关于事件属性这里了解即可）。例如，单击网页中的某个按钮时会触发按钮的单击事件，具体示例代码如下： <input type="button" onclick="alert('Happy');" value="test"> 上述代码实现了单击“test”按钮时弹出一个警告框提示“Happy”。

（2）嵌入式

在HTML中，运用<script>标签及其相关属性可以嵌入JavaScript代码。嵌入JavaScript代码的基本语法格式如下： <script type="text/javascript"> Javascript 语句; </script> 在上述语法格式中，type是<script>标签的常用属性，用于指定HTML中使用的脚本语言类型。“type="text/javascript”就是为了告诉浏览器嵌入的代码为JavaScript代码。但是随着Web技术的发展（HTML5的普及、浏览器性能的提升），嵌入JavaScript代码的基本语法格式又有了新的写法，具体如下： <script> JavaScript语句; </script> 在上述语法格式中，省略了type="text/javascript"语句，这是因为新版本的浏览器一般将嵌入的脚本语言默认为JavaScript，所以在编写JavaScript代码时可以省略type属性。需要说明的是，通过嵌入式引入的JavaScript代码可以放在HTML文档中的任何位置，但放置的位置会对JavaScript代码的执行顺序有一定影响。在实际工作中，一般将JavaSript代码放置在<head></head>标签之间或者</body>标签之前，二者的差异如下。 ①放置在<head></head>标签之间。放置在<head></head>标签之间的JavaScript代码会在页面加载完成之前就被优先载入。但是当通过JavaScript代码控制body中的元素时，由于body 中的元素还未载人，此时系统就会报错。所以需要绑定--个监听事件，通过事件触发JnvnScript代码，示例代码如下: windows.onload-function(){ //这里放入执行代码 } ②放置在</body>标签之前。放置在</body>标签之前的JavaScript代码会在页面加载完成之后载入并执行，这样网页就不会报错，但这种方式不适用于一些只加载暂时不执行的JavaScript代码。 <!doctype html> <html> <head> <meta charset"utf-8"> <title>嵌入式</title> </head> <body> <script type=" text/javascript"> alert("我是JavaScript脚本代码！") </script> </body> </html> 在上述示例代码中，<script>标签内嵌套的就是JavaScript代码。

（3）外链式

外链式是将所有的JavaScript代码放在一个或多个以“js”为扩展名的外部JavaScript文件中，通过src属性将这些JavaScript文件链接到HTML文档中。外链式引入JavaScript的语法格式如下： <script type="text/javascript" src="脚本文件路径"> </script> 在上述语法格式中, src是<script>标签的属性，用于指定外部JavaScript 文件的路径。同样，在外链式的语法格式中也可以省略type属性，将外链式的语法简写： <script src="脚本文件路径"> </script> 需要注意的是，调用外部JavaScript文件时，外部的JavaScript文件中可以直接书写JavaScript代码，不需要书写<script>标签。在实际开发中，当需要编写大量、逻辑复杂的JavaScript代码时，推荐使用外链式。相比于行内式、嵌入式，外链式的优势可以总结为以下两点。 ①利于代码后期修改和维护。行内式和嵌入式会导致HTML代码与JavaScript代码混在一起，不利于代码的修改和维护；外链式会将HTML、CSS、JavaScript这3部分的代码分离，利于代码后期的修改和维护。 ②减轻文件体积、加快页面加载速度。行内式和嵌入式会将使用的JavaScript代码全部嵌入到HTML页面中，这就会增加HTML文件的体积，影响网页本身的加载速度；而外链式可以利用浏览器缓存、将需要多次用到的JavaScript代码重复利用，这样既减轻了文件的体积，也加快了页面的加载速度。例如，在多个页面中引入了相同的JavaScript文件时，打开第1个页面后，浏览器就将JavaScript文件缓存下来，下次打开其他引用该JavaScript文件的页面时，浏览器就不用重新加载JavaScript文件了。

3.JavaScript基本语法

每一种计算机语言都有自己的基本语法，学好语法是学好JavaScript的基础。下面将对JavaScript基本语法进行讲解。

（1）代码执行顺序

JavaScript代码按照在HTML文件中出现的顺序逐行执行。如果某些JavaScript代码（如函数、全局变量等）需要在整个HTML文件中使用，最好将这些JavaScript代码放在HTML文件的<head></head>标签中。

（2）字母书写要求

JavaScript严格区分字母大小写。在书写关键字、函数名、变量及其他标识符时，都必须采用正确的大写、小写形式。例如、变量username与变量userName是两个不同的变量。

（3）结尾分号书写要求

JavaScript并不要求必须以分号（;）作为语句的结束标签。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为结束语句。但是，通常习惯在每行JavaScript代码的结尾处加上分号，让代码更严谨、更准确。

（4）注释使用技巧

在编写程序时，为了使代码易于阅读，通常需要为代码添加一些注释。注释是对程序中某个功能或者某行代码的解释、说明，并且不会被JavaScript当成代码执行。JavaScript中主要包括两种注释：单行注释和多行注释，具体介绍如下。 ①单行注释使用双斜线“//”作为注释标签。将“//”放在一行代码的开头，注释标签后面的内容就是注释文本内容。 ②多行注释是指可以包含任意行数的注释文本内容。多行注释以“/*”开始，以“*/”结束，中间的所有内容都为注释文本。多行注释可以跨行书写，但不能嵌套。下面的示例代码都是合法的JavaScript注释。 //这里是单行注释 /*这里是一段注释*/ //这里是另一段注释 /*这里是多行注释这里是多行注释*/

4.简单的JavaScript程序

Adobe公司的Dreamweaver是建立Web站点和应用程序的专业工具。下面将继续使用Dreamweaver创建一个简单的JavaScript程序。启动Dreamweaver编辑器，新建一个HTML默认文档。在HTML代码中嵌入JavaScript代码，如例1所示。在例1中，第10行代码中的alert()方法用于弹出一个信息警告框，用于对用户进行提示；第11行代码中的prompt()方法用于弹出一个输入提示框，用于引导用户输入相关内容。保存文件后，在浏览器中运行案例代码，将弹出一个信息警告框，如下图所示。单击“确定”按钮后，将会继续弹出一个输入提示框，如下图所示。

例1

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>第一个简单的JavaScript程序</title> 6 </head> 7 <body> 8 <div style="font-size:18px;"> 9 <script type="text/javascript"> 10 alert("Hello,JavaScript! "); //弹出信息警告框 11 prompt("请输入您的密码！"); //弹出输入提示框 12 </script> 13 </div> 14 </body> 15 </html>

任务8-2 变量

需求分析

当一个数据需要多次使用时，可以利用变量将数据保存起来。变量是指程序中一个已经命名的存储单元。在进行数据操作时，变量可以作为存放数据信息的容器。类似于生活中盛水的杯子，如果将杯子看作变量，那么杯中盛放的水可以看作保存在变量中的数据信息。下面将讲解变量的声明和变量的赋值涉及的相关知识。

知识储备

1.变量的声明

想要使用变量，先要声明变量。在JavaScript中使用“var”关键字声明变量，这种直接使用“var”关键字声明变量的方法，称为“显式声明变量”。显式声明变量的基本语法格式如下： var变量名; 在上述语法格式中，变量名需要自行定义，多个变量名之间可以使用英文逗号分隔。变量名在命名时有一些注意事项，具体如下。必须以字母、美元符号（$）或下画线开头，中间可以是数字、字母、美元符号（$）或下画线。变量名不能包含空格、加号、减号等符号。不能使用JavaScript中的关键字作为变量名，如var、int。变量名严格区分大小写。例如，number、_it123均为合法的变量名，而88shout、&num为非法变量名。为了让初学者掌握声明变量的方法，现在通过以下示例代码进行说明。 1 var sales; 2 var hits, hot, NEWS; 3 var room_101, room102; 4 var $name, $age; 在上述示例代码中，利用关键字“var”声明变量。其中，第2~4行代码的变量名之间用英文逗号分隔，实现一条语句同时声明多个变量的目的。

2.变量的赋值

可以在声明变量的同时为变量赋值，也可以在声明后为变量赋值，示例代码如下： 1 var unit, room; //声明变量 2 var unit = 3; //为变量赋值 3 var room = 1001; //为变量赋值 4 var fname = 'Tom', age=12; //声明变量的同时赋值在上述示例代码中，均通过关键字“var”声明变量。其中，第1行代码同时声明了“unit”"room”两个变量；第2行和第3行代码为这两个变量赋值；第4行代码声明了“name”“age”两个变量，并在声明变量的同时为这两个变量赋值。需要说明的是，在声明变量时，也可以省略关键字“var”，通过赋值的方式声明变量，这种方式称为“隐式声明变量”，示例代码如下： flag = false; //声明变量flag并为其赋值false a = 1，b = 2; //声明变量a和b并分别为其赋值1和2 在上述示例代码中，直接省略掉关键字“var”，通过赋值的方式声明变量。需要注意的是，由于JavaScript采用的是动态编译，程序运行时不容易发现代码中的错误，所以本书推荐读者使用显式声明变量的方法。注意：如果重复声明的变量已经有一个初始值，那么再次声明就相当于对变量重新赋值。

任务8-3 数据类型和运算符

需求分析

任何一种计算机程序设计语言，都离不开对数据的操作处理，对数据进行操作前必须要确定数据的类型，而数据之间可以通过运算符确认关系状态。下面将对数据类型和运算符进行详细讲解。

知识储备

1.数据类型

Javacript采用的是弱类型的方式，即一个数据可以不事先声明，而是在使用或赋值时再说明其数据类型。JavaScript支持多种数据类型，具体介绍如下。

（1）数值型

数值型（Number）是最基本的数据类型。JavaScript与其他程序设计语言（如C语言和Java）的不同之处在于它并不区分整型数值和浮点型数值。在JavaScript中，所有数字都是数值型。JavaScript采用IEEE 754标准定义的64位浮点格式表示数字。当一个数字直接出现在JavaScript程序中时，则称它为数值直接量。JavaScript支持的数值直接量主要包括整型数据、十六进制数据、八进制数据和浮点型数据，示例如下。整型数据：123 十六进制数据：0X5C 八进制数据：023 浮点型数据：3.14

（2）字符串型

字符串型（String）数据是由Unicode字符、数字、标点符号等组成的序列，字符串型是JavaScript用来表示文本的数据类型。JavaScript中的字符串型数据包含在英文单引号或双引号中，由英文单引号定界的字符串中可以包含英文双引号，由英文双引号定界的字符串中也可以包含英文单引号，具体示例如下。英文单引号括起来的一个或多个字符，代码如下： '啊' 网页设计学院' 英文双引号括起来的一个或多个字符，代码如下： "快" "我要学习JavaScript" 由英文单引号定界的字符串中可以包含英文双引号，代码如下： 'name="myname"' 由英文双引号定界的字符串中可以包含英文单引号，代码如下： "You can call me 'Tom'!"

（3）布尔型

布尔型（Boolean）是JavaScript中较常用的数据类型之一，通常用于逻辑判断。布尔型只有true和false两个值，表示事物的“真”和“假”。在JavaScript程序中，布尔值通常用于比较所得的结果，示例代码如下： n==1 上述代码测试了变量n的值是否和数值1相等。如果相等，比较的结果就是布尔值true，否则结果就是布尔值false。布尔值通常用于JavaScript的控制结构，例如，JavaScript的if…else语句就是在布尔值为true时执行一个动作，而在布尔值为false时执行另一个动作，示例代码如下： if (n==1) m=n+1; else n=n+1; 上述代码检测了n是否等于1，如果相等，则m=n+1，否则n=n+1。关于if…else语句，这里了解即可，将在后面详细介绍。

（4）特殊数据类型

除了上面介绍的几种数据类型，JavaScript还包括一些特殊类型的数据。例如，转义字符、未定义值、空值，具体介绍如下。 ①转义字符。转义字符也称为控制字符，指以反斜杠开头，不可显示的字符。通过转义字符可以在字符串中添加特殊字符，还可以避免引号匹配引起的混乱。JavaScript常用的转义字符如下表所示。 ②未定义值。未定义值（Undefined）也只有一个特殊的Undefined值，用于声明的变量还未被初始化时，变量的默认值为Undefined。与Null不同的是，Undefined表示没有为变量设置值，而Null则表示变量（对象或地址）不存在或无效。需要注意的是，Null和Undefined与空字符串('')和0都不相等。 ③空值。空值（Null）用于定义空的或不存在的引用。在程序中，如果引用一个没有定义的变量，则返回一个Null。需要注意的是，Null不等于空字符串（""）和0。由此可见，Null与Undelined 的区别是，Null表示一个变量被赋予了一个空值，而Undefined则表示该变量尚未被赋值。

2.运算符

在程序中，经常会对数据进行运算。为此，JavaScript提供了多种类型的运算符，所谓运算符就是专门用于告诉程序执行特定运算或逻辑操作的符号。根据运算符的作用，可以将运算符大致分为5种，分别为算术运算符、比较运算符、逻辑运算符、赋值运算符和条件运算符，具体介绍如下。

（1）算数运算符

算术运算符用于连接运算表达式，主要包括加（+）、减（-）、乘（*）、除（/）、自增（++）、自减（--）等。常用的算术运算符如下表所示。下面使用算术运算符来完成一个简单的数字计算，如例2所示。在例2中，分别定义了两个变量num1、num2，并且通过不同的算术运算符来进行简单的计算。运行例2，效果如下图所示。

例2

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>算数运算符</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var num1 = 100, num2 = 25; 10 document.write("100+25=" + (num1 + num2) + "<br>"); 11 document.write("100-25=" + (num1 - num2) + "<br>"); 12 document.write("100*25=" + (num1 * num2) + "<br>"); 13 document.write("100/25=" + (num1 / num2) + "<br>"); 14 document.write("(100++)=" + (num1++) + "<br>"); 15 document.write("(++100)=" + (++num1) + "<br>"); 16 </script> 17 </body> 18 </html>

（2）比较运算符

比较运算符主要用于在逻辑语句中判断变量或值是否相等。比较运算符的运算过程需要先对操作数据进行比较，然后返回一个布尔值true或false。常用的比较运算符如下表所示。了解了比较运算符的用法后，下面通过一个比较年龄的案例来进行演示，如例3所示。在例3中，分别使用不同的比较运算符来比较两个数值的大小。运行例3，效果如下图所示。

例3

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>比较运算符</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var age=25; //定义变量 10 document.write("age变量的值为：" + age + "<br>"); //输出变量值 11 document.write("age>=20:" + (age >= 20) + "<br>"); //变量值比较 12 document.write("age<20:" + (age < 20) + "<br>"); 13 document.write("age!=20:" + (age != 20) + "<br>"); 14 document.write("age>20:" + (age > 20) + "<br>"); 15 </script> 16 </body> 17 </html>

（3）逻辑运算符

逻辑运算符是根据表达式的值来返回“真”（true）值或“假”（false）值。逻辑运算符如下表所示。下面通过一个案例演示逻辑运算符的使用，如例4所示。在例4中，使用不同的逻辑运算符进行运算，根据表达式的值返回true或false。其中，document.writeln用于输出结果，并添加一个换行符。第8行和第19行代码、即<script>标签外的<pre>标签用于定义预格式化的文本，嵌套在<pre>标签中的文本会保留空格和换行符，保证输出文本中的换行符能够起作用。运行例4，效果如下图所示。

例4

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>逻辑运算符</title> 6 </head> 7 <body> 8 <pre> 9 <script type="text/javascript"> 10 var a = 2, b = 3, result; 11 document.writeln("a=2,b=3"); 12 document.write("a<b&&a<=b:"); result = a < b && a <= b; document.writeln(result); 13 document.write("a<b&&a>b:"); result = a < b && a > b; document.writeln(result); 14 document.write("a<b||a>b:"); result = a < b || a > b; document.writeln(result); 15 document.write("a>b&&a>=b:"); result = a > b || a >= b; document.writeln(result); 16 document.write("!(a<b):"); result = !(a < b); document.writeln(result); 17 document.write("!(a>b):"); result = !(a > b); document.writeln(result); 18 </script> 19 </pre> 20 </body> 21 </html>

（4）赋值运算符

赋值运算符用于将运算符右边的值赋给左边的变量。其中，“=”是最基本的赋值运算符，而非数学意义上相等的关系。常用的赋值运算符如下表所示。了解了赋值运算符后，下面通过一个案例来对赋值运算符的用法进行演示，如例5所示。在例5中，变量a的值不断随赋值语句发生变化，而b的值始终不变。运行例5，效果如下图所示。

例5

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>赋值运算符</title> 6 </head> 7 <body> 8 <pre> 9 <script type="text/javascript"> 10 var a=3,b=2; 11 document.writeln("a=3,b=2"); 12 document.write("a+=b="); a += b; document.writeln(a); 13 document.write("a-=b="); a -= b; document.writeln(a); 14 document.write("a*=b="); a *= b; document.writeln(a); 15 document.write("a/=b="); a /= b; document.writeln(a); 16 document.write("a%=b="); a %= b; document.writeln(a); 17 </script> 18 </pre> 19 </body> 20 </html>

（5）条件运算符

条件运算符主要用于对第一个表达式做真/假检测，然后根据结果返回另外两个表达式中的一个。条件运算符是JavaScript中的一种特殊的三目运算符（即有3个操作数的运算符），其基本语法格式如下：操作数? 结果1: 结果2 在上述语法格式中，若操作数的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。下面通过一个案例对条件运算符的用法进行演示，如例6所示。在例6中，先定义两个变量i和j，然后判断这两个变量是否相等，如果相等则返回“true”，否则返回“false”。运行例6，效果如下图所示。

例6

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>条件运算符</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var i = 3, j = 4; 10 alert((++i == j++) ? true : false); 11 </script> 12 </body> 13 </html>

任务8-4 流程控制语句

需求分析

现实生活中人们可根据大脑对事物的逻辑判断来支配自身行为。同样，在程序中可以通过流程控制语句来判断程序的逻辑，并控制程序的执行流程。JavaScript中的流程控制语句包括条件语句、循环语句和跳转语句。下面将对这几种流程控制语句进行详细讲解。

知识储备

1.条件语句

在实际生活中经常需要对某一事件做出判断。例如，开车来到一个十字路口，这时需要对红绿灯进行判断，如果前面是红灯，就等候；如果是绿灯，就通行。JavaScript中的条件语句（也称为“分支语句”）也可以对一些事件做出判断，从而决定执行哪一段程序代码。条件语句包括if条件语句、switch条件语句两种，具体介绍如下。

（1）if条件语句

if条件语句是最基本、最常用的条件语句，该条件语句通过判断条件表达式的值为true或false，来确定是否运行执行语句。if条件语句主要包括单向判断语句、双向判断语句和多向判断语句，具体介绍如下。

①单向判断语句

单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句。其基本语法格式如下： if (执行条件) { 执行语句 } 在上述语法格式中，if可以理解为“如果”，“()”用于指定if条件语句中的执行条件，“{}”用于指定满足执行条件后执行的相关事件。单向判断语句的执行流程如下图所示。下面通过一个比较数字大小的案例来学习单向判断语句的用法，如例7所示。在例7中，第9行和第10行代码定义了两个变量，并为它们赋值；第11~13行代码应用单向判断语句指定执行条件“num1>num2”，如果条件成立则优先弹出“你好，条件成立”的提示信息，否则弹出“对不起，条件不成立”的提示信息。运行例7，运行结果如下图所示。

例7

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>单向判断语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var num1 = 100; //定义一个变量并为其赋值100 10 var num2 = 150; //定义一个变量并为其赋值150 11 if(num1>num2){ 12 alert('你好，条件成立'); //如果条件成立，则弹出“你好条件成立” 13 } 14 alert('对不起，条件不成立'); //如果条件不成立，则弹出“对不起，条件不成立” 15 </script> 16 </body> 17 </html>

②双向判断语句

双向判断语句只是在单向判断语句基础上增加了一个从句，其基本语法格式如下： if (执行条件){ 执行语句1 }else{ 执行语句2 } 双向判断语句的语法格式与单向判断语句类似，只是在单向判断语句的基础上增加了一个else从句。如果条件成立则运行“执行语句1”，否则运行“执行语句2”。双向判断语句的执行流程如下图所示。了解了双向判断语句的基本语法格式和执行流程后，下面对例7中第8~15行代码进行简单修改，使其变成一个双向判断语句，具体代码如下： <script type="text/javascript"> var num1=100; var num2=150; if (num1<num2){ alert('你好，条件成立'); //如果条件成立，则弹出“你好，条件成立” }else{ alert('对不起，条件不成立'); //如果条件不成立，则弹出“对不起，条件不成立” } alert('演示完成'); //无论成立与否最后弹出“演示完成” </script> 在上述示例中，如果条件成立则弹出“你好，条件成立”的提示信息，否则弹出“对不起，条件不成立”的提示信息，最后弹出“演示完成”的提示信息。运行上述代码，结果如下两图所示。

③多向判断语句

多向判断语句可以根据表达式的结果判断一个条件，然后根据返回值做进一步的判断，其基本语法格式如下： if (执行条件1) { 执行语句1 }else if (执行条件2) { 执行语句2 } else if (执行条件3) { 执行语句3 } ... 在上述语法格式中，通过else if语句可以对多个条件进行判断，并且根据判断的结果执行相关事件。多向判断语句的执行流程如下图所示。下面通过一个案例对多向判断语句的用法做具体演示，如例8所示。在例8中，先定义了一个变量jiangpin，并对其赋值为“二等奖”，然后应用多向判断语句指定了3个执行条件，最后根据执行条件依次进行判断，如果条件不成立则略过，如果条件成立，则执行花括号内的执行语句。运行例8，运行结果如下图所示。

例8

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>多向判断语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var jiangpin = '二等奖'; //定义了一个变量，并对其赋值 10 if (jiangpin == '一等奖') { //判断如果赋值为一等奖，则弹出下面内容 11 alert('恭喜获得一辆跑车'); 12 } else if (jiangpin == '二等奖') { //判断如果赋值为二等奖，则弹出下面内容 13 alert('恭喜获得一部手机'); 14 } else if (jiangpin == '三等奖') { //判断如果赋值为三等奖，则弹出下面内容 15 alert('恭喜获得一台空气净化器'); 16 } 17 </script> 18 </body> 19 </html>

（2）switch条件语句

switch条件语句功能与if条件语句类似，不同的是switch条件语句只能对某个表达式的值进行判断，从而决定执行哪一段代码。相比于if条件语句，使用switch条件语句的代码更加清晰简洁、便于阅读。switch条件语句的基本语法格式如下： switch(表达式){ case目标值1: 执行语句1 break; case目标值2: 执行语句2 break; …… case目标值n: 执行语句n break; default: 执行语句n+1 break; } 在上述语法格式中<switch条件语句将表达式的值与每个case中的目标值进行匹配，如果找到了匹配的值，就执行对应case后的执行语句，如果没找到任何匹配的值，就会执行default后的执行语句。语法中关键字break的作用是跳出switch条件语句，其用法将在后文中做具体介绍。下面通过一个案例来演示switch条件语句的用法，如例9所示。在例9中，先定义了一个变量，并为其赋值，然后应用switch条件语句获取变量值，并判断变量值与case的目标值是否匹配，匹配则输出相应的执行语句并跳出循环，否则继续判断下一个case的目标值。最后，如果case的目标值均不匹配，则执行default下的语句。运行例9，运行结果如下图所示。

例9

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>switch条件语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var day=5; 10 switch(day){ 11 case 1: 12 document.write("星期一"); 13 break; 14 case 2: 15 document.write("星期二"); 16 break; 17 case 3: 18 document.write("星期三"); 19 break; 20 case 4: 21 document.write("星期四"); 22 break; 23 case 5: 24 document.write("星期五"); 25 break; 26 case 6: 27 document.write("星期六"); 28 break; 29 default: 30 document.write("星期日"); 31 break; 32 } 33 </script> 34 </body> 35 </html>

2.循环语句

在现实生活中经常会将同一件事情重复做很多次。例如，每天吃饭、每天起床、定期洗澡等。在JavaScript中，有时也需要将某个功能模块重复执行。例如，循环打印100位学生的考试成绩，这时可以使用循环语句。循环语句可以实现一段代码的重复执行，主要包括while循环语句、do…while循环语句和for循环语句3种。下面将对这3种循环语句做具体讲解。

（1）while循环语句

while循环语句是最基本的循环语句，其基本语法格式如下： while(循环条件){ 执行语句 ... } 在上述语法格式中，{}中的执行语句被称作循环体，循环体是否执行取决于循环条件。当循环条件为true时，循环体就会执行。循环体执行完毕时会继续判断循环条件，如条件仍为true则会继续执行，直到循环条件为false时，整个循环过程才会结束。 while循环语句的执行流程如下图所示。下面通过一个案例来演示while循环语句的具体用法，如例10所示。在例10中，先定义了变量i和 sum，并设置变量i的初始值为1，然后指定循环条件“sum<10”，当变量sum的值小于10时，就会执行{}中的执行语句，最后让变量i自增，当变量sum的取值大于等于10时，循环结束。运行例10，运行结果如下图所示。

例10

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>while循环语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var i = 1; //定义一个变量i，设置初始值为1 10 var sum = 0; 11 document.write("累加和不大于10的所有自然数：<br>"); 12 while (sum < 10) { 13 sum = sum + i; //累加i的值 14 document.write(i + '<br>'); //输出符合条件的自然数 15 i++; 16 } 17 </script> 18 </body> 19 </html>

（2）do...while循环语句

do…while循环语句也称为后测试循环语句，它也是利用一个条件来控制是否要继续执行该语句，其基本语法格式如下： do{ 执行语句 ... }while(循环条件); 在上述语法格式中，关键字do后面{}中的执行语句是循环体。do…while循环语句将循环条件放在了循环体的后面。这也就意味着循环体会先全部执行一次，然后再根据循环条件来决定是否继续执行。 do…while循环语句的执行流程如下图所示。下面通过一个案例来演示do…while循环语句的用法，如例11所示。在例11中，先定义了一个变量，设置初始值为99，然后让变量i进行自增，此时i=100；然后，执行语句“document.write(i);”。最后，根据循环条件进行判断，因为i<100不成立，所以循环体只执行一次。运行例11，运行结果如下图所示。注意： do…while循环语句结尾处的while语句括号后面有一个英文分号“;”，在书写过程中一定不要漏掉，否则JavaScript会认为该循环语句是一个空语句。

例11

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>do...while循环语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var i = 99; //定义一个变量i，设置初始值为99 10 do { 11 i++; //变量i进行自增 12 document.write(i); //指定执行语句 13 } while (i < 100); //指定循环条件 14 </script> 15 </body> 16 </html>

（3）for循环语句

for循环语句也称为计次循环语句，一般在循环次数已知的情况下会使用该循环语句。for循环语句的基本语法格式如下： for(初始化表达式;循环条件;操作表达式){ 执行语句 ... } 在上述语法格式中，for后面的()中包含3部分内容：初始化表达式、循环条件和操作表达式，这3部分内容之间用“;”分隔，{}中的执行语句为循环体。下面分别用①表示初始化表达式，②表示循环条件，③表示操作表达式，④表示循环体，通过序号来具体分析for循环的执行流程，具体如下。 for (① ; ② ; ③) { ④ } 第一步，执行①。第二步，执行②，如果判断结果为true，执行第三步，如果判断结果为false，执行第五步。第三步，执行④。第四步，执行③，然后重复执行第二步。第五步，退出循环。下面通过一个计算100以内所有奇数和的案例来演示for循环语句的用法，如例12所示。在例12中，先定义变量sum，用于记住累加的数值，然后，设置for循环的初始化表达式为“var i=1”，循环条件为“i<100”，并让变量i以加2的方式自增，这样就可以得到100以内的所有奇数。最后，通过“sum=sum+i”累加求和，并输出计算结果。运行例12，运行结果如下图所示。

例12

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>for循环语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var sum = 0; //定义变量sum，用于记住累加的和 10 for (var i = 1; i < 100; i += 2) { //i的值以加2的方式自增 11 sum = sum + i; //实现sum与i的累加 12 } 13 alert("100以内所有奇数和：" + sum); //输出计算结果 14 </script> 15 </body> 16 </html>

3.跳转语句

跳转语句用于实现循环执行过程中程序流程的跳出。在JavaScript中，跳转语句包括break语句和continue语句，对它们的具体讲解如下。

（1）break语句

break 语句可应用在switch条件语句和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句。break语句的基本语法格式如下： break; 下面通过一个自然数求和案例来演示break语句的用法，如例13所示。在例13中，通过“sum=sum+i”对求和值进行累加，当自然数之和大于10时，通过“if(sum>10)break;”语句自动跳出循环。运行例13，运行结果如下图所示。

例13

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>break语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var sum = 0; 10 for (var i = 0; i < 100; i++) { 11 sum = sum + i; 12 if (sum > 10) break; //如果自然数之和大于10则跳出循环 13 } 14 alert("求0-99的自然数之和：" + sum); 15 </script> 16 </body> 17 </html>

（2）continue语句

continue语句的作用是终止本次循环，执行下一次循环，其基本语法格式如下： continue; 下面通过一个输出数字的案例来演示continue语句的用法，如例14所示。在例14中，先应用for循环语句判断，如果i<10就执行“i++”，然后应用if条件语句判断，如果i值等于3、5就通过continue语句跳出本次循环。运行例14，运行结果如下图所示。注意： continue语句只是结束本次循环，而不是终止整个循环语句的执行。而break语句则是结束整个循环过程，不再判断执行循环的条件是否成立。

例14

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>continue语句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 for (var i = 1; i < 10;i++){ //应用for循环语句判断，如果i<10就执行i++ 10 if (i == 3 || i == 5) //应用if条件语句判断，如果i值等于3、5就跳出该次循环 11 continue; 12 document.write(i+"<br />") 13 } 14 </script> 15 </body> 16 </html>

任务8-5 函数

需求分析

在JavaScript中，经常会遇到程序需要多次重复操作的情况，这时就需要重复书写相同的代码，这样不仅加重了开发人员的工作量，而且也使代码的后期维护十分困难。为此，JavaScript提供了函数，它可以使程序中重复的代码模块化，通过调用函数达到复用代码的目的，这样就提高了程序的可读性，并且便于后期维护。下面将对函数的相关知识进行讲解。

知识储备

1.函数的定义

在JavaScript程序设计中，为了使代码更为简洁并可以重复使用，通常会将某段实现特定功能的代码定义成一个函数。所谓函数就是在计算机程序中由多条语句组成的逻辑单元，可以被重复调用。在JavaScript中，函数使用关键字function来定义，其语法格式如下： function 函数名 ([参数1,参数2,……]) { 函数体 } 在上述语法格式中，函数由“function”“函数名”“参数”和“函数体”这4个部分组成，对它们的解释如下。 function：在声明函数时必须使用的关键字。函数名：创建函数的名称，使用者自行定义，函数名是唯一的。参数：外界传递给函数的值。参数是可选的，因此可以为空。当有多个参数时，各参数用英文逗号分隔。函数体：函数定义的主体，用于实现特定的功能。了解了定义函数的语法格式后，下面通过程序来定义一个函数，如例15所示。在例15中，<head></head>标签之间定义了一个简单的函数hello()，它没有定义参数，并且函数体中仅使用alert()方法弹出一个警告框。但是，此时运行页面，没有任何效果。因为当用function定义一个函数时，其效果只是相当于用一个函数名标识了一段代码，这段代码的执行需要一个被称为“函数调用”的机制来激活。

例15

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title></title> 6 <script type="text/javascript"> 7 function hello() { 8 alert("你好，欢迎学习函数！") 9 } 10 </script> 11 </head> 12 <body> 13 </body> 14 </html>

2.函数的调用

函数定义后并不会自动执行，而是需要在特定的位置调用函数后，才能执行该函数。函数的调用非常简单，只需引用函数名，并传入相应的参数即可。函数调用的语法格式如下：函数名称([参数1,参数2,……]) 在上述语法格式中，“[参数1，参数2……]”是自定义选项，用于表示参数列表，参数可以是一个或多个。例如，若想调用例15中的函数，可以在例15第9行和第10行代码之间添加如下代码： hello(); 此时运行代码，会弹出函数定义的警告框，效果如下图所示。

3.函数中变量的作用域

函数中的变量需要先定义后使用，但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。变量的作用域取决于这个变量是哪一种变量，在JavaScript中，变量分为全局变量和局部变量两种，具体解释如下。全局变量：定义在所有函数之外，作用于整个程序的变量。局部变量：定义在函数体之内，作用于函数体的变量。为了让大家进一步了解全局变量和局部变量的用法，下面通过一个警告框案例来进行具体演示，如例16所示。在例16中，定义了两个函数send1()和send2()。其中，变量a和变量b是函数send1()的局部变量，变量c是函数send2()的局部变量。第7~11行代码用于弹出“欢迎来到芭提雅”的警告框；第12~15行代码用于弹出“欢迎来到曼谷”的警告框。运行例16，效果如下图所示。在上图所示的案例效果中，当单击“确定”按钮后，并没有弹出预期的第2个警告框。这是因为变量a属于局部变量，只能对send1()函数起作用。可以将变量a放置到例16的第6行代码和第7行代码之间，此时变量a属于全局变量对整个程序起作用，修改后的代码如下： <script type="text/javascript"> var a="欢迎来到" //该变量在函数外声明，作用于整个程序 function send1(){ var b="芭提雅"; alert(a+b); } 保存并刷新例16所在的页面，此时两个警告框均可正常显示。

例16

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>变量的作用域</title> 6 <script type="text/javascript"> 7 function send1() { 8 var a = "欢迎来到"; //该变量在函数内声明，只作用于该函数体 9 var b = "芭提雅"; //该变量在函数内声明，只作用于该函数体 10 alert(a + b); 11 } 12 function send2() { 13 var c = "曼谷"; //该变量在函数内声明，只作用于该函数体 14 alert(a + c); 15 } 16 </script> 17 </head> 18 <body> 19 <script type="text/javascript"> 20 send1(); 21 send2(); 22 </script> 23 </body> 24 </html>

任务8-6 对象

需求分析

在JavaScript中，面向对象是一种重要的编程思想。使用面向对象的方式编写程序，可以使代码更易于维护和扩展。然而什么是对象？该如何使用对象？下面将围绕JavaScript中的面向对象设计思想，详细讲解对象的相关知识。

知识储备

1.认识对象

在现实世界中，任何实体都可称作对象。例如，“人”可看作一个对象。“人”具有姓名、性别、年龄、身高、体重等特性，“人”可以做吃饭、开车、运动等动作。在计算机世界中，不仅包括来自于客观世界的对象，还包括为解决问题而引入的抽象对象。例如，一个用户可以看作一个对象，它既包括用户名、用户密码等特性，也包括注册、注销等动作；一个Web页面也可以看作一个对象，它包括背景颜色、段落文本、标题等特性，同时又包括打开、关闭和写入等动作。简单来讲，对象就是一组属性与方法的集合。属性作为对象成员的变量，表明对象的状态；方法作为对象成员的函数，表明对象所具有的行为，具体解释如下。属性：用于描述对象特性的数据，即若干变量。方法：用于操作对象的若干动作，即若干函数。通过访问或设置对象的属性，以及调用对象的方法，就可以对对象进行各种操作，从而获得需要的功能。在程序中若要调用对象的属性或方法，就需要在对象后面加上一个英文句号“.”（即点格式），继而在英文句号后加上属性名或方法名。例如，screen.width表示通过screen对象的width属性获取屏幕宽度；Math.sqrt(x)表示通过Math对象的sqrt()方法获取x的平方根。

2.创建对象和删除对象属性

如果对象一开始并不存在，就需要手动创建一个对象，并将过程代码封装到对象中。对于创建好的对象也可以将其属性删除。创建对象和删除对象属性的方法如下。

（1）创建对象

在JavaScript中，使用new关键字可以创建对象，将创建的对象赋值给一个变量后，就可以通过这个变量访问对象的属性和方法。使用new关键字创建对象的语法格式如下：变量名=new 对象名() 下面通过一个案例来演示使用new关键字创建对象的方法，如例17所示。在例17中，第10行代码使用new关键字创建了一个Date对象（关于Date对象的用法会在后面详细介绍），并把这个对象赋值给变量date。通过变量date就可调用Date对象的方法以获取当前系统的时间。运行例17，效果如下图所示。

例17

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>创建对象</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var date; 10 date=new Date(); 11 document.write("现在是：" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒"); 12 </script> 13 </body> 14 </html>

（2）删除对象属性

使用delete关键字可以删除对象的属性，它的操作数应为一个属性访问表达式。需要注意的是，内置对象的属性和方法多数不能使用delete关键字删除，对象继承于原型的属性和方法也不能使用delete关键字删除。需要说明的是，delete关键字只是断开属性和对象之间的联系，从而使对象不能操作属性。下面通过一个简单的案例来演示delete关键字的用法，如例18所示。运行例18，效果如下图所示。从上图可见，成功删除对象的属性时返回true，当再次调用时，则显示undefined。需要说明的是，当删除不存在的属性和属性访问表达式时，返回值同样为true。

例18

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>删除属性</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var box; 10 box=new Object(); 11 box.name="小王"; 12 box.age = 18; 13 document.write("删除前："+box.name+"的年龄是<b>"+box.age+"</b>"); 14 document.write("<br>删除box对象的age属性成功返回："+delete box.age); 15 document.write("<br>删除后："+box.name+"的年龄是<b>"+box.age+"</b>") 16 </script> 17 </body> 18 </html>

3.内置对象

为了方便程序开发，JavaScript提供了很多内置对象，包括与日期相关的Date对象、与数学相关的Math对象、与字符串相关的String对象、与数组相关的Array对象和与数值相关的Number对象等。这里只对网页设计中常用的Date对象、Math对象和String对象分别进行介绍。

（1）Date对象

Date对象主要提供获取和设置日期与时间的方法。Date对象的常用方法如下表所示。要使用Date对象，必须先使用new关键字创建该对象。创建Date对象的常见方式有以下3种。不带参数，其创建方式如下： var d = new Date(); 在上述代码中，创建了一个含有系统当前日期和时间的Date对象。创建一个指定日期的Date对象，其创建方式如下： var d = new Date(2016,1,1); 在上述代码中，创建了一个日期是2016年2月1日的Date对象，而且这个对象中的小时、分钟、秒、毫秒的值都为0。需要注意的是，月份的返回值是0~11，即0表示1月、11代表12月。创建一个指定时间的Date对象，其创建方式如下： var d = new Date(2016,7,3,10,20,30,50); 在上述代码中，创建了一个包含确切日期和时间的Date对象，即2016年8月3日10点20分30秒50毫秒。下面通过一个案例来演示如何获取当前系统的日期，如例19所示。在例19中，第13行代码将获取的月份多加了1，原因是getMonth()方法返回日期的月份值，其值为0~11，分别表示1～12月。运行例19，效果如下图所示。

例19

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>Date对象的应用</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var date=new Date(); 10 var year=date.getFullYear(); 11 year=year; 12 var month=date.getMonth(); 13 month=month+1; 14 var day=date.getDate(); 15 document.write("当前日期为:"+year+"年"+month+"月"+day+"日"); 16 </script> 17 </body> 18 </html>

（2）Math对象

Math对象的属性是数学中常用的常量，方法是一些数学函数。Math对象的常用属性和方法如下表所示。上表列出了Math对象的常用属性和方法，下面通过一个随机获取1~20之间的随机数的案例来演示Math对象属性和方法的使用，如例20所示。在例20中，先通过getRandom()方法传递随机数的最大值和最小值，然后通过Math对象的random()方法获取0~1的随机数num，继而通过第18行的公式获取随机数，最后调用floor()方法对此随机数向下取整输出。运行例20，效果如下图所示。

例20

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>随机获取1～20之间的随机数</title> 6 <style type="text/css"> 7 body{ 8 padding:10px; 9 background:pink; 10 color:#0000FF; 11 font-size:20px; 12 } 13 </style> 14 <script type="text/javascript"> 15 function getRandom(min,max) 16 { 17 var num = Math.random(); //取得0到1之间的随机小数 18 num = num * (max - min) + min; //取得min到max之间的随机小数 19 num = Math.floor(num); //向下取整 20 return num; 21 } 22 document.write("<b>获取1～20之间的随机数是：</b>"+getRandom(1,20)); 23 </script> 24 </head> 25 <body> 26 </body> 27 </html>

（3）String对象

String对象是JavaScript提供的字符串处理对象，它提供了对字符串进行处理的属性和方法。String对象常用属性和方法如下表所示。上表中列举了String对象一些常用的属性和方法，下面对其用法进行演示，如例21所示。在例21中，第8行代码引入了一个用户输入信息对话框；第9行代码将对话框中输入的字母转换为大写字母；第11行代码将对话框中输入的字母按照索引由大到小的顺序重新排列。例如，如果输入“abcde”则输出“EDCBA”。运行例21，效果如下图所示。在输入框中输入“abcde”后的效果如下图所示。单击“确定”按钮，效果如下图所示。

例21

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>String对象的应用</title> 6 <script type="text/javascript"> 7 var a,b,i; 8 a=prompt("请输入一行文字：",""); 9 b=a.toUpperCase(); 10 for(i=b.length-1;i>=0;i--) 11 document.write(b.charAt(i)); 12 </script> 13 </head> 14 <body> 15 </body> 16 </html>

任务8-7 数组

需求分析

数组是JavaScript中最常用的数据类型之一，一个数组类型的变量可以保存一批数据，并且数据可以是任意类型数据，例如，字符串、数字、数组或对象等。利用数组可以很方便地对数据进行分类和批量处理。下面将对数组的相关知识进行详细讲解。

知识储备

1.初识数组

在JavaScript中，经常需要对一批数据进行操作。例如，统计50人的平均身高，在使用数组之前要完成这个任务就需要定义50个变量分别保存这50人的身高，再将变量相加得到总值，最后除以50得到平均身高。这种方法有很明显的弊端，即变量过多不便于管理，且极易出错。使用数组可以很好地解决上述问题。数组是一组数据有序排列的集合，使用数组将50人的信息保存起来只需定义一个变量，并且数组可以进行循环遍历，能够十分便捷地获取保存的数据。将50人的身高数据保存到数组中，该数组结构示例如下图所示。数组中的值称为元素，且每个元素在数组中都有一个位置，以数字表示，称为索引。例如，上图中的1.72就是一个元素，其在数组中的位置用索引表示就是0。 JavaSript中的数组是无类型的，即数组中的元素可以是任意类型，并且同一个数组中的不同元素也可以有不同的类型，甚至可以是对象或其他数组。

2.创建数组

数组在JavaScript中有两种创建方式，一种是使用Array对象创建；另一种是使用“[]”创建，具体介绍如下。

（1）使用Array对象创建数组

使用Array对象创建数组是通过关键字new实现的，具体代码如下： // 元素值类型为字符型 var area = new Array('Beijing', 'Shanghai', 'Shenzhen'); // 元素值类型为数值型 var score = new Array(56, 68, 98, 44); // 元素值类型为混合型 var mix = new Array (123, 'abc', null, true, undefined); // 空数组 var arr1 = new Array(); // 或 var arr2 = new Array; 上述创建的数组，索引默认都是从0开始，依次递增加1。例如，area变量中数组元素的索引依次为0、1、2。

（2）使用“[]”创建数组

使用“[]”创建数组的方式与使用Array对象创建数组的方式类似，只需将new Array()替换为[]即可，具体示例如下： var weather = ['wind', 'fine',]; // 相当于：new Array('wind', 'fine',) var empty = [ ]; // 相当于：new Array var mood = ['sad', , , ,'happy']; // 控制台输出mood：(5) ["sad","empty × 3, "happy"] 在创建数组时，最后一个元素后的英文逗号可以存在，也可以省略。需要注意的是，直接使用“[]”创建数组与使用Array对象创建数组有一定的区别，前者可以创建含有空存储位置的数组，如上述创建的mood中含有3个空存储位置，而后者则不可以。

3.数组的常用属性和方法

数组是一组有序排列的数据对象的集合，也包含属性和方法。数组的常用属性和方法如下表所示。上表列举了数组的常用属性和方法，具体介绍如下。

（1）length属性

数组的length属性是数组最常用的属性，该属性的值代表了数组中元素的个数。另外，数组索引是从0开始的，因此length属性的属性值会比数组中最大的索引大1。下面通过一个求数组元素平均值的案例来演示length属性的使用方法，如例22所示。在例22中，第13行代码通过循环遍历的方法获取数组中的每一个元素。运行例22，效果如下图所示。

例22

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>求数组元素的平均值</title> 6 </head> 7 <body> 8 </body> 9 <script type="text/javascript"> 10 var arr = [6, 48, 21, 35, 11]; //定义数组 11 var len = arr.length; //获取数组元素个数 12 var sum = avg = 0; //声明保存总数的变量sum及平均值的变量avg并赋初始值为0 13 for(var i = 0; i < len; i++){ 14 sum = sum + arr[i]; //将每次获取到的数组元素的值与变量sum相加 15 } 16 avg = sum / len; 17 console.log(avg) 18 </script> 19 </html>

（2）toString()方法

toString()方法用于返回一个字符串，该字符串包含数组中的所有元素，各元素间用英文逗号隔开。下面通过获取数组对象变量内容的案例来演示toString()方法的用法，如例23所示。在例8-23中，通过toString()方法可以输出数组classmates的所有元素，各元素间用英文逗号隔开。运行例23，效果如下图所示。

例23

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>获取数组对象变量内容</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var classmates; 10 classmates=new Array("小明","小红","小丽"); 11 document.write(classmates.toString()); 12 </script> 13 </body> 14 </html>

使用for...in循环语句完成数组遍历

JavaScript中数组是一种特殊的对象，因此还可以使用for…in循环语句像枚举对象属性一样枚举数组索引，而且使用for…in循环语句遍历数组不需要获取数组的length属性。下面修改例22中的第13~15行代码，使用for…in循环语句代替for循环语句求数组元素的平均值，具体代码如下： for(var i in arr){ sum = sum + arr[i]; } 保存后，刷新页面，实现的效果和之前完全相同。

4.二维数组

对于复杂的业务逻辑，有时简单的一维数组不能满足需求，需要使用二维数组。当数组中的元素也是数组时，就形成了二维数组。例如，要保存一个班级所有人的姓名、数学、语文、英语成绩等数据，使用一维数组是无法完成的，而使用二维数组就可以很方便地实现。下面来演示如何创建二维数组，如例24所示。在例24中，数组students的每个元素都是一个数组，这些数组用于存储关于学生的信息。因此，students是一个二维数组。其中，students[i]表示的是某个学生的信息记录，而students[i]表示学生students[i]的第j项属性（j=0、1、2、3，分别存储学生的姓名、数学成绩、语文成绩、英语成绩）。运行例24，效果如下图所示。

例24

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>二维数组</title> 6 </head> 7 <body> 8 姓名数学语文英语 9 <hr/> 10 <script type="text/javascript"> 11 var students,i,j; 12 students=new Array(); 13 students[0]=new Array("张三",76,90,80); 14 students[1]=new Array("李四",89,97,86); 15 students[2]=new Array("王五",90,78,88); 16 for(i in students){ 17 for (j in students[i]) { 18 document.write(students[i][j] +"\t"); 19 } 20 document.write("<br/>"); 21 } 22 </script> 23 </body> 24 </html>

任务8-8 BOM对象与DOM对象

需求分析

BOM对象和DOM对象是JavaScript的重要组成部分。其中，BOM对象主要用于操作浏览器窗口的行为和特征。DOM是处理HTML文档的标准技术，允许JavaScript程序动态访问、更新浏览页面的内容、结构和样式。下面将对BOM对象和DOM对象进行详细讲解。

知识储备

1.BOM对象

在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象。各内置对象之间按照某种层次组织起来的模型统称为BOM对象。BOM对象主要包括window（窗口对象）、screen（屏幕对象）、location（地址栏对象）、history（历史对象）、document（文档对象）和navigator（浏览器对象）等。BOM对象的结构如下图所示。从上图可以看出，window对象是BOM对象的顶层核心对象，其他的对象都是以属性的方式添加到window对象下，也可以称为window对象的子对象。例如，document对象是window对象的一个属性，但是它同时也是一个对象。例如，document对象相对于window对象来说，是一个属性，而document对象相对于write()方法来说，是一个对象。为了访问和操作浏览器各组件，BOM对象的每个window子对象中都提供了一系列的属性和方法。下面将对window子对象的功能进行介绍，具体内容如下。 screen（屏幕对象）：可获取与屏幕相关的数据，例如，屏幕的分辨率、坐标信息等。 location（地址栏对象）：用于获取当前浏览器中URL栏内的相关数据。 history（历史对象）：主要用于记录浏览器的访问历史记录，即浏览网页的前进与后退功能。 document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时它也是JavaScript的重要组成部分之一，其相关内容会在后文中进行详细讲解，这里不作介绍。 navigator（浏览器对象）：用于获取浏览器的相关数据，例如，浏览器的名称、版本等，也称为浏览器的嗅探器。由于BOM对象没有一个明确的规范，所以浏览器提供商会按照各自的想法随意去扩展BOM对象，而各浏览器之间共有的对象就成为事实上的标准。不过在利用BOM对象实现具体功能时，要根据实际的开发情况考虑浏览器之间的兼容问题。为了便于读者的理解，下面对几个常用的 BOM对象及其使用方法进行详细讲解。

（1）window对象

window对象表示整个浏览器窗口，用于获取浏览器窗口的大小、位置，以及设置定时器等。window对象的常用属性和方法如下表所示。上表中列举了window对象的常用属性和方法，下面通过代码对其中的部分属性进行详细讲解。

①window对象的基本使用

在前文中多次使用alert()方法弹出一个警告框，实际上完整的代码写法应该是window.alert()，即调用window对象的alert()方法。由于window对象是最顶层的对象，所以调用它的属性或方法时可以省略window。下面通过一个案例来演示window对象的基本使用方法，如例25所示。在例25中，使用window对象属性输出文档显示区域的宽度和高度。当浏览器的窗口大小改变时，刷新页面，输出的数值也会发生改变。运行例25，效果如下图所示。

例25

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>window对象的使用</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var width = window.innerWidth; //获取文档显示区域宽度 10 var height = innerHeight; //获取文档显示区域高度（省略window） 11 window.alert(width+"*"+height); //调用alert()方法输出 12 </script> 13 </body> 14 </html>

②打开和关闭窗口

window.open()方法用于打开新窗口，window.close()方法用于关闭窗口。对应的窗口属性及其说明如下表所示。下面通过一个案例来演示打开和关闭窗口的方法，如例26所示。在例26中，第10行代码表示打开一个新窗口，并使新窗口访问example24.html。myWindow是全局变量，因此第14行代码表示关闭打开的新窗口。运行例26，效果如下图所示。单击“打开新窗口”文本超链接，打开新窗口后的效果如下图所示。当单击“关闭新窗口”文本超链接后，新窗口被关闭。

例26

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>打开和关闭窗口的使用</title> 6 <script language="javascript"> 7 var myWindow; 8 function openNewWin(){ 9 //打开一个新窗口 10 myWindow=window.open("example24.html","myWindow","width=200,height=150,top=200,left=100"); 11 } 12 function closeNewWin(){ 13 //关闭新窗口 14 myWindow.close(); 15 } 16 </script> 17 </head> 18 <body> 19 <p><a href="javascript:openNewWin()">打开新窗口</a></p> 20 <p><a href="javascript:closeNewWin()">关闭新窗口</a></p> 21 </body> 22 </html>

③setTimeout定时器的使用

setTimeout()定时器可以实现延时操作，即延时一段时间后执行指定的代码，示例代码如下： function show(){ //定义show函数 alert("2秒已经过去了"); } setTimeout(show,2000); //2s后调用show函数上述代码实现了当网页打开后，停留2s就会弹出alert()提示框。setTimeout(show,2000)的第一个参数表示要执行的代码，第二个参数表示要延时的毫秒值。当需要清除定时器时，可以使用clearTimeout()方法，示例代码如下： function showA(){ alert("定时器A"); } function showB(){ alert("定时器B"); } var t1 = setTimeout(showA,2000); //设置定时器t1，2s后调用showA函数 var t2 = setTimeout(showB,2000); //设置定时器t2，2s后调用showB函数 clearTimeout(t1); //清除定时器t1 上述代码设置了两个定时器t1和t2，如果没有清除定时器，则两个定时器都会执行，如果清除了定时器t1，则只有定时器t2可以执行。

④setInterval()定时器的使用

setInterval()定时器用于周期性执行脚本，即每隔一段时间执行指定的代码，通常用于在网页上显示时钟、实现网页动画、制作漂浮广告等。需要注意的是，如果不使用clearInterval()方法清除定时器，该方法会一直循环执行，直到页面关闭为止。下面通过一个案例来演示setInterval()定时器的使用方法，如例27所示。在例27中，第7~12行代码用于在浏览器中显示当前时间，其中，第10行代码使用document.getElementById("time")语句获取id属性为“time"的元素对象，第13行代码将定时器设置为1s更新一次时间；第14～17行代码用于清除定时器。运行例27，效果如下图所示。上图中的时间会随系统时间的变化1s更新一次，单击“取消定时器”文本超链接后，时间不再更新。

例27

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>定时器的使用</title> 6 <script language="javascript"> 7 function showTime(){ 8 var now = new Date(); 9 var dataTime=now.toLocaleTimeString(); 10 time = document.getElementById("time"); 11 time.innerHTML = dataTime; 12 } 13 var timer=window.setInterval("showTime()",1000); 14 function clear(){ 15 window.clearInterval(timer); 16 window.status="已取消定时器"; 17 } 18 </script> 19 </head> 20 <body> 21 <div id="time"></div> 22 <p><a href="javascript:clear()">取消定时器</a></p> 23 </body> 24 </html>

（2）screen对象

screen对象用于获取用户计算机的屏幕信息。例如，屏幕分辨率、颜色位数等。screen对象的常用属性如下表所示。上表中列举了screen对象的常用属性。在使用时，可以通过“screen”或“window.screen”表示该对象。下面通过一段示例代码对screen对象的使用方法做具体演示。 //获取屏幕分辨率 var width = screen.width; var height = screen.height; //判断屏幕分辨率 if(width<800 || height<600) { alert("您的屏幕分辨率不足800×600，不适合浏览本页面"); } 上述代码实现了当用户的屏幕分辨率低于800×600时，弹出警告框以提醒用户的交互效果。

（3）location对象

location对象用于获取和设置当前网页的URL，其常用属性和方法如下表所示。上表中列举了location对象的常用属性。在使用location对象时，可以通过“location”或“window.location”表示该对象。下面通过示例代码来演示location对象的使用方法，具体如下。 ①跳转到新地址，示例代码如下： location.href = "https://www.baidu.cn"; 上述代码执行后，当前页面将会跳转到“https://www.baidu.cn”这个URL。 ②进入到指定的锚点，示例代码如下： location.hash = "#down"; 上述代码执行后，如果用户当前的URL为“http://test.com/index.html”，则代码执行后URL变为“http://test.com/index.htmI#down”。 ③检测协议并提示用户，示例代码如下： if(location.protocol == "http:"){ if(confirm("您在使用不安全的HTTP协议，是否切换到更安全的HTTPS协议？")){ location.href = "https://www.123.com" } } 上述代码实现了当页面打开后自动判断当前的协议。当用户以HTTP访问时，会弹出一个提示框提醒用户是否切换到HTTPS。

（4）history对象

history对象最初的设计和浏览器的历史记录有关，但出于隐私方面的考虑，该对象不再允许获取用户访问过的URL历史。history对象主要的作用是控制浏览器的前进和后退，其常用方法如下表所示。上表列举了history对象的常用方法。在使用history对象时，可以通过“history”或“window.history”表示该对象。下面通过一段示例代码对history对象的使用方法做具体演示。 history.back(); //后退 history.go(-1); //后退1页 history.forward(); //前进 history.go(1); //前进1页 history.go(0); //重新载入当前页，相当于location.reload() 上述代码实现了浏览器前进与后退的控制。其中，history.go(-1)与history.back()的作用相同，history.go(1)与history.forward()的作用相同。

（5）document对象

document对象用于处理网页文档，通过该对象可以访问文档中所有的元素。document对象的常用属性和方法，如下表所示。在使用document对象时，通过“document”或“window.document”即可表示该对象。

2.DOM对象

DOM对象用于控制HTML文档、CSS文档。例如，改变盒子的大小、标签栏的切换等。DOM对象将网页中文档的对象关系规划为节点层级，构成它们之间的等级关系，这种各对象间的层次结构称为节点树。下图所示为编辑的一个网页文档结构。浏览器进行解析时会按照层级关系构建文档对象模型，可以用一个节点树来展示上图所示的网页文档结构，如下图所示。上图中展示了DOM文档的节点树，其中，“html”“head”“body”表示节点，一个文档的节点树是由各种不同的节点组成的。根据节点层级关系的不同，可以把节点分为根节点、父节点、子节点和兄弟节点，具体介绍如下。根节点：位于节点树的最顶层，每个节点树有一个根节点，如上图中的“html”节点就是根节点。父节点：某个节点的上一级节点统称为父节点，如上图中的“ul”节点是两个“li”节点的父节点。子节点：某个节点的下一级节点统称为子节点，如上图中的“Ii”节点是“ul”节点的子节点。兄弟节点：具有相同父节点的两个节点，被称为兄弟节点。在节点树中，可以访问和控制每个节点对象，常见操作如下。

（1）节点的访问

在DOM文档中，每个节点都是一个对象，因此每个节点对象都具有一系列的属性、方法。JavaScript通过节点的属性和方法可以访问指定元素和相关元素，从而得到文档中的各个元素对象，具体讲解如下。

①访问指定元素节点

一个元素对象可以拥有元素节点、文本节点、子节点或其他类型的节点。访问指定元素节点的常用方法如下表所示。从上表中可以看出，使用不同方法可以访问HTML文档中指定id、name、class或标签名的元素。下面通过一个案例对如何访问指定的元素节点做具体演示，如例28所示。在例28中，第8行和第9行代码通过访问id为one的元素，对元素中的字体进行加粗；第10行和第11行代码通过访问标签名的方式来获取所有的li元素，并将最后一个li元素的字体颜色设置为红色。onload事件在页面或图像加载完成后立即执行，关于事件后面会做详细讲解，这里了解即可。运行例28，效果如下图所示。

例28

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>访问指定的元素节点</title> 6 <script type="text/javascript"> 7 function init(){ 8 var one = document.getElementById("one"); //找到<li id="one">的元素 9 one.style.fontWeight = "bold"; //将文本加粗 10 var lis = document.getElementsByTagName("li"); //找到所有li元素 11 lis[3].style.color = "red"; //将第4个li元素的字体颜色设置为红色 12 } 13 </script> 14 </head> 15 <body onload="init()"> 16 <ul> 17 <li id="one">标题一</li> 18 <li id="two">标题二</li> 19 <li id="three">标题三</li> 20 <li id="four">标题四</li> 21 </ul> 22 </body> 23 </html>

②访问相关元素

引用完成一个页面元素对象后，可以使用DOM对象的parentNode、childNodes、firstChild、lastChild、previousSibling或nextSibling属性访问相对于该页面元素的父、子或兄弟元素。节点对象常用的节点访问属性如下表所示。上表列举了节点对象常用的节点访问属性。需要注意的是，document对象是所有DOM对象的访问入口，当进行节点访问时需要从document对象开始。下面通过一个案例对相关元素节点的访问方法做具体演示，如例29所示。在例29中，通过节点的访问属性，从document对象一直找到第一个li元素，并将该元素中的字体颜色设为红色。运行例29，效果如下图所示。

例29

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>相关元素节点的访问方法</title> 6 <script type="text/javascript"> 7 function init(){ 8 var a = document.lastChild; //找到html元素 9 a = a.lastChild; //找到body元素 10 a = a.childNodes[1]; //找到ul元素 11 a = a.childNodes[1]; //找到第一个li元素 12 a.style.color = "red"; //将字体颜色设为红色 13 } 14 </script> 15 </head> 16 <body onload="init()"> 17 <ul> 18 <li id="one">标题一</li> 19 <li id="two">标题二</li> 20 <li id="three">标题三</li> 21 <li id="four">标题四</li> 22 </ul> 23 </body> 24 </html>

（2）元素对象的操作

DOM将HTML文档表示为一棵DOM对象节点树，每个节点对象表示文档的特定部分，因此通过修改这些对象就可以动态改变页面元素的属性。元素对象的常用操作方法如下表所示。在上表中，通过元素对象的createElement()、createTextNode()、appendChild()方法可以实现节点的创建和追加操作。下面通过一个案例来对如何动态改变页面元素的属性做具体演示，如例30所示。在例30中，实现了使用document对象创建一个元素并为该元素追加节点的操作。其中，第8行和第9行代码创建了文本节点和p元素节点；第10行代码将文本节点追加到p元素中。运行例30，效果如下图所示。

例30

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>动态改变页面元素的属性</title> 6 <script type="text/javascript"> 7 function init(){ 8 var text = document.createTextNode("赶快学习网页制作!"); //创建一个文本节点 9 var p = document.createElement("p"); //创建一个p元素节点 10 p.appendChild(text); //为p元素追加文本节点 11 document.body.appendChild(p); //为body追加p元素 12 } 13 </script> 14 </head> 15 <body onload="init()"> 16 </body> 17 </html>

（3）元素属性与内容操作

元素对象除了可对节点进行操作外，还可对一些属性和内容进行操作。元素属性和内容的常用操作方法如下表所示。下面通过一个案例来对元素属性与内容操作做具体演示，如例31所示。在例31中，实现了获取id为test的元素，并修改该元素的内容和属性的操作。其中，第12行代码用于定义元素的内容；第13行和第14行代码用于设置文字的样式。运行例31，效果如下图所示。

例31

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>元素属性与内容操作</title> 6 <style type="text/css"> 7 .top{color:red;} 8 </style> 9 <script type="text/javascript"> 10 function init() { 11 var test = document.getElementById("test"); //获取test元素对象 12 test.innerHTML = "<p>打造会代码的全能设计师!</p>"; //元素内容操作 13 test.setAttribute("style", "font-weight:bold;font-size:18px;"); //设置元素的属性 14 test.className="top"; 15 } 16 </script> 17 </head> 18 <body onload="init()"> 19 <div id="test">test</div> 20 </body> 21 </html>

（4）元素样式操作

在操作元素属性时，style属性可以修改元素的样式，className属性可以修改元素的类名，通过这两个属性即可完成元素的样式操作。下面对style属性和className属性进行详细讲解。

①style属性

每个元素对象都有一个style属性，使用这个属性可以动态调整元素的内嵌样式，从而获得所需要的效果，示例代码如下： var test document.getElementById("test");//获得待操作的元素对象 test.style.width = "200px"; //设置样式，相当于：#test{width:200px; } test.style.height = "100px"; //设置样式，相当于：#test{height:100px;} test.style.backgroundColor = "#ff0000";//设置样式，相当于：#test{background-color:#ff0000;} var testWidth = test.style.width; //获得width样式 alert(testwidth); //输出结果为“200px” 从上述代码中可以看出，在用style属性操作样式时，样式名与CSS基本相同，区别在于，CSS中带有“-”的样式（如background-color）在style属性操作中需要修改为“驼峰式”(如backgroundColor)，即将第2个及后续单词的首字母改为大写形式。例如，对象属性style.fontFamily表示CSS样式属性font-family。

②className属性

元素对象的className属性用于切换元素的类名或为元素追加类名，示例代码如下： var test = document.getElementById("test");//获取元素对象<div id="test"> test.className = "aa"; //添加样式，执行后：<div id="test" class="aa"> test.className = "bb"; //切换样式，执行后：<div id="test" class="bb"> alert(test.className); //获取样式，执行后输出：bb test.className += "cc"; //追加样式，执行后：<div id="test" class="bb cc"> test.className = test.className.replace("cc","dd");//替换样式，执行后：<div id="test" class="bb dd"> test.className = test.className.replace("dd","");//删除dd样式，执行后：<div id="test" class="bb"> test.className = ""; //删除所有样式上述代码实现了元素的样式操作，包括添加样式、切换样式、替换样式、删除样式等操作，使用方法较为灵活。

任务8-9 事件处理

需求分析

事件被看作JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript代码执行相关的操作。例如，用户可以通过鼠标拖动登录框，改变登录框的显示位置；或者在阅读文章时，选中文本后自动弹出分享、复制等选项。下面将对JavaScript中的事件进行详细讲解。

知识储备

1.事件和事件调用

事件指可以被JavaScript侦测到的交互行为。例如，在网页中滑动鼠标、单击鼠标、滚动屏幕、单击键盘等。当发生事件后，可以利用JavaScript执行一些特定的代码，从而实现网页的交互效果。当事件发生后，要想事件处理程序能够启动，就需要调用事件处理程序。在JavaScript中调用事件处理程序，先要获得处理对象的引用，然后将要执行的处理函数赋值给对应的事件。为了便于初学者理解和掌握，下面通过一个案例来做具体演示，如例32所示。在例32中，第11~13行代码为调用程序的示例代码，用于单击“单击按钮”按钮弹出“轻松学习JavaScript事件”警告框。运行例32，运行结果如下图所示。单击上图所示的“单击按钮”按钮，将弹出警告框，如下图所示。

例32

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>事件和事件调用</title> 6 </head> 7 <body> 8 <button id="save">单击按钮</button> 9 <script type="text/javascript"> 10 var btn=document.getElementById("save"); 11 btn.onclick=function(){ 12 alert("轻松学习JavaScript事件"); 13 } 14 </script> 15 </body> 16 </html>

2.常用的JavaScript事件

JavaScript中的常用事件包括鼠标事件、键盘事件、表单事件和页面事件，具体介绍如下。

（1）鼠标事件

鼠标事件是指通过鼠标动作触发的事件，鼠标事件有很多，下面列举一些常用的鼠标件，如下表所示。

（2）键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如，用户在Word中按“Enter”键实现换行就是一个键盘事件。下面列举一些常用的键盘事件，如下表所示。

（3）表单事件

表单事件是指对Web表单进行操作时发生的事件。例如，表单提交前对表单的验证、表单重置时的确认操作等。下面列举些常用的表单事件，如下表所示。

（4）页面事件

页面事件可以改变JavaScript代码的执行时间。下表中列举了常用的页面事件，具体如下。

任务8-10 页面建设准备工作

学习完上面的理论知识，小思准备着手制作“甜蜜约会”首页。先要进行的是页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。

网站素材整理

1.建立站点

（1）创建网站根目录

在计算机本地磁盘任意盘符下创建网站根目录。本书在“D盘:\案例源码\chapter08”文件夹中新建一个文件夹作为网站根目录，并命名为“food”。

（2）在根目录下新建文件

打开网站根目录“food”，在根目录下新建“images”文件夹用于存放图片，新建“css”文件夹用于存放CSS样式表文档，新建“js”文件夹用于存放JavaScript文件。

（3）新建站点

打开Dreamweaver，在菜单栏中选择“站点→新建站点”选项，在弹出的对话框中输入站点名称“food”。浏览并选择站点根目录的存储位置，单击“保存”按钮，站点即创建成功。

2.切图

使用Fireworks CS6的“切片”工具，导出“甜蜜约会”首页中的图像，并存储在站点中的“images”文件夹中。导出后的图像素材如下图所示。

页面结构分析

1.HTML结构分析

“甜蜜约会”首页面从上到下可以分为5个模块。“甜蜜约会”首页结构如下图所示。

2.CSS样式分析

页面中的各个模块居中显示，宽度为980px，因此，页面的版心为980px。此外，页面中的所有字体均设置为“微软雅黑”，大小为14px，超链接访问前和访问后的文字颜色均设置为#fff，字体大小为16px。

3.JavaScript效果分析

“banner”模块实现了焦点图切换效果，并通过定时器控制切换的时间间隔。“简介”模块的图片通过滚动的方式展现，并定义了图片滚动的速度及滚动方向。"推荐”模块的内容则通过tab栏切换展示效果。

定义基础样式

1.页面布局

下面对“甜蜜约会”首页进行整体布局。在站点根目录下新建一个HTML文件，并命名为“project08”，然后使用<div>标签对页面进行布局，具体代码如project08.html所示。

project08.html

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gbk"> 5 <title>甜蜜约会</title> 6 </head> 7 <body> 8  9 <div class="head"></div> 10  11  12 <div id="nav"></div> 13  14  15 <div class="banner"></div> 16  17  18 <div id="learn"></div> 19  20  21 <div id="features"></div> 22  23  24 <div id="footer"></div> 25  26 </body> 27 </html> 在上述代码中，类名为head和nav的两个<div>标签用于搭建“头部及导航”模块。另外，通过定义id为banner、learn、features和footer的4个<div>标签分别用于搭建“banner”模块、“简介”模块、“推荐”模块和“页脚”模块。

2.定义基础样式

在站点根目录下的CSS文件夹内新建样式表文件style08.css，使用外链式CSS在project08.html文件中引入样式表文件。然后，定义页面的基础样式，具体代码如下： 1 /*重置浏览器的默认样式*/ 2 *{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;} 3 /*全局控制*/ 4 body{font-size:14px; font-family:"微软雅黑";} 5 a:link,a:visited{color:#fff; text-decoration:none;} 6 a:hover{text-decoration:none;} 在上述代码中，第2行代码用于清除浏览器的默认样式；第4~6行代码用于定义页面公共样式。

3.引入JavaScript文件

在站点根目录下的JavaScript文件夹内新建js08.js文件，使用外链式在project08.html文件中引入该文件，具体代码如下： <script type="text/javascript" src="js/js08.js"></script>

任务8-11 制作“头部及导航”模块

效果分析

1.结构分析

“头部及导航”模块中的“头部”模块和“导航”模块分别嵌套在1个大的<div>标签里，其中，“头部”模块内嵌套2个<div>标签，分别定义左右两部分内容；“导航”模块的内容用无序列表标签<ul>搭建。其具体结构如下图所示。

2.样式分析

在“头部”模块中，需要为插人图片的两个<div>标签分别设置左右浮动。“导航”模块背景颜色通栏显示，因此，需设置<div>标签的宽度为100%，并设置<ul>标签的宽度、高度及文字样式，设置<ul>标签内的<li>标签左浮动，最后还需设置鼠标指针悬浮时<a>标签的样式。

模块制作

1.搭建结构

在project08.html文件内书写“头部及导航”模块的HTML结构代码，具体如下： 1  2 <div class="head"> 3 <div class="left"><img src="images/logo.png" /></div> 4 <div class="right"><img src="images/phone.jpg" /></div> 5 </div> 6  7  8 <div id="nav"> 9 <ul class="nav"> 10 <li><a href="#" class="color_in">首页</a></li> 11 <li><a href="#">港式甜品</a></li> 12 <li><a href="#">台式甜品</a></li> 13 <li><a href="#">植物甜品</a></li> 14 <li><a href="#">广府糖水</a></li> 15 <li><a href="#">加盟我们</a></li> 16 <li><a href="#">分店地址</a></li> 17 </ul> 18 </div> 19  在上述代码中，第10行代码为第1个<li>标签添加类名，用于单独控制其背景颜色。

2.控制样式

下面在样式表文件style08,css 中书写“头部及导航”模块对应的CSS样式代码，具体如下： 1 .head{ 2 width:980px; 3 margin:0 auto; 4 height:50px; 5 padding-top:30px; 6 } 7 .head .left{float:left;} 8 .head .right{float:right;} 9 #nav{ 10 width:100%; 11 background:#000; 12 } 13 .nav{ 14 width:980px; 15 height:35px; 16 line-height:35px; 17 margin:0 auto; 18 text-align:center; 19 font-size:14px; 20 } 21 .nav li{float:left;} 22 .nav a{ 23 display:inline-block; 24 padding:0 40px; 25 } 26 .nav a:hover{background:#e3da35;} 27 .nav .color_in{background:#e3da35;} 在上述代码中，第10行代码用于设置“导航”模块背景颜色通栏显示；第21行代码用于为所有导航元素添加左浮动效果；第26行代码用于设置<a>标签鼠标指针悬浮时的背景样式。

概要

保存project08.html与style08.css文件，刷新页面，“头部及导航”模块的效果如下图所示。

任务8-12 制作“banner”模块

效果分析

1.结构分析

“banner”模块整体由一个大盒子控制，其内部包含图片和按钮两部分，图片由无序列表标签<ul>定义，内部嵌套<img>标签；按钮由有序列表标签<ol>定义。“banner”模块的结构如下图所示。

2.样式分析

首先，需设置<div>标签的宽度和高度样式，且相对于浏览器做相对定位；设置banner图片和按钮相对于<div>标签做绝对定位。然后，设置页面加载完成时图片的显示状态，先显示第一张图片，此时其他图片设置为隐藏。最后，设置按钮水平排列显示。

3.JavaScript特效分析

banner焦点图可实现自动轮播，当鼠标指针移至轮播按钮上时停止轮播，并显示当前轮播按钮所对应的焦点图，同时按钮的样式也发生改变，当鼠标指针移出时继续执行自动轮播。

模块制作

1.搭建结构

在project08.html文件内书写“banner”模块的HTML结构代码，具体如下： 1  2 <div class="banner"> 3 <ul class="banner_pic" id="banner_pic"> 4 <li class="current"><img class="one" src="images/01.jpg"/></li> 5 <li class="pic"><img class="one" src="images/02.jpg"/></li> 6 <li class="pic"><img class="one" src="images/03.jpg"/></li> 7 </ul> 8 <ol id="button"> 9 <li class="current"></li> 10 <li class="but"></li> 11 <li class="but"></li> 12 </ol> 13 </div> 14

2.控制样式

在样式表文件style08.css中书写“banner”模块对应的CSS样式代码，具体如下： 1 .banner{ 2 width:100%; 3 height:580px; 4 position:relative; 5 overflow:hidden; 6 } 7 .one{ 8 position:absolute; 9 left:50%; 10 top:0; 11 margin-left:-960px; 12 } 13 .banner .banner_pic .pic{display:none;} 14 .banner .banner_pic .current{display:block;} 15 .banner ol{ 16 position:absolute; 17 left:50%; 18 top:90%; 19 margin-left:-62px; 20 } 21 .banner ol .but{ 22 float:left; 23 width:28px; 24 height:1px; 25 border:1px solid #d6d6d6; 26 margin-right:20px; 27 } 28 .banner ol li{cursor:pointer;} 29 .banner ol .current{ 30 background:#90d1d5; 31 float:left; 32 width:28px; 33 height:1px; 34 border:1px solid #90d1d5; 35 margin-right:20px; 36 } 在上述代码中，第4行代码用于设置“banner”模块相对于浏览器做相对定位；第7~12行代码用于设置所有的banner图片相对于父盒子做绝对定位，且在页面中水平居中显示；第15~20行代码用于设置所有的按钮相对于父盒子做绝对定位，同样在页面中水平居中显示；第29~36行代码用于设置当前的轮播按钮样式。

概要

保存project08.html与style08.css文件，刷新页面，效果如下图所示。

3.添加JavaScript效果

在js08.js文件中书写实现焦点图自动轮播效果的JavaScript代码，具体如下： 1 window.onload=function(){ 2 //顶部的焦点图切换 3 function hotChange(){ 4 var current_index=0; 5 var timer=window.setInterval(autoChange, 3000); 6 var button_li=document.getElementById("button").getElementsByTagName("li"); 7 var pic_li=document.getElementById("banner_pic").getElementsByTagName("li"); 8 for(var i=0;i<button_li.length;i++){ 9 button_li[i].onmouseover=function(){ 10 if(timer){ 11 clearInterval(timer); 12 } 13 for(var j=0;j<pic_li.length;j++){ 14 if(button_li[j]==this){ 15 current_index = j; 16 button_li[j].className="current"; 17 pic_li[j].className="current"; 18 }else{ 19 pic_li[j].className="pic"; 20 button_li[j].className="but"; 21 } 22 } 23 } 24 button_li[i].onmouseout=function(){ 25 timer=setInterval(autoChange,3000); 26 } 27 } 28 function autoChange(){ 29 ++current_index; 30 if (current_index==button_li.length){ 31 current_index=0; 32 } 33 for(var i=0;i<button_li.length;i++){ 34 if(i==current_index){ 35 button_li[i].className="current"; 36 pic_li[i].className="current"; 37 }else{ 38 button_li[i].className="but"; 39 pic_li[i].className="pic"; 40 } 41 } 42 } 43 } 44 hotChange(); 45 } 实现焦点图切换的第一步是实现图片的自动切换，如第28~42行代码所示。实现图片的自动切换需要注意以下三点。正确使用自增运算符。正确获取要操作的对象。正确判断是否切换到了最后一张图片。仅靠图片切换代码无法实现图片自动切换，还需要一个定时执行图片切换方法的机制。第5行代码使用setInterval()方法实现了图片切换方法的周期性调用。实现焦点图切换的第二步是获取焦点时切换到指定图片，如第6~27行代码所示。实现该效果的关键是正确获取鼠标指针当前停留的轮播按钮的编号值，鼠标指针移动到某个按钮上时显示相应的图片，同时按钮的样式发生改变。通过以上两个步骤就完成了焦点图自动切换效果的设置。保存js08.js文件，刷新页面，即可实现焦点图自动轮播效果，当鼠标指针悬浮到某个按钮上时，显示与按钮相对应的焦点图。例如，当鼠标指针悬浮到第2个按钮上时，效果如下图所示。

任务8-13 制作“简介”模块

效果分析

1.结构分析

“简介”模块整体由一个大盒子控制，其内部包含标题标签<h2>、定义列表标签<dl>和无缝滚动模块标签<div>。“简介”模块的结构如下图所示。

2.样式分析

设置最外层<div>标签的宽度和外边距，使“简介”模块在页面中居中显示。设置标题和定义列表内的文字样式及无缝滚动图片的大小、外边距、溢出隐藏等样式。

3.JavaScript特效分析

图片展示是通过无缝滚动的效果完成的，当鼠标指针移至图片上时停止滚动，当鼠标指针移出时继续滚动。

模块制作

1.搭建结构

在project08.html文件内书写“简介”模块的HTML结构代码，具体如下： 1  2 <div id="learn"> 3 <h2>甜蜜约会品牌简介</h2> 4 <dl> 5 <dt></dt> 6 <dd class="txt1">想和甜蜜有个约会吗？</dd> 7 <dd class="txt2">甜品不仅女孩子喜欢，很多男孩子也不例外，在人们越来越会享受生活的今天，甜品品牌的发展可谓风生水起，“甜蜜约会”就是其中一个。1995年，“甜蜜约会”的创始人在西贡区创办了首家港式甜品店，凭借着甜品细腻的口感和独特的风味，获得了很多消费者的青睐。以创新、品质、价格作为营销系理念，“甜蜜约会”很快“俘获”了一大批忠实粉丝，并在2002年于新港中心开设了分店。到2020年，“甜蜜约会”更是在北京、上海、杭州、苏州、珠海、湖南、广州等地区开设了60多家特许经营店，这样的成绩着实耀眼。</dd> 8 </dl> 9 <div class="imgbox" id="imgbox"> 10 <span> 11 <a href="#"><img src="images/1.jpg" /></a> 12 <a href="#"><img src="images/2.jpg" /></a> 13 <a href="#"><img src="images/3.jpg" /></a> 14 <a href="#"><img src="images/4.jpg" /></a> 15 </span> 16 </div> 17 </div> 18  在上述代码中，定义列表中的<dt>标签用于定义图片，<dd>标签用于定义文字。无缝滚动模块通过class及id为imgbox的<div>标签进行定义，内部嵌套<span>标签及<img>标签搭建结构。

2.控制样式

在样式表文件style08.css中书写CSS样式代码，用于控制“简介”模块，具体如下： 1 #learn{ 2 width:980px; 3 margin:0 auto; 4 } 5 h2{ 6 font-weight:100; 7 font-size:24px; 8 color:#585858; 9 padding:40px 0; 10 border-bottom:7px solid #ececec; 11 } 12 #learn dl{ 13 width:980px; 14 height:220px; 15 } 16 #learn dt{ 17 width:145px; 18 height:220px; 19 background:url(../images/learn.jpg) center center no-repeat; 20 float:left; 21 } 22 #learn dd{ 23 width:780px; 24 padding:20px 0 0 30px; 25 float:left; 26 } 27 #learn .txt1{ 28 font-size:24px; 29 color:#ffa800; 30 } 31 #learn .txt2{ 32 color:#6b6862; 33 line-height:24px; 34 } 35 .imgbox{ 36 width:940px; 37 padding:0 20px; 38 white-space:nowrap; 39 overflow:hidden; 40 } 41 .imgbox img{ 42 width:226px; 43 height:129px; 44 padding:2px; 45 } 46 .imgbox a{margin-right:20px;} 在上述代码中，第3行代码用于设置整个“简介”模块在页面中水平居中显示；第20代码和25行代码为定义的列表内图像及文字添加左浮动效果；第38行代码用于设置无缝滚动模块的图像在同一行显示。

概要

保存project08.html与style08.css文件，刷新页面，效果如下图所示。

3.添加JavaScript效果

在js08.js文件中书写实现无缝滚动效果的JavaScript代码，具体如下： 1 function school() { 2 var speed = 50; //定义滚动速度 3 var imgbox = document.getElementById("imgbox"); 4 imgbox.innerHTML += imgbox.innerHTML; //复制一个<span>标签，用于无缝滚动 5 var span = imgbox.getElementsByTagName("span"); //获取两个<span>标签 6 var timer1 = window.setInterval(marquee, speed); //启动定时器，调用滚动函数 7 imgbox.onmouseover = function () { 8 clearInterval(timer1); 9 } 10 imgbox.onmouseout = function () { 11 timer1 = setInterval(marquee, speed); 12 }; 13 function marquee() { 14 if (imgbox.scrollLeft > span[0].offsetWidth) { //当第1个<span>标签被完全卷出时 15 imgbox.scrollLeft = 0; //将被卷起的内容归零 16 } else { 17 ++imgbox.scrollLeft; //否则向左滚动 18 } 19 } 20 } 21 school(); 在上述代码中，第4行代码通过复制一组<span>标签来实现无缝滚动效果；第7~12行代码用于设置鼠标指针移入时停止滚动，移出时继续开始滚动；第13~19行代码通过检测卷出的宽度与<span>标签的宽度进行比较来判断是否继续滚动。保存js08.js文件，刷新页面，即可实现无缝滚动效果。注：以上代码必须放在window.onload()=function(){}的花括号内部，否则无法实现预计效果，之后的代码也一样。

任务8-14 制作“推荐”模块

效果分析

1.结构分析

“推荐”模块整体由一个大盒子控制，其内部包含标题部分、tab栏切换部分和信息注册部分。其中，标题部分使用<h2>标签搭建；tab栏切换部分和信息注册部分分别由2个<div>标签控制，且信息注册部分由表格元素搭建结构。“推荐”模块的结构如下图所示。

2.样式分析

设置最外层<div>标签的宽度、高度和外边距，使其在页面中居中显示；为tab栏切换部分和信息注册部分分别添加左、右浮动效果，分别设置宽度、高度及外边距等样式；将tab栏切换部分里的第一张图像设置为显示，其余图像设置为隐藏；为tab栏切换部分右侧的按钮设置宽度、高度和背景图像等样式，以及鼠标指标悬浮到按钮时变换背景图像。最后，设置信息注册部分内表单的宽度、高度、边框等相关样式。

3.JavaScript特效分析

页面加载完成时，tab栏切换部分的图像定时进行切换，当鼠标指针悬浮到右侧的按钮时，tab栏切换部分的图像跟着一起切换。

模块制作

1.搭建结构

在prject08.html文件内书写“推荐”模块的HTML结构代码，具体如下： 1  2 <div id="features"> 3 <h2>甜蜜约会特色美食推荐</h2> 4 <div class="list0"> 5 <div id="SwitchBigPic"> 6 <span class="sp"><a href="#"><img src="images/111.jpg" /></a></span> 7 <span><a href="#"><img src="images/222.jpg" /></a></span> 8 <span><a href="#"><img src="images/333.jpg" /></a></span> 9 </div> 10 <ul id="SwitchNav"> 11 <li><a class="txt_img1" href="#"></a></li> 12 <li><a class="txt_img2" href="#"></a></li> 13 <li><a class="txt_img3" href="#"></a></li> 14 </ul> 15 </div> 16 <div class="list1"> 17 <h3></h3> 18 <form action="#" method="post" class="biaodan"> 19 <table class="content"> 20 <tr> 21 <td class="left">姓名：</td> 22 <td><input type="text" class="txt01" /></td> 23 </tr> 24 <tr> 25 <td class="left">手机：</td> 26 <td><input type="text" class="txt01" /></td> 27 </tr> 28 <tr> 29 <td class="left">邮箱：</td> 30 <td><input type="text" class="txt01" /></td> 31 </tr> 32 <tr> 33 <td class="left">店址：</td> 34 <td> 35 <select class="course"> 36 <option>请选择最近的店铺地址</option> 37 <option>北京三里屯12号</option> 38 <option>上海南京路3号</option> 39 <option>广州淮阳路12号</option> 40 <option>深圳大都会3号</option> 41 </select> 42 </td> 43 </tr> 44 <tr> 45 <td colspan="2"><input class="no_border" type="button" /></td> 46 </tr> 47 </table> 48 </form> 49 </div> 50 </div> 51  在上述代码中，tab栏切换部分和信息注册部分分别由类名为list0和list1的两个<div>标签定义。其中，tab栏切换部分的按钮由无序列表定义，信息注册部分的内容由表格及表单控件定义。

2.控制样式

在样式表文件style08.css中书写CSS样式代码，用于控制“推荐”模块，具体如下： 1 #features{ 2 width:980px; 3 height:565px; 4 margin:0 auto; 5 } 6 .list0{ 7 width:638px; 8 margin-top:25px; 9 float:left; 10 position:relative; 11 } 12 #SwitchBigPic{border: 1px solid #ddd;} 13 #SwitchBigPic span{display:none;} 14 #SwitchBigPic img{ 15 width:448px; 16 height:375px; 17 } 18 #SwitchBigPic .sp{display:block;} 19 #SwitchNav{ 20 width:190px; 21 position:absolute; 22 top:0px; 23 left:447px; 24 } 25 #SwitchNav li{ 26 width:190px; 27 height:125px; 28 margin-bottom:1px; 29 } 30 #SwitchNav a{ 31 display:block; 32 width:190px; 33 height:125px; 34 background:url(../images/txt_111_1.jpg) no-repeat; 35 } 36 #SwitchNav .txt_img2{background:url(../images/txt_222_2.jpg) no-repeat;} 37 #SwitchNav .txt_img3{background:url(../images/txt_333_3.jpg) no-repeat;} 38 #SwitchNav .txt_img1:hover{background:url(../images/txt_111.jpg) no-repeat;} 39 #SwitchNav .txt_img2:hover{background:url(../images/txt_222.jpg) no-repeat;} 40 #SwitchNav .txt_img3:hover{background:url(../images/txt_333.jpg) no-repeat;} 41 .list1{ 42 width:326px; 43 height:375px; 44 float:right; 45 margin-top:25px; 46 } 47 .list1 h3{ 48 width:326px; 49 height:74px; 50 background:url(../images/zhuce.jpg) no-repeat; 51 } 52 .list1 .biaodan{ 53 width:326px; 54 height:200px; 55 } 56 .left{ 57 width:80px; 58 text-align:right; 59 font-size:18px; 60 } 61 tr{height:50px;} 62 td{text-align:center;} 63 input{ 64 width:204px; 65 height:28px; 66 border:1px solid #d2d2d2; 67 } 68 .course{ 69 width:204px; 70 height:28px; 71 border:1px solid #d2d2d2; 72 padding:3px 0; 73 } 74 .no_border{ 75 border:none; 76 width:222px; 77 height:53px; 78 background:url(../images/btn.jpg) right top no-repeat; 89 margin-top:30px; 80 cursor:pointer; 81 } 在上述代码中，第13行代码将tab栏切换部分的图像隐藏；第18行代码将tab栏切换部分的第一张图像单独设置为显示；第38～40行代码用于设置鼠标指针悬浮时tab栏切换部分按钮的背景样式。

概要

保存project08.html与style08.css文件，刷新页面，效果如下图所示。

3.添加JavaScript效果

在 js08.js文件中书写实现无缝滚动效果的JavaScript代码，具体如下： 1 function tableChange(){ 2 var lis = document.getElementById("SwitchNav").getElementsByTagName("li"); 3 var spans = document.getElementById("SwitchBigPic").getElementsByTagName("span"); 4 var current_index = 0; //保存当前焦点元素的索引 5 var timer = setInterval(autoChange,3000); 6 for (var i=0;i<lis.length;i++){ //遍历lis，为各li元素添加事件 7 lis[i].onmouseover = function(){ 8 if(timer){ //定时器存在时清除定时器 9 clearInterval(timer); 10 } 11 for(var j=0;j<lis.length;j++){ 12 if(lis[j]==this){ 13 spans[j].className = "sp"; 14 current_index = j; 15 }else{ 16 spans[j].className = ""; 17 } 18 } 19 } 20 lis[i].onmouseout = function(){ 21 timer = setInterval(autoChange,3000); //启动定时器，恢复图片自动切换 22 } 23 } 24 function autoChange(){ 25 ++current_index; 26 if (current_index == lis.length) { //当索引自增达到上限时，索引归0 27 current_index = 0; 28 } 29 for (var i=0; i<lis.length; i++) { 30 spans[i].className = ""; 31 } 32 spans[current_index].className = "sp"; 33 } 34 } 35 tableChange(); 在上述代码中，第8~10行代码和第20~22行代码分别用于定义当鼠标指针悬浮到tab栏切换部分的按钮上时清除定时器、鼠标指针移出时开启定时器；第24~33行代码为定时器周期函数，用于实现图片的自动切换效果。保存js08.js文件，刷新页面，即可实现tab栏切换部分的切换效果。切换到第3部分的效果如下图所示。

任务8-15 制作“页脚”模块

效果分析

1.结构分析

“页脚”模块通栏显示，整体由一个大的<div>标签构成。“页脚”模块的结构如下图所示。

2.样式分析

“页脚”模块背景通栏显示，因此需要设置宽度为100%。另外，还需设置“页脚”模块的字体为“微软雅黑”，大小为14px，文本颜色为白色且居中对齐显示。

模块制作

1.搭建结构

2.控制样式

在样式表文件style08.css中书写“页脚”模块对应的CSS样式代码，具体如下： 1 #footer{ 2 width:100%; 3 height:60px; 4 line-height:60px; 5 text-align:center; 6 background:#000; 7 color:#FFF; 8 } 在上述代码中，第2行代码用于设置“页脚”模块的通栏显示效果。

概要

保存project08.html与style08.css文件，刷新页面，效果如下图所示。