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

通过对网页中元素、布局和色彩的合理设计,可以使网页达到较好的视觉效果。网页中常用超链接、列表和表格等网页元素,所以,对这些元素进行美化,可以大大提高网站的质量。尤其是多媒体元素的加入,使网页更加丰富多彩。

7.1 CSS链接的美化

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

7.1.1.文字链接的美化

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

在谷歌浏览器中,鼠标悬停链接时无明显效果,其余链接的默认外观如图7-1所示。设计者为了改变这种最基本的超链接样式,利用前面章节所讲的伪类选择器,按照'a:link→a:visited→a:hover→a:active→"的顺序,设置不同的链接访问状态效果,为文本超链接添加复杂而多样的样式。

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{
				margin: 10px;
				/*链接元素外边距10px*/
				font-weight: 700;
				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: 18px;
				color: red;
				text-decoration: overline underline;
			}
			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背景链接的美化

除了文字链接和按钮链接,设计者还会为链接设置不同的背景颜色加以实现背景链接。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				margin: -3px;
				/*链接元素外边距10px*/
				text-decoration: none;
				margin: 5px;
				padding: 10px 15px;
			}
			a:link,a:visited{
				/*链接未被访问*/
				background-color: lightgrey;
				color: red;
			}
			a:hover{
				color: white;
				background-color: brown;
			}
			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;
				/*链接元素外边距10px*/
				text-decoration: none;
				margin: 5px;
				padding: 10px 15px;
			}
			a:link,a:visited{
				/*链接未被访问*/
				background-image: url(img/menu_1.jpg);
				/* background-color: lightgrey; */
				color: red;
			}
			a:hover{
				color: white;
				background-image: url(img/menu_2.jpg);
				/* background-color: brown; */
			}
			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后设计者就迫切希望,能利用列表许多新的属性,开发出更加丰富的列表样式来。在CSS 样式中,主要作用是通过 list-style-type、list-style-image和list-style-position 这3个属性改变列表修饰符的类型。

7.2.1.列表项类型(list-style-type)

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ceshi{
				list-style-type: circle;
			}
			.houduan{
				list-style-type: disc;
			}
			.qianduan{
				list-style-type: hebrew;
			}
		</style>
	</head>
	<body>
		<div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div>
		<!-- 7.2.2.列表项图像(list-style-image) -->
		<!-- 7.2.3.列表项位置(list-style-position) -->
		<!-- 7.2.4.复合列表样式(list-style) -->
		<!-- 7.2.5.利用背景图像实现列表项标记 -->
		<!-- 7.3 CSS表格的美化 -->
		<!-- 7.3.1.border-collapse -->
		<!-- 7.3.2..border-spacing -->
		<!-- 7.3.3.caption-side -->
		<!-- 7.3.4.empty-cells -->
		<!-- 7.4 多媒体的添加与美化 -->
		<!-- 7.4.1.<embed>标签的使用
		7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签 -->
	</body>
</html>

7.2.2.列表项图像(list-style-image)

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*  7.2.2.列表项图像(list-style-image)  */
			.ceshi{
					list-style-image: url(img/list1.jpg);
				}
				.houduan{
					list-style-image: url(img/list2.jpg);
				}
				.qianduan{
					list-style-image: url(img/list3.jpg);
				}
		</style>
	</head>
	<body>
		<div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div>
		
		<!-- 7.2.3.列表项位置(list-style-position) -->
		<!-- 7.2.4.复合列表样式(list-style) -->
		<!-- 7.2.5.利用背景图像实现列表项标记 -->
		<!-- 7.3 CSS表格的美化 -->
		<!-- 7.3.1.border-collapse -->
		<!-- 7.3.2..border-spacing -->
		<!-- 7.3.3.caption-side -->
		<!-- 7.3.4.empty-cells -->
		<!-- 7.4 多媒体的添加与美化 -->
		<!-- 7.4.1.<embed>标签的使用
		7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签 -->
	</body>
</html>

