第七章利用CSS和多媒体美化页面

7.1 CSS链接的美化

在前面的章节中，已经学习了超链接的简单知识。知道超链接是一种允许其他网页和站点之间进行连接的元素，各个网页链接在一起后，才能真正构成一个网站。但是默认的链接样式往往达不到设计者的要求，所以可以通过对超链接的css样式设置，来达到理想的视觉效果。

7.1.1.文字链接的美化

在HTML5中，<a></a>标签始终定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它的指示连接的目标，如果未设置href属性，后续多个属性均无法使用，则只是超链接的占位符。

在谷歌浏览器中，鼠标悬停链接时无明显效果，其余链接的默认。

【设置文字链接的外观】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				margin: 10px;
			}
			a:link{
				font-size: 20px;
			}
			a:hover{
				font-size: 18px;
				color: red;
				text-decoration: overline underline;
			}
			a:active{
				font-size: 20px;
				color: green;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

7.1.2.按钮链接的美化

为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现。

【设置按钮链接的外观】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				text-decoration: none;
				background-color: lightcyan;
				color: red;
				margin: 5px;
				padding:10px 15px;
				border-radius: 30px;
			}
			a:link,a:visited{
				box-shadow: -5px -5px 10px black;
			}
			a:hover{
				font-size: 26px;
				
			}
			a:active{
				font-size: 20px;
				box-shadow: 6px 6px 10px black;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

7.1.3背景链接的美化

除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接。

【7.3背景颜色链接】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				margin: -3px;
				padding:10px 15px;
				text-decoaration:none;
				font-size:20px;
			}
			a:link,a:visited{
				background-color:lightgrey
				color:red
			}
			a:hover{
				background-color:brown;
				color: white;
				
			}
			a:active{
				font-weight:700;
				color:lawngreen;
				
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

在上述程序的基础上，把链接未被访问时和鼠标悬停时的背景颜色分别改为不同的背景图片，可以看到不一样的链接风格，代码如下：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				margin: -3px;
				padding:10px 15px;
				text-decoaration:none;
				font-size:20px;
			}
			a:link,a:visited{
				background-image: url(img/menu_1.jpg);
				background-color:lightgrey
				color:red
				
			}
			a:hover{
				background-color:brown;
				color: white;
				background-image: url(img/menu_2.jpg);
			}
			a:active{
				font-weight:700;
				color:lawngreen;
				
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<h2>服务中心菜单栏</h2>
			<a href="#" target="_blank">加入我们</a>
			<a href="#" target="_blank">媒体报道</a>
			<a href="#" target="_blank">官方博客</a>
			<a href="#" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

7.2 CSS列表的美化

在前面的章节中，已经学习了列表的简单知识。列表元素是网页设计中常见元素，它是HTML中组织多个段落文本的一种方式，可以使信息显示结构清晰，直观，便于理解，多用于新闻，产品，或者是其他内容的罗列。

常见的CSS列表属性：

|---------------------|----------------------|
| 属性 | 说明 |
| list-style | 复合属性，在一个声明中设置所有的列表属性 |
| list-style-type | 设置列表项标记的类型 |
| list-style-image | 使用图像来替换列表项的标记 |
| list-style-position | 设置在何处放置列表项标记 |

7.2.1.列表项类型（list-style-type）

此属性用来设置或检查检索对象的列表项所使用的标记类型。list-style-image属性值为none或指定url地址的图片不能被显示，此属性将发生作用。

|-------------|------------|-------------|-----------|
| 属性值 | 说明 | 属性值 | 说明 |
| disc | 默认值，标记是实心圆 | circle | 标记是空心圆 |
| square | 标记是实心方块 | decimal | 标记是阿拉伯数字 |
| lower-roman | 标记是小写罗马数字 | upper-roman | 标记是大写罗马数字 |
| lower-alpha | 标记是小写英文字母 | upper-alpha | 标记是大写英文字母 |
| none | 无列表项标记 | | |
[常用的list-style-type]

【7.4各种列表标记】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 110px;
				height: 130px;
				border: 1px solid red;
				float:left;
				
			}
			ol.one{
				list-style-type: decimal;
			}
			ol.two{
				list-style-type: lower-roman;
			}
			ol.three{
				list-style-type: upper-roman;
			}
			ol.five{
				list-style-type: upper-alpha;
			}
			ol.six{
				list-style-type: square;
			}
			li.circle{
				list-style-type: circle;
			}
		</style>
	</head>
	<body>
		<left><h2>食品分类</h2></left>
		<div>
			<h3>饮料</h3>
			<ol class="one">
				<li>咖啡</li>
				<li>茶</li>
				<li>可口可乐</li>
			</ol>
		</div>
		<div>
			<h3>甜品</h3>
			<ol class="two">
				<li>蛋糕</li>
				<li>糖水</li>
				<li>奶酪</li>
			</ol>
		</div>
		<div>
			<h3>水果</h3>
			<ol class="three">
				<li>梨子</li>
				<li>苹果</li>
				<li>猕猴桃</li>
			</ol>
		</div>
		<div>
			<h3>蔬菜</h3>
			<ol class="four">
				<li>茄子</li>
				<li>南瓜</li>
				<li>大白菜</li>
			</ol>
		</div>
		<div>
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li>饺子</li>
				<li>面条</li>
			</ol>
		</div>
		<div>
			<h3>调料</h3>
			<ol class="six">
				<li>八角</li>
				<li class="circle">麻油</li>
				<li>胡椒粉</li>
			</ol>
		</div>
	</body>
