7.1 CSS链接的美化
7.1.1.文字链接的美化
<!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="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方媒体</a>
<a href="index.html4" 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;
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="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方媒体</a>
<a href="index.html4" 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: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px;
}
a:link,a:visited{
background-color: lightcyan;
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="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方媒体</a>
<a href="index.html4" 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: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px;
}
a:link,a:visited{
background-image: url(img/menu_1.jpg);
color: red;
}
a:hover{
background-color: brown;
color: white;
}
a:active{
background-image: url(img/menu_2.jpg);
color: lawngreen;
}
</style>
</head>
<body>
<div id="menu">
<h2>服务中心菜单栏</h2>
<a href="index.html1" target="_blank">加入我们</a>
<a href="index.html2" target="_blank">媒体报道</a>
<a href="index.html3" target="_blank">官方媒体</a>
<a href="index.html4" target=_blank">帮助中心</a>
</div>
</body>
</html>
7.2 CSS列表的美化
7.2.1.列表项类型（list-style-type）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ceshi{
list-style-type: square;
}
.houduan{
list-style-type:circle;
}
.qianduan{
list-style-type: decimal;
}
</style>
</head>
<body>
<div>
<h3>测试工程师</h3>
<ol class="ceshi">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
</div>
</body>
</html>
7.2.2.列表项图像（list-style-image）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.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>b1</li>
<li>b2</li>
<li>b3</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
</div>
</body>
</html>
7.2.3.列表项位置（list-style-position）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.ceshi{
list-style-image: url(img/list1.jpg);
list-style-position: inside;
}
.houduan{
list-style-image:url(img/list2.jpg);
list-style-position: outside;
}
.qianduan{
list-style-image:url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h3>测试工程师</h3>
<ol class="ceshi">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.ceshi{
list-style-image: url(img/list1.jpg);
list-style-position: inside;
}
.houduan{
list-style-image:url(img/list2.jpg);
list-style-position: outside;
}
.qianduan{
list-style-image:url(img/list3.jpg);
list-style-position: inside;
}
.qianduan li{
padding-left: 20px;
}
</style>
</head>
<body>
<div>
<h3>测试工程师</h3>
<ol class="ceshi">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
</div>
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.ceshi{
list-style: square url(img/list1.jpg) outside;
}
.houduan{
list-style: circle url(img/list2.jpg) inside;
}
.qianduan{
list-style: decimal url(img/list1.jpg) inside;
}
.qianduan li{
padding-left: 20px;
}
</style>
</head>
<body>
<div>
<h3>测试工程师</h3>
<ol class="ceshi">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="houduan">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="qianduan">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ol>
</div>
</body>
</html>
7.2.5.利用背景图像实现列表项标记
虽然使用list-style-image 属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用 background-image 加以实现。
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 是从父元素继承值。
<!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>
<th>SQL数据库技术</th>
<th>4.0</th>
<th>笔试</th>
</tr>
<tr>
<th>PHP程序设计</th>
<th>6.0</th>
<th>机考</th>
</tr>
</table>
</body>
</html>
7.3.2..border-spacing
border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。
语法:
border-spacing: length
参数：length由数字和单位组成的长度值，不允许负值。如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。如果只提供一个length值时，这个值将同时作用于横向和纵向上的间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one{
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 I bottom | left
参数：top是默认值，指定标题在表格上边。right指定标题在表格右边。bottom指定标
题在表格下边。left指定标题在表格左边。
<!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>
<th>8: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.3.4.empty-cells
empty-cells 属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有
当表格边框独立时（即 border-collapse 属性等于separate）此属性才起作用。
语法:
empty-cells: show | hide
参数：show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指
定当表格的单元格无内容时，隐藏该单元格的边框。
<!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>00000000</td>
<td>00000000</td>
</tr>
<tr>
<td>00000000</td>
</tr>
</table>
</body>
</html>
7.4 多媒体的添加与美化
7.4.1.<embed>标签的使用
<h1>阳春五月</h1>
<embed src="media/阳春三月.swf"></embed>
<h1>第五空间</h1>
<embed src="media/第五空间.mp4"></embed>
<h1>听!是谁在唱歌</h1>
<embed src="media/听!是谁在唱歌.mp3"></embed>
、
7.4.2.<bgsound>标签的使用
<bgsound>是正浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌入到网页中又不占页面空间，可以播放的声音文件格式包括WAV、AU、MIDI、MP3等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐</title>
</head>
<body>
<h2>童话镇-背景音乐</h2>
<!-- <bgsound src="media/童话镇.mp3" loop="-1"></bgsound> -->
<embed src="media1/童话镇.mp3"></embed>
</body>
</html>
7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。
<audio>标签允许包含多个<source>标签，<source>标签可以链接不同的音频文件，浏览
器将使用第一个可识别的格式。
<h1>铃铛</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签
<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的
代码格式和<audio>标签的使用相似。
<h1>第五空间</h1>
<video src="media/第五空间.mp4" controls="controls"><video>
7.5 综合案例——海洋旅游胜地
扫一扫
1944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
