第七章利用CSS和多媒体美化页面-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80780936/article/details/143138497

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

7.1 CSS链接的美化

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

7.1.1.文字链接的美化

在HTML5 中，<a></a>标签始终定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标，如果未设置 href 属性，后续多个属性均无法使用，则只是超链接的占位符。
在谷歌浏览器中，鼠标悬停链接时无明显效果，其余链接的默认外观如图7-1所示。设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照'a:link→a:visited→a:hover→a:active→”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式。

<!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.按钮链接的美化

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

<!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背景链接的美化

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

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

未被访问：

鼠标悬停链接：

<!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个属性改变列表修饰符的类型。