7.2.3.列表项位置(list-style-position)

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 	.ceshi{
				list-style-type: circle;
			}
			.houduan{
				list-style-type: disc;
			}
			.qianduan{
				list-style-type: hebrew;
			} */
			/*  7.2.2.列表项图像(list-style-image)  */
			/* .ceshi{
					list-style-image: url(img/list1.jpg);
				}
				.houduan{
					list-style-image: url(img/list2.jpg);
				}
				.qianduan{
					list-style-image: url(img/list3.jpg);
				} */
				/* 7.2.3.列表项位置(list-style-position) */
				li{
					width: 100px;
					border: 2px solid #000000;
				}
				.ceshi{
						list-style-image: url(img/list1.jpg);
					}
				.houduan{
						list-style-image: url(img/list2.jpg);
						list-style-position: outside;
					}
				.qianduan{
						list-style-image: url(img/list3.jpg);
						list-style-position: inside;
					}
		</style>
	</head>
	<body>
		<div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div>
		
		
		<!-- 7.2.4.复合列表样式(list-style) -->
		<!-- 7.2.5.利用背景图像实现列表项标记 -->
		<!-- 7.3 CSS表格的美化 -->
		<!-- 7.3.1.border-collapse -->
		<!-- 7.3.2..border-spacing -->
		<!-- 7.3.3.caption-side -->
		<!-- 7.3.4.empty-cells -->
		<!-- 7.4 多媒体的添加与美化 -->
		<!-- 7.4.1.<embed>标签的使用
		7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签 -->
	</body>
</html>
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 	.ceshi{
				list-style-type: circle;
			}
			.houduan{
				list-style-type: disc;
			}
			.qianduan{
				list-style-type: hebrew;
			} */
			/*  7.2.2.列表项图像(list-style-image)  */
			/* .ceshi{
					list-style-image: url(img/list1.jpg);
				}
				.houduan{
					list-style-image: url(img/list2.jpg);
				}
				.qianduan{
					list-style-image: url(img/list3.jpg);
				} */
				/* 7.2.3.列表项位置(list-style-position) */
				li{
					width: 100px;
					border: 2px solid #000000;
				}
				.ceshi{
						list-style-image: url(img/list1.jpg);
					}
				.houduan{
						list-style-image: url(img/list2.jpg);
						list-style-position: outside;
					}
				.qianduan li{
						list-style-image: url(img/list3.jpg);
						list-style-position: inside;
						padding-left: 20px;
					}
		</style>
	</head>
	<body>
		<div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div>
		
		
		<!-- 7.2.4.复合列表样式(list-style) -->
		<!-- 7.2.5.利用背景图像实现列表项标记 -->
		<!-- 7.3 CSS表格的美化 -->
		<!-- 7.3.1.border-collapse -->
		<!-- 7.3.2..border-spacing -->
		<!-- 7.3.3.caption-side -->
		<!-- 7.3.4.empty-cells -->
		<!-- 7.4 多媒体的添加与美化 -->
		<!-- 7.4.1.<embed>标签的使用
		7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签 -->
	</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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 7.2.1.列表项类型(list-style-type) */
		/* 	.ceshi{
				list-style-type: circle;
			}
			.houduan{
				list-style-type: disc;
			}
			.qianduan{
				list-style-type: hebrew;
			} */
			/*  7.2.2.列表项图像(list-style-image)  */
			/* .ceshi{
					list-style-image: url(img/list1.jpg);
				}
				.houduan{
					list-style-image: url(img/list2.jpg);
				}
				.qianduan{
					list-style-image: url(img/list3.jpg);
				} */
				/* 7.2.3.列表项位置(list-style-position) */
				/* li{
					width: 100px;
					border: 2px solid #000000;
				}
				.ceshi{
						list-style-image: url(img/list1.jpg);
					}
				.houduan{
						list-style-image: url(img/list2.jpg);
						list-style-position: outside;
					}
				.qianduan li{
						list-style-image: url(img/list3.jpg);
						list-style-position: inside;
						padding-left: 20px;
					} */
					/* 7.2.4.复合列表样式(list-style) */
					li{
						width: 100px;
						border: 2px solid #000000;
					}
					.ceshi{
							list-style:  url(img/list1.jpg);
						}
					.houduan{
							list-style: outside url(img/list2.jpg);
						}
					.qianduan {
							list-style: decimal url(img/list3.jpg) inside;
						}
					.qianduan li{
							padding-left: 20px;
						}
		</style>
	</head>
	<body>
		<div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div>
		
		<!-- 7.2.5.利用背景图像实现列表项标记 -->
		<!-- 7.3 CSS表格的美化 -->
		<!-- 7.3.1.border-collapse -->
		<!-- 7.3.2..border-spacing -->
		<!-- 7.3.3.caption-side -->
		<!-- 7.3.4.empty-cells -->
		<!-- 7.4 多媒体的添加与美化 -->
		<!-- 7.4.1.<embed>标签的使用
		7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签 -->
	</body>
