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

榴莲千丞2024-10-31 11:33

7.1 CSS链接的美化

7.1.1.文字链接的美化

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

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

设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照"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{
				font-size: 20px;
				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: 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背景链接的美化

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

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;
				margin: -3px;
				padding: 10px 15px;
			}
			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{
				font-size: 20px;
				text-decoration: none;
				margin: -3px;
				padding: 10px 15px;
			}
			a:link,a:visited{
				background-image: url("../img/menu_1.jpg");
				color: red;
			}
			a:hover{
				background-image: url("../img/menu_2.jpg");
				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>

未点击时：

鼠标悬浮在链接时：

点击时：

7.2 CSS列表的美化

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

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

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.four{
				list-style-type: square;
			}
			li.circle{
				list-style-type: circle;
			}
			ol.five{
				list-style-type: upper-alpha;
			}
		</style>
	</head>
	<body>
		<center><h2>食品分类</h2></center>
		<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 class="circle">胡椒粉</li>
			</ol>
		</div>
		<div>
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li class="circle">饺子</li>
				<li>面条</li>
			</ol>
		</div>
	</body>
</html>

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

此属性用来设置或检索对象的列表项标记的图像。常用的list-style-image 属性值见表7-3。

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-image: url("../img/list3.jpg")
			}
			ol.three{
				list-style-type: upper-roman;
			}
			ol.four{
				list-style-image: url("../img/list2.jpg")
			}
			li.circle{
				list-style-image:url("../img/list1.jpg")
			}
			ol.five{
				list-style-type: upper-alpha;
			}
		</style>
	</head>
	<body>
		<center><h2>食品分类</h2></center>
		<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 class="circle">胡椒粉</li>
			</ol>
		</div>
		<div>
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li class="circle">饺子</li>
				<li>面条</li>
			</ol>
		</div>
	</body>
</html>

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

此属性用来设置对象的列表项标记相对于列表项内容的位置。常用的 list-style-position