</html>

7.2.2.列表项图像（list-style-image）

此属性用来设置或检索对象的列表项标记的图像。

|---------|------------|
| 属性值 | 说明 |
| none | 默认值，无图形被显示 |
| url | 图像的路径 |
| inherit | 规定从父元素继承值 |
[常用的list-style-image属性值]

【7.5图像作列表项标记】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ol{
				list-style-image: url(img/list3.jpg);
				list-style-type: upper-alpha;
			}
			li.none{
				list-style-image: none;
			}
		</style>
	</head>
	<body>
		<h3>护肤品系列</h3>
		<ol>
			<li>洗面奶</li>
			<li>柔肤水</li>
			<li class="none">保湿霜</li>
			<li>眼部精华</li>
			<li class="none">防晒乳</li>
		</ol>
	</body>
</html>

7.2.3.列表项位置（list-style-position）

此属性用来设置对象的列表项标记相对列表项内容的位置。

|---------|-------------------------------------------|
| 属性值 | 说明 |
| outside | 默认值，保持标记位于文本的左侧。列表项标记放置在文本以外，且环绕文本不根据标记对齐 |
| inside | 列表项标记放置在文本以内，且环绕文本跟据标记对齐 |
| inherit | 规定从父元素继承值 |
[常用的list-style-position属性值]

【7.6列表项标记位置设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ol{
				list-style-position: outside;
			}
			ul{
				list-style-position: inside;
			}
			li{
				list-style-image: url(img/list2.jpg);
				border: 1px solid black;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<h3>鲜花</h3>
		<ol>
			<li>玫瑰</li>
			<li>蔷薇</li>
			<li>牡丹</li>
		</ol>
		<h3>鲜花</h3>
		<ul>
			<li>玫瑰</li>
			<li>蔷薇</li>
			<li>牡丹</li>
		</ul>
	</body>
</html>

7.2.4.复合列表样式（list-style）

这个属性是设定列表项样式的一个快捷键的综合写法。用这个属性可以同时设置列表项类型属性（list-style-type），列表项图片属性（list-style-image）和列表位项位置属性（list-style-position）。

语法：list-style：list-style-type | list-style-position | list-style-image

【7.7复合的列表样式】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: square inside url(img/list1.jpg);
			}
		</style>
	</head>
	<body>
		<h3>饮料</h3>
		<ul>
			<li>咖啡</li>
			<li>茶</li>
			<li>可口可乐</li>
		</ul>
	</body>