</html>

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

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

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>
			<li>申通快递</li>
		</ol>
	</body>
</html>

7.3 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是从父元素继承值。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				/* 默认值 单元格边框没有合并 */
				/* border-collapse: separate; */
				/* 单元格边框合并 */
				border-collapse: collapse;
				/* 继承父元素对单元格设置 */
				/* border-collapse: inherit; */
			}
			table,td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>课程</th><th>学分</th><th>考试形式</th>
			</tr>
			<td>SQL数据库技术</td><td>4.0</td><td>笔试</td>
			<tr>
				<td>程序设计</td><td>6.0</td><td>机考</td>
			</tr>
		</table>
	</body>
</html>

7.3.2..border-spacing

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

语法:border-spacing:length

参数:length由数字和单位组成的长度值,不允许负值。如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。如果只提供一个length值时,这个值将同时作用于横向和纵向上的间距。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one{
				/* 设置单元格的间距 */
				border-collapse: separate;
				border-spacing: 10px;
			}
			.two{
				/* 分别设置单元格横向和纵向的间距 */
				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 | bottom | left

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

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>8:00-12:00</td><td>张红琪</td>
			</tr>
			<tr>
				<td>14:00-16: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指定当表格的单元格无内容时,隐藏该单元格的边框。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.emp{
				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>

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

		</style>
	</head>
	<body>
		<!-- <div >
			<h3>测试工程师</h3>
			<ol class="ceshi">
				<li>111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>ttt</li>
			</ol>
		</div>
		<div>
			<h3>后端开发工程师</h3>
			<ol class="houduan">
				<li>666</li>
				<li>777</li>
				<li>888</li>
				<li>999</li>
				<li>vvv</li>
			</ol>
		</div>
		<div>
			<h3>前端开发工程师</h3>
			<ol class="qianduan">
				<li>aaa</li>
				<li>xxx</li>
				<li>zzz</li>
				<li>555</li>
				<li>666</li>
			</ol>
		</div> -->
		<!-- 7.4 多媒体的添加与美化 -->
		<h1>embed插入动画</h1>
		<embed src="media/阳春三月.swf"></embed>
		<h1>embed插入音频</h1>
		<embed src="media/听!是谁在唱歌.mp3"></embed>
		<h1>embed插入视频</h1>
		<embed src="media/第五空间.mp4"></embed>
		<!-- 7.4.1.<embed>标签的使用 -->
		<!-- 7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<!-- 7.4.3.2.<video>标签  -->
	</body>
</html>

7.4.2.<bgsound>标签的使用

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.16</title>
	</head>
	<body>
		<h2>童话镇-背景音乐</h2>
		<!-- <bgsound src="media/童话镇.mp3" loop="1"></bgsound> -->
		<embed src="media/童话镇.mp3"></embed>
	</body>
</html>

7.4.3.HTML5新增的多媒体标签

HTML5新增了audio和 video 元素,分别用来插入声音和视频。<audio>和<video>标签的属性大致相同。

7.4.3.1.<audio>标签

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 7.2.1.列表项类型(list-style-type) */
		/* 	.ceshi{
				list-style-type: circle;
			}
			.houduan{
				list-style-type: disc;
			}
			.qianduan{
				list-style-type: hebrew;
			} */
			/*  7.2.2.列表项图像(list-style-image)  */
			/* .ceshi{
					list-style-image: url(img/list1.jpg);
				}
				.houduan{
					list-style-image: url(img/list2.jpg);
				}
				.qianduan{
					list-style-image: url(img/list3.jpg);
				} */
				/* 7.2.3.列表项位置(list-style-position) */
				/* li{
					width: 100px;
					border: 2px solid #000000;
				}
				.ceshi{
						list-style-image: url(img/list1.jpg);
					}
				.houduan{
						list-style-image: url(img/list2.jpg);
						list-style-position: outside;
					}
				.qianduan li{
						list-style-image: url(img/list3.jpg);url指定图片路径
						list-style-position: inside;
						padding-left: 20px;
					} */
					/* 7.2.4.复合列表样式(list-style) */
					/* li{
						width: 100px;
						border: 2px solid #000000;
					}
					.ceshi{
							list-style:  url(img/list1.jpg);
						}
					.houduan{
							list-style: outside url(img/list2.jpg);
						}
					.qianduan {
							list-style: decimal url(img/list3.jpg) inside;
						}
					.qianduan li{
							padding-left: 20px;
						} */
		</style>
	</head>
	<body>
		<!-- 7.4 多媒体的添加与美化 -->
		<h1>embed插入动画</h1>
		<embed src="media/阳春三月.swf"></embed>
		<h1>embed插入音频</h1>
		<embed src="media/听!是谁在唱歌.mp3"></embed>
		<h1>embed插入视频</h1>
		<embed src="media/第五空间.mp4"></embed>
		<!-- 7.4.1.<embed>标签的使用 -->
		<!-- 7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<h1>audio插入音频</h1>
		<audio src="media/铃铛.mp3" controls="controls"></audio>
		<!-- 7.4.3.2.<video>标签  -->
		<h1>video插入视频</h1>
		<video src="media/第五空间.mp4" controls="controls"></video>
	</body>
</html>

7.4.3.2.<video>标签

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 7.4 多媒体的添加与美化 -->
		<h1>embed插入动画</h1>
		<embed src="media/阳春三月.swf"></embed>
		<h1>embed插入音频</h1>
		<embed src="media/听!是谁在唱歌.mp3"></embed>
		<h1>embed插入视频</h1>
		<embed src="media/第五空间.mp4"></embed>
		<!-- 7.4.1.<embed>标签的使用 -->
		<!-- 7.4.2.<bgsound>标签的使用 -->
		<!-- 7.4.3.HTML5新增的多媒体标签 -->
		<!-- 7.4.3.1.<audio>标签 -->
		<h1>audio插入音频</h1>
		<audio src="media/铃铛.mp3" controls="controls"></audio>
		<!-- 7.4.3.2.<video>标签  -->
		<h1>video插入视频</h1>
		<video src="media/第五空间.mp4" controls="controls"></video>
	</body>
</html>

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

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>海洋旅游胜地</title>
		<style type="text/css">
			body{
				background-image: url(img2/bg-0.jpg);
			}
			.all{
				margin: 0px auto;
				width: 700px;
				height: 600px;
				background-image: url(img2/bg.jpg);
			}
			.top{
				width: 700px;
				height: 100px;
				background-image: url(img2/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(img2/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>
		<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/第五空间.mp4"" width="320px" height="250px" controls="controls"></video>
			</div>
			<div class="right">
				<table>
					<tr>
						<td><img src="img2/table1.jpg"/></td>
						<td><img src="img2/table2.jpg"/></td>
					</tr>
					<tr>
						<td><img src="img2/table3.jpg"/></td>
						<td><img src="img2/table4.jpg"/></td>
					</tr>
				</table>
				<p>这里不过是个平凡的小岛,岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时,决定将它改造成一个休闲度假的胜地。</p>
				<br><br><br>
				<audio src="media/铃铛.mp3" controls="controls" loop="loop"></audio>
			</div>
		</div>
	</body>
</html>
相关推荐
张保瑞5 分钟前
十一:java web(3)-- Spring框架 -- Spring简介
java·前端·spring
墨柳烟29 分钟前
ABAQUS高亮显示网格节点方法:Python为每个节点建立集合
开发语言·前端·python·abaqus
EasyCVR37 分钟前
EHOME视频平台EasyCVR萤石设备视频接入平台视频诊断技术可以识别哪些视频质量问题?
服务器·人工智能·计算机视觉·音视频·1024程序员节
琴~~1 小时前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
zhaocarbon1 小时前
el-scrollbar 动态更新内容 鼠标滚轮无效
前端·javascript·vue.js
一纸忘忧1 小时前
Nuxt 3.14 发布!全新功能与性能提升
前端·javascript·vue.js
~甲壳虫2 小时前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
.net开发2 小时前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
名字越长技术越强2 小时前
vue--vueCLI
前端·javascript·vue.js
是个热心市民2 小时前
构建一个导航栏web
前端·javascript·python·django·html