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

2024-11-06 22:34:30

7.1 CSS链接的美化

通过对超链接的css样式设置，来达到理想的视觉效果。

7.1.1.文字链接的美化

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

设置文字链接的外观

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.1</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="index.html" target="_blank">加入我们</a>
			<a href="index.htm2" target="_blank">媒体报道</a>
			<a href="index.htm3" target="_blank">官方微博</a>
			<a href="index.htm4" target="_blank">帮助中心</a>
		</div>
	</body>
</html>

运行结果：


7.1.2.按钮链接的美化

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

设置按钮链接的外观

代码如下：

<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				font-weight: 700;
				text-decoration: none;
				background-color: pink;
				color: lightyellow;
				margin: 5px;
				padding: 10px 15px;
				border-radius: 30px;
			}
			/* 链接的美化 */
			a:link,a:visited{
				box-shadow: -5px -5px 10px pink;
			}
			a:hover{
				font-size: 15px;
			}
			a:active{
				font-size: 20px;
				color: plum;
				box-shadow: 6px 6px 10px pink;
			}
		</style>

运行结果：


7.1.3背景链接的美化

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

背景颜色链接＆背景图片链接

代码如下：

<style type="text/css">
			#menu{
				text-align: center;
			}
			a{
				font-size: 20px;
				text-decoration:none;
				padding:10px 15px;
				margin:13px;
			}
			a:link,a:visited{
				/* background-color:lightgrey; */
				background-image: url(img/menu_1.jpg);
				color:red;
			}
			a:hover{
				color: white;
				/* background-color:brown; */
				background-image: url(img/menu_2.jpg);
			}
			a:active{
				font-weight: 700px;
				color: lawngreen;
			}
		</style>

运行结果：


7.2 CSS列表的美化

在css样式中，主要是通过列表项类型（list-style-type）、列表项图像（list-style-image）、列表项位置（list-style-position）这三个属性改变列表修饰符的类型。

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

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

常用的list-style-type属性如表：

属性值 说明 属性值 说明
disc 默认值，标记时实心圆 cirele 标记是空心圆
square 标记是实心方块 decimal 标记是阿拉伯数字
lower-roman 标记是小写罗马数字 upper-roman 标记是大写罗马数字
lower-alpha 标记是小写英文字母 upper-alpha 标记是大写英文数字
none 无列表项标记

示例代码如下： 

.ceshi{
				list-style-type: square;
			}
			.houduan{
				list-style-type: circle;
			}
			.qianduan{
				list-style-type: decimal;
				}

运行结果： 


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);
				list-style-position: outside;
			}
			.houduan{
				list-style-image: url(img/list2.jpg);
				list-style-position: inside;
			}
			.qianduan{
				list-style-image: url(img/list3.jpg);
				list-style-position: inside;
			}
			.qianduan li{
				padding-left: 20px;
			}

运行结果： 


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

用来设定列表项样式的一个快捷的综合写法。可以用来设置列表项类型（list-style-type）、列表项图像（list-style-image）、列表项位置（list-style-position）这三个属性。

li{ 
				width: 100px;
				border: 2px solid #000000;
			}
			.ceshi{
				list-style: square url(img/list1.jpg) outside;
			} 
			.houduan{
				list-style: circle url(img/list2.jpg) inside;
			} 
			.qianduan{
				list-style: decimal url(img/list3.jpg) inside;
			}
			.qianduan li{
				padding-left: 20px;
			}


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

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

代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.8</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表格的美化

7.3.1.border-collapse

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

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

代码如下： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.9</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>程序设计</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值时，这个值将同时作用于横向和纵向上的间距。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.10</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 Iright |bottomIleft 
参数:top是默认值，指定标题在表格上边。right指定标题在表格右边。bottom指定标题在表格下边。 left指定标题在表格左边。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.11</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>
				<th>08:00-12:00</th><th>张鸿铭</th>
			</tr>
			<tr>
				<th>14:00-17:00</th><th>李凯全</th>
			</tr>
			<tr>
				<th>19:00-22:00</th><th>曾天意</th>
			</tr>
		</table>
	</body>
</html>

运行结果：

7 


7.3.4.empty-cells

empty-cells属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有当表格边框独立时(即border-collapse属性等于separate)此属性才起作用。 
语法:empty-cells:showIhide 
参数:show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指定当表格的单元格无内容时，隐藏该单元格的边框。 

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例7.12</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>
	</body>
</html>

运行结果：


7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

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

代码如下： 

<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.2.<bgsound>标签的使用

<bgsound>是ie浏览器中设置网页背景音乐的元素，利用它可以将文件嵌入到网页中又不占页面空间。

<bgsound>标签参数设置不多

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签

<audio>标签定义声音，此标签默认是隐藏的。

代码如下：

<h1>audio插入音频</h1>
		<audio src="media/童话镇.mp3" controls="controls"></audio>

7.4.3.2.<video>标签

<video>标签定义视频，<video>标签在页面中嵌入视频的代码格式和<audio>标签使用相似。

代码如下：

<h1>video插入视频</h1>
		<video src="media/第五空间.mp4" controls="controls"></video>

运行结果：


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

代码如下：

<!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>
		<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="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/铃铛.mp3" controls="controls" loop="loop"></audio>
			</div>
		</div>
	</body>
</html>

运行结果：

上一篇：【CSS】清除浮动（父元素塌陷）


下一篇：Docker篇（数据卷）