</html>

7.2.5.利用背景图像实现列表项标记

虽然使用list-style-image属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像·替换的项目符号距离文字的位置。因此，可以用background-image加以实现。

【7.8列表样式】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style-type: none;
				background: url(img/list4.jpg)no-repeat;
				padding-left: 30px;
				padding-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<h3>物流公司</h3>
		<ol>
			<li>顺丰</li>
			<li>圆通</li>
			<li>百世</li>
			<li>韵达</li>
		</ol>
	</body>
</html>

7.3 CSS表格的美化

常用网页的布局形式是DIV+CSS，但并不是所有的布局都是如此，必要时，表格的使用对零散内容的汇总分类更为便利。所以，尽管在前面的章节已经学习了表格的基本用法，但是设计者需要利用css设置表格样式的多样化，进而美化表格的外观。

|-----------------|-------------|
| 属性 | 说明 |
| border-collapse | 设置单元格边框是否合并 |
| border-spacing | 设置单元格的间距 |
| caption-side | 设置表格标题的位置 |
| empty-cells | 对单元格的处理方式 |
[常用的CSS表格属性]

7.3.1.border-collapse

border-collapse属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的HTML中那样分开显示。

语法：border-collapse：separate | collapse | inherit

**参数：**separate是默认值，边框分开不合并，不会忽略border-spacing和empty-cells属性。collapse边框合并，如果相邻，则共用一个边框，会忽略border-spacing和empty-cells属性。Inherit是从父元素继承值。

【7.9表格边框设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border-collapse: collapse;
				
			}
			table,td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>课程</th><th>学分</th><th>考试形式</th>
			</tr>
			<tr>
				<td>SQL数据库技术</td><td>4.0</td><td>笔试</td>
			</tr>
			<tr>
				<td>PHP程序设计</td><td>6.0</td><td>机考</td>
			</tr>
		</table>
	</body>
</html>

以上示例中属性border-collapse取值collapse，所以表格的边框被合并为一个单一的边框。

如果属性border-collspse取值separate或者不设置，表格将分别有各自的边框。

7.3.2..border-spacing

border-spacing属性作用等同于标签属性cellspacing，即当表格边框独立时（border-collapse属性等于separate），相邻单元格边框之间的横向和纵向的间距。

语法：border-spacing：length

【7.10表格的间距设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one{
				border-collapse: separate;
				border-spacing: 10px;
			}
			.two{
				border-collapse: separate;
				border-spacing: 10px 30px;
			}
			table,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="one">
			<tr>
				<td>大数据</td><td>物联网</td>
			</tr>
			<tr>
				<td>云计算</td><td>人工智能</td>
			</tr>
		</table>
		<br />
		<table class="two">
			<tr>
				<td>大数据</td><td>物联网</td>
			</tr>
			<tr>
				<td>云计算</td><td>人工智能</td>
			</tr>
		</table>
	</body>
</html>

以上示例中，表格的相邻单元格之间，间距会合并，并取两者之间的最大值。

7.3.3.caption-side

caption-side属性设置或检索表格的标题在·表格的哪一变，此属性必须和表格的caption标签同时使用。

语法：caption-side：top | right | left

参数：top是默认值，指定标题在表格的上边。right指定标题在表格右边。bottom指定表格在标题的下边。left指定标题在表格的左边。

【7.11表格标题的设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cap{
				caption-side: bottom;
				
			}
			table,th,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="cap">
			<caption><h2>值班表</h2></caption>
			<tr>
				<th>时间</th><th>值日生</th>
			</tr>
			<tr>
				<td>08:00-12:00</td><td>谢f</td>
			</tr>
			<tr>
				<td>14:00-17:00</td><td>张三</td>
			</tr>
			<tr>
				<td>19:00-22:00</td><td>李四</td>
			</tr>
		</table>
	</body>
</html>

7.3.4.empty-cells

empty-cells属性设置或检索当表格的单元格无内射时，是否显示该单元格的边框。只有当表格边框独立时（即border-collapse属性等于separate）此属性才起作用。

