7.1 CSS链接的美化
1.文字链接的美化
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.1</title>
<style>
#menu{
text-align: center;
/*div内的元素水平居中*/
}
a{
margin: 10px;
/*链接元素外边距为10像素*/
}
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>
显示效果
2.按钮链接的美化
为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.2</title>
<style>
#menu{
text-align: center;
/*div内的元素水平居中*/
}
a{
font-size: 20px;
font-weight: 700;
text-decoration: none;
background-color: lightcyan;
color: red;
margin: 5px;
/*链接元素外边距为5像素*/
padding: 10px 15px;
border-radius: 30px;
}
a:link,a:visited{ /*链接未被访问y以及访问之后*/
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>
显示效果
3.背景按钮的美化
除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色和背景图片，实现背景链接
背景色代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.3</title>
<style>
#menu{
text-align: center;
/*div内的元素水平居中*/
}
a{
font-size: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px;
/*链接元素外边距为-3像素*/
}
a:link,a:visited{ /*链接未被访问y以及访问之后*/
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>
显示效果
背景图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例7.3</title>
<style>
#menu{
text-align: center;
/*div内的元素水平居中*/
}
a{
font-size: 20px;
text-decoration: none;
padding: 10px 15px;
margin: -3px;
/*链接元素外边距为-3像素*/
}
a:link,a:visited{ /*链接未被访问y以及访问之后*/
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列表的美化
1.列表项类型（list-style-type）
此属性用来设置或检索对象的列表项所使用的标记类型
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表项类型</title>
<style type="text/css">
.qianduan{
list-style-type: decimal;/*阿拉伯数字*/
}
.cheshi{
list-style-type: disc;/*实心圆点*/
}
.houduan{
list-style-type: square;/*实心方块*/
}
</style>
</head>
<body>
<div>
<h1>测试工程师</h1>
<ol class="cheshi">
<li>吴炜</li>
<li>胡鹏炎</li>
<li>吴方晴</li>
<li>吴鹏辉</li>
<li>洪涵</li>
</ol>
</div>
<div>
<h1>后端开发工程师</h1>
<ol class="houduan">
<li>罗华星</li>
<li>许扬辉</li>
<li>郑浩天</li>
<li>黄彬丞</li>
<li>徐成怿</li>
<li>叶里文</li>
</ol>
</div>
<div>
<h1>前端开发工程师</h1>
<ol class="qianduan">
<li>徐梓扬</li>
<li>傅正杰</li>
<li>吴亚琪</li>
<li>熊慧娟</li>
<li>谢志鑫</li>
</ol>
</div>
</body>
</html>
显示效果
2.列表项图像（list-style-image）
此属性用来设置或检索对象的列表项标记的图像
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表项图像</title>
<style type="text/css">
.qianduan{
list-style-image: url(img/list1.jpg);/*图像设置*/
}
.cheshi{
list-style-image: url(img/list2.jpg);
}
.houduan{
list-style-image: url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h1>测试工程师</h1>
<ol class="cheshi">
<li>吴炜</li>
<li>胡鹏炎</li>
<li>吴方晴</li>
<li>吴鹏辉</li>
<li>洪涵</li>
</ol>
</div>
<div>
<h1>后端开发工程师</h1>
<ol class="houduan">
<li>罗华星</li>
<li>许扬辉</li>
<li>郑浩天</li>
<li>黄彬丞</li>
<li>徐成怿</li>
<li>叶里文</li>
</ol>
</div>
<div>
<h1>前端开发工程师</h1>
<ol class="qianduan">
<li>徐梓扬</li>
<li>傅正杰</li>
<li>吴亚琪</li>
<li>熊慧娟</li>
<li>谢志鑫</li>
</ol>
</div>
</body>
</html>
显示效果
3.列表项位置（list-style-position）
此属性用来设置对象的列表项标记相对于列表项内容的位置
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表项位置</title>
<style type="text/css">
li{
width: 100px;
border: 2px solid #000000;
}
.qianduan{
list-style-image: url(img/list1.jpg);
list-style-position: inside;/*位置的设定*/
}
.cheshi{
list-style-image: url(img/list2.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h1>测试工程师</h1>
<ol class="cheshi">
<li>吴炜</li>
<li>胡鹏炎</li>
<li>吴方晴</li>
<li>吴鹏辉</li>
<li>洪涵</li>
</ol>
</div>
<div>
<h1>后端开发工程师</h1>
<ol class="houduan">
<li>罗华星</li>
<li>许扬辉</li>
<li>郑浩天</li>
<li>黄彬丞</li>
<li>徐成怿</li>
<li>叶里文</li>
</ol>
</div>
<div>
<h1>前端开发工程师</h1>
<ol class="qianduan">
<li>徐梓扬</li>
<li>傅正杰</li>
<li>吴亚琪</li>
<li>熊慧娟</li>
<li>谢志鑫</li>
</ol>
</div>
</body>
</html>
显示效果
内边距的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表项位置</title>
<style type="text/css">
li{
width: 100px;
border: 2px solid #000000;
}
.qianduan{
list-style-image: url(img/list1.jpg);
list-style-position: inside;/*位置的设定*/
}
.qianduan li{
padding: 10px;/*外内边距距离设置*/
}
.cheshi{
list-style-image: url(img/list2.jpg);
list-style-position: outside;
}
.houduan{
list-style-image: url(img/list3.jpg);
}
</style>
</head>
<body>
<div>
<h1>测试工程师</h1>
<ol class="cheshi">
<li>吴炜</li>
<li>胡鹏炎</li>
<li>吴方晴</li>
<li>吴鹏辉</li>
<li>洪涵</li>
</ol>
</div>
<div>
<h1>后端开发工程师</h1>
<ol class="houduan">
<li>罗华星</li>
<li>许扬辉</li>
<li>郑浩天</li>
<li>黄彬丞</li>
<li>徐成怿</li>
<li>叶里文</li>
</ol>
</div>
<div>
<h1>前端开发工程师</h1>
<ol class="qianduan">
<li>徐梓扬</li>
<li>傅正杰</li>
<li>吴亚琪</li>
<li>熊慧娟</li>
<li>谢志鑫</li>
</ol>
</div>
</body>
</html>
显示效果
4.复合列表样式（list-style）
这个属性是设定列表项样式的一个快捷的综合写法
语法：list-style : list-style-type | list-style-position | list-style-image
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合列表样式</title>
<style type="text/css">
li{
width: 100px;
border: 2px solid #000000;
}
.qianduan{
list-style: decimal url(img/list1.jpg) inside;
}
.qianduan li{
padding: 10px;/*外内边距距离设置*/
}
.cheshi{
list-style: square url(img/list2.jpg) outside;
}
.houduan{
list-style: circle url(img/list3.jpg) inside;
}
</style>
</head>
<body>
<div>
<h1>测试工程师</h1>
<ol class="cheshi">
<li>吴炜</li>
<li>胡鹏炎</li>
<li>吴方晴</li>
<li>吴鹏辉</li>
<li>洪涵</li>
</ol>
</div>
<div>
<h1>后端开发工程师</h1>
<ol class="houduan">
<li>罗华星</li>
<li>许扬辉</li>
<li>郑浩天</li>
<li>黄彬丞</li>
<li>徐成怿</li>
<li>叶里文</li>
</ol>
</div>
<div>
<h1>前端开发工程师</h1>
<ol class="qianduan">
<li>徐梓扬</li>
<li>傅正杰</li>
<li>吴亚琪</li>
<li>熊慧娟</li>
<li>谢志鑫</li>
</ol>
</div>
</body>
</html>
显示效果
5.利用背景图像实现列表项标记
虽然使用list-style-image 属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用background-image 加以实现。
代码
<!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; /*设置文本左内边框30px*/
padding-bottom: 10px; /*设置文本下内边框10px*/
}
</style>
</head>
<body>
<h3>快递公司</h3>
<ol>
<li>邮政快递</li>
<li>顺丰快递</li>
<li>京东快速</li>
<li>圆通快递</li>
<li>申通快递</li>
<li>百世快递</li>
<li>韵达快递</li>
</ol>
</body>
</html>
显示效果
7.3 CSS表格的美化
1.border-collapse
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的
HTML中那样分开显示。
语法：border-collapse：separate | collapse | inherit
参数：separate是默认值，边框分开不合并，不会忽略border-spacing和empty-cells属性。collapse 边框合并，如果相邻，则共用一个边框，会忽略border-spacing和emply-cells属性。Inherit 是从父元素继承值。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-collapse</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>
显示效果
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>border-spacing</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">
<tr>
<td>大数据</td><td>物联网</td>
</tr>
<tr>
<td>云计算</td><td>人工智能</td>
</tr>
</table>
</body>
</html>
显示效果
3.caption-side
caption一side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caplion标
签同时使用。
语法：caption-side：top | right | bottom | left
参数：top 是默认值，指定标题在表格上边。right 指定标题在表格右边。bottom 指定标
题在表格下边。leftr 指定标题在表格左边。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>caption-side</title>
<style type="text/css">
.cap{
caption-side: bottom;
}
table,td,th{
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-17：00</td><td>李凯全</td>
</tr>
<tr>
<td>19：00-22：00</td><td>曾天艺</td>
</tr>
</table>
</body>
</html>
显示效果
4.empty-cells
empty-cells属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有
当表格边框独立时（即border-collapse 属性等于separate）此属性才起作用。
语法：empty-cells: show | hide
参数：show 是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指
定当表格的单元格无内容时，隐藏该单元格的边框
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>empty-cells</title>
<style type="text/css">
.emp{
border-collapse: separate;
/*默认值 单元格的边框，背景正常显示*/
/*empty-cells: show;*/
/*空单元格的边框，背景均不显示*/
empty-cells: hide;
}
table,td,th{
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多媒体的添加与美化
1.<embed>标签的使用
<embed>标签可以在网页插入各种类型的多媒体文件，如WMV,MP3,AVI等。但是在使用的时候需要下载对应的插件，否则无法显示。
代码
<!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>
显示效果
2.<bgsound>标签的使用
<bgsound>标签是IE浏览器设置网页背景音乐的元素，利用它可以将音乐文件嵌入到网页中不占页面空间，可以播放WAV,AU,MP3等。
代码
<!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>
显示效果
3.HTML5新增的多媒体标签
audio和video元素，分别用来插入声音和视频
1.<audio>标签
<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的
代码
<!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>
显示效果
2.<video>标签
<video>标签定义视频，例如电影片段或其他的视频流。
代码
<!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 综合案例--海洋旅游胜地
代码
<!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: 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>
交通路况
娱乐设施
美食特产
历史文化
注意事项
</div>
<div class="left">
<h3>新闻动态</h3>
<ol>
<li>英比奥山顶景区</li>
<li>新加坡空中缆车</li>
<li>天际线斜坡滑车</li>
<li>圣淘沙名胜世界</li>
<li>海洋馆和水上探险乐园</li>
</ol>
<video src="media/shengtaosha.ogg" 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/海浪-柔和.wav" controls="controls" loop="loop"></audio>
</div>
</div>
</body>
</html>
显示效果