属性值见表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;
				list-style-position: outside;
			}
			ol.two{
				list-style-image: url("../img/list3.jpg")
			}
			ol.three{
				list-style-type: upper-roman;
				list-style-position: inside;
			}
			ol.four{
				list-style-image: url("../img/list2.jpg")
			}
			li.circle{
				list-style-image:url("../img/list1.jpg")
			}
			ol.five{
				list-style-position: inside;
				list-style-type: upper-alpha;
			}
			li{
				border: 1px solid black;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<center><h2>食品分类</h2></center>
		<!-- <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 class="circle">胡椒粉</li>
			</ol>
		<!-- </div>
		<div> -->
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li class="circle">饺子</li>
				<li>面条</li>
			</ol>
		<!-- </div> -->
	</body>
</html>

以下示例中，上面的列表项标记位于文本内容左侧外边，下面的列表项标记位于文本内容左侧内边。

如果在上述代码的基础上为<li>标签添加代码"padding-left：30px；，"padding-left：60px"，

浏览效果如图下所示，发现下面的列表项环绕文本根据标记对齐，上面的列表项则否。

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;
				list-style-position: outside;
			}
			ol.two{
				list-style-image: url("../img/list3.jpg")
			}
			ol.three{
				list-style-type: upper-roman;
				list-style-position: inside;
			}
			.three li{
				padding-left: 30px;
			}
			ol.four{
				list-style-image: url("../img/list2.jpg")
			}
			li.circle{
				list-style-image:url("../img/list1.jpg")
			}
			ol.five{
				list-style-position: inside;
				list-style-type: upper-alpha;
			}
			.five li{
				padding-left: 60px;
			}
			li{
				border: 1px solid black;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<center><h2>食品分类</h2></center>
		<!-- <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 class="circle">胡椒粉</li>
			</ol>
		<!-- </div>
		<div> -->
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li class="circle">饺子</li>
				<li>面条</li>
			</ol>
		<!-- </div> -->
	</body>
</html>

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

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

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;
				list-style-position: outside;
			}
			ol.two{
				/* list-style-image: url("../img/list3.jpg") */
				list-style: decimal url("../img/list3.jpg") outside;
			}
			ol.three{
				/* list-style-type: upper-roman;
				list-style-position: inside; */
				list-style: circle inside;
			}
			.three li{
				padding-left: 30px;
			}
			ol.four{
				/* list-style-image: url("../img/list2.jpg") */
				list-style: circle url("../img/list2.jpg") outside;
			}
			li.circle{
				list-style-image:url("../img/list1.jpg")
			}
			ol.five{
				/* list-style-position: inside;
				list-style-type: upper-alpha; */
				list-style: url("../img/list3.jpg") inside;
			}
			.five li{
				padding-left: 60px;
			}
			li{
				border: 1px solid black;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<center><h2>食品分类</h2></center>
		<!-- <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 class="circle">胡椒粉</li>
			</ol>
		<!-- </div>
		<div> -->
			<h3>主食</h3>
			<ol class="five">
				<li>米饭</li>
				<li class="circle">饺子</li>
				<li>面条</li>
			</ol>
		<!-- </div> -->
	</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表格的美化

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

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: 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>

7.3.2..border-spacing

border-spacing属性作用等同于标签属性 cellspacing，即当表格边框独立时(border-co.

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-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>
		<table class="two">
			<br >
			<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: top;
			}
			table{
				border-collapse: collapse;
			}
			table,td,th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="cap">
			<caption><h2>考试信息</h2></caption>
			<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>

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">
			.one{
				border-collapse: separate;
				border-spacing: 10px;
				empty-cells: hide;
			}
		
			table,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table class="one">
			<tr>
			<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
			<tr>
				<td>有内容的单元格</td><td></td>
			</tr>
			<tr>
			<td>有内容的单元格</td><td>有内容的单元格</td>
			</tr>
		</table>
		
	</body>
</html>

7.4 多媒体的添加与美化

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

早期的网页大多是由文字或者图像构成的，由于多媒体技术的发展，音乐、动画、视频等媒体的应用越来越广泛。音乐网站、电影网站、播客等融合多媒体技术的网站越来越多本节将简单介绍<embed>、<bgsound>、<audio>、<video>标签在网页中的应用。

7.4.1.<embed>标签的使用

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

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1> 插入动画：阳春三月</h1>
		<embed src="../media/阳春三月.swf"></embed>
		<h1> 插入音频：听!是谁在唱歌</h1>
		<embed src="../media/听!是谁在唱歌.mp3"></embed>
		<h1> 插入动画：第五空间</h1>
		<embed src="../media/第五空间.mp4"></embed>
	</body>
</html>

7.4.2.<bgsound>标签的使用

<bgsound>是正浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌入到网页中又不占页面空间，可以播放的声音文件格式包括WAV、AU、MIDI、MP3等。<bgsound>标签参数设置不多，常用的bgsound 属性见表 7-7。

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

7.4.3.HTML5新增的多媒体标签

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

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

7.4.3.1.<audio>标签

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

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <h1> 插入动画：阳春三月</h1>
		<embed src="../media/阳春三月.swf"></embed>
		<h1> 插入音频：听!是谁在唱歌</h1>
		<embed src="../media/听!是谁在唱歌.mp3"></embed>
		<h1> 插入动画：第五空间</h1>
		<embed src="../media/第五空间.mp4"></embed> -->
		
		<h1> audio 标签插入音频</h1>
		<audio src="../media/铃铛.mp3" controls="controls"></audio>
	</body>
</html>

7.4.3.2.<video>标签

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

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <h1> 插入动画：阳春三月</h1>
		<embed src="../media/阳春三月.swf"></embed>
		<h1> 插入音频：听!是谁在唱歌</h1>
		<embed src="../media/听!是谁在唱歌.mp3"></embed>
		<h1> 插入动画：第五空间</h1>
		<embed src="../media/第五空间.mp4"></embed> -->
		
		<!-- <h1> audio 标签插入音频</h1>
		<audio src="../media/铃铛.mp3" controls="controls"></audio> -->
		
		<h1> video 标签插入音频</h1>
		<video src="../media/第五空间.mp4" controls="controls"></video>
		
	</body>
</html>

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

效果图如下：

Html代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>海洋旅游胜地</title>
		<style type="text/css">
			@import url("../css/anli.css");
		</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="../img1/table1.jpg"/></td>
					<td><img src="../img1/table2.jpg"/></td>
				</tr>
				<tr>
					<td><img src="../img1/table3.jpg"/></td>
					<td><img src="../img1/table4.jpg"/></td>
				</tr>
			</table>
			<p>这里不过是个平凡的小岛，岛上居民过着简单质朴的生活。当新加坡政府正式收回这个小岛时，决定将它改造成一个休闲度假的胜地。</p>
			<br><br><br>
			<audio src="../media/铃铛.mp3" controls="controls" loop="loop"></audio>
		</div>
		</div>
	</body>
</html>

CSS代码如下：

css 复制代码 
body{
	background-image: url("../img1/bg-0.jpg");
}
.all{
	margin: 0px auto;
	width: 700px;
	height: 600px;
	background-image: url("../img1/bg.jpg");
}
.top{
	width: 700px;
	height: 100px;
	background-image: url("../img1/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("../img1/list2.jpg");
	list-style-type: upper-alpha;
}
table{
	border-collapse: separate;
	border-spacing: 20px;
}
p{
	text-align: 2em;
	line-height: 22px;
	font-weight: 700;
	color: brown;
}
相关推荐
Front思6 分钟前
根据输入的详细地址解析经纬度
前端·javascript
光影少年7 分钟前
前端文件上传组件流程的封装
前端·reactjs
纳尼亚awsl8 分钟前
css实现边框双色凹凸半圆
前端·css
前端郭德纲9 分钟前
一些CSS的基础知识点
前端·css
zqwang88810 分钟前
Performance API 实现前端资源监控
前端·javascript
神膘护体小月半11 分钟前
img 标签的 object-fit 属性
css
HC1825808583214 分钟前
零基础学西班牙语，柯桥专业小语种培训泓畅学校
前端·javascript·vue.js
图扑软件14 分钟前
掌控物体运动艺术：图扑 Easing 函数实践应用
大数据·前端·javascript·人工智能·信息可视化·智慧城市·可视化
sheng12345678rui28 分钟前
mfc100.dll丢失的解决方法-电脑基础知识
数据库·microsoft·电脑·dll修复工具·1024程序员节
奶糖 肥晨1 小时前
React 组件生命周期与 Hooks 简明指南
前端·javascript·react.js
热门推荐
01Windows10安装PCL1.14.0及点云配准02制冷毛细管的计算方法介绍03【经验分享】Ubuntu22.04安装微信(linux官方版)04ECharts 地图实战分析：实现一个完整的地图下钻功能05前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07红米手机使用google play08【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总09RAG 实践- Ollama+RagFlow 部署本地知识库10优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间