语法：empty-cells：show | hide

参数：show时默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指定当表格的单元格·无内容时，隐藏该单元格的边框。

【7.12单元格的边框设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.emp{
				border-collapse: separate;
				empty-cells: hide;
			}
			table,th,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="emp">
			<tr>
				<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
			<tr>
				<td>有内容的单元格</td><td></td>
			</tr>
			<tr>
				<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
		</table>
	</body>
</html>

当empty-cells取值hide时，此单元格的边框将隐藏不可见。

7.4 多媒体的添加与美化

对于很多网站而言，经常会涉及到一些动画或者视频，音频之类的内容，设计得合理，这些元素就能很好的突出主题，如此，网页浏览者在视觉和听觉上都会有空间联系和层次丰富的感觉，从而产生愉悦的感受。

早期的网页大多是由文字或图像构成的，由于多媒体技术的发展，音乐，动画，视频等媒体的应用越来越广泛。音乐网站，电影网站，播客等融合多媒体技术的网站越来越多。

本节将简单介绍<embed>,<bgsound>,<audio>,<video>标签在网页中的应用。

7.4.1.<embed>标签的使用

利用<embed>标签可以在网页中插入各种类型的多媒体文件，如WMV，MP3，AVI,MP4，SWF，MOV，RMVB等。但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。

|--------|----------------|
| 属性 | 说明 |
| src | 必选项，定义嵌入内容的URL |
| type | 定义嵌入内容的类型 |
| width | 设置嵌入内容的宽度 |
| height | 设置嵌入内容的高度 |
[常用的embed属性]

【7.13利用<embed>标签插入Flash动画文件】

【7.14利用<embed标签插入MP4视频文件】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<h2>第五空间</h2>
			<embed src="media/media/第五空间.mp4" width="600px" height="400px"></embed>
		</center>
	</body>
</html>

【7.15利用<embed>标签插入MP3音乐文件】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<h2>听！是谁在唱歌</h2>
			<embed src="media/media/听!是谁在唱歌.mp3" height="200"></embed>
		</center>
	</body>
</html>

7.4.2.<bgsound>标签的使用

<bgsound>是IE浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌入到网页中又不占页面空间，可以播放的声音文件格式包括WAV，AU，MIDI，MP3等。

|---------|------------------------------------|
| 属性 | 说明 |
| src | 必选项，定义嵌入内容的URL |
| loop | 该属性表明音频被播放的次数，取值"-1"为无限循环。 |
| balance | 该属性取值在-10000到+10000，它决扬声器之间的音量如何分配 |
| volume | 该属性取值在-10000到0，它决定音频的音量大小 |
| delay | 该属性设置音频的播放延时 |
[常用的bgsound属性]

【7.16背景音乐设置】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<h2>童话镇--背景音乐</h2>
			<embed src="media/media/童话镇.mp3" loop="-1"></embed>
		</center>
	</body>
</html>

由于<bgsound>标签的非标准特性，所以设置网页背景音乐时，一些主流的浏览器常用的方法

7.4.3.HTML5新增的多媒体标签

以前大多数音频，视频是通过插件（例如Flash）来播放的，然而并非所有的浏览器都有同样的插件。

HTML5新增了audio和video元素，分别用来插入声音和视频。至于格式，只要使用支持HTML5的浏览器就可以了，不需要使用其他任何的插件。<audio>和<video>标签的属性大致相同

|----------|-----------------------------------------------------|
| 属性 | 说明 |
| autoplay | 定义音频或视频在就绪后马上播放 |
| controls | 定义控件的显示（比如播放/暂停按钮） |
| loop | 定义音频或视频结束时是否重新开始播放 |
| preload | 规定当网页加载时，音频或视频是否默认被加载以及如何被加载。如果使用"autoplay"，则忽略该属性。 |
| src | 必选项，定义音频或视频的URL |
| height | 设置视频播放器的高度 |
| width | 设置视频播放器的宽度 |
[常用的<audio>和<video>标签属性]

7.4.3.1.<audio>标签

<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。

【7.17单个音频的嵌入】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<h2>audio声音文件</h2>
			<audio src="media/media/铃铛.mp3" controls="controls">您的浏览器不支持audio元素。</audio>
		</center>
	</body>
</html>

7.4.3.2.<video>标签

<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码格式和<audio>标签的使用相似。

【7.18视频嵌入网页】

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>
			<h2>video视频文件</h2>
			<video src="media/media/movie.ogg" controls="controls">
				您的浏览器不支持video元素
			</video>
		</center>
	</body>
</html>

7.5 综合案例------海洋旅游胜地

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>海洋旅游胜地</title>
		<style type="text/css">
			body{
				background-image: url(img/bg-0.jpg);
			}
			.all{
				margin: 0px auto;
				width: 700px;
				height: 600px;
				background-image: url(img/bg.jpg);
			}
			.top{
				width: 700px;
				height: 100px;
				background-image: url(img/top.jpg);
			}
			.menu{
				width: 700px;
				height: 60px;
				text-align: center;
			}
			.left,.right{
				width: 350px;
				height: 440px;
				float: left;
			}
			a{
				font-size: 13px;
				font-weight: 700;
				text-decoration: none;
				background-color: lightcyan;
				color: red;
				margin: 20px;
				padding: 10px 15px;
				border-radius: 10px;
			}
			a:link,a:visited{
				box-shadow: 6px 6px 10px black;
			}
			a:hover{
				font-size: 14px;
			}
			a:active{
				font-size: 13px;
				box-shadow: -5px -5px 10px black;
			}
			h3{
				color: brown;
			}
			ol{
				list-style-image: url(img/list2.jpg);
				list-style-type: upper-alpha;
			}
			table{
				border-collapse: separate;
				border-spacing: 20px;
			}
			p{
				text-indent: 2em;
				line-height: 22px;
				font-weight: 700;
				color: brown;
			}
		</style>
	</head>
	<body>
		<!-- <h1 align="center">在亚洲首屈一指的综合旅度假胜地</h1>
		<h2 align="center">感受世界最大的海洋馆</h2> -->
		<div class="all">
			<div class="top"></div>
			<div class="menu">
				<br>
					<a href="#" target="_blank">交通路况</a>
					<a href="#" target="_blank">娱乐设施</a>
					<a href="#" target="_blank">美食特产</a>
					<a href="#" target="_blank">历史文化</a>
					<a href="#" target="_blank">注意事项</a>
			</div>
			<div class="left">
				<h3>新闻动态</h3>
				<ol>
					<li>英比奥山顶景区</li>
					<li>新加坡空中缆车</li>
					<li>天际线斜坡滑车</li>
					<li>圣淘沙名胜世界</li>
					<li>海洋馆和水上探险乐园</li>
				</ol>
				<video src="media/media/第五空间.mp4" width="320px" height="250px" controls></video>
			</div>
			<div class="right">
			<table>
				<tr>
					<td><img src="img/table1.jpg"/></td>
					<td><img src="img/table2.jpg"/></td>
				</tr>
				<tr>
					<td><img src="img/table3.jpg"/></td>
					<td><img src="img/table4.jpg"/></td>
				</tr>
			</table>
				<p>这里不过是个平凡的小岛，岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时，决定将它改造成一个休闲度假的胜地。</p>
				<br><br><br>
				<audio src="media/media/海浪-柔和.wav" controls="controls" loop="loop"></audio>
			</div>
		</div>
	</body>
</html>

第七章 利用CSS和多媒体美化页面

7.1 CSS链接的美化

7.1.1.文字链接的美化

7.2 CSS列表的美化

7.2.1.列表项类型（list-style-type）

7.2.3.列表项位置（list-style-position）

7.2.4.复合列表样式（list-style）

7.3.1.border-collapse

7.3.2..border-spacing

7.3.3.caption-side

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签

第七章利用CSS和多媒体美化页面