7.1 CSS链接的美化
7.1.1.文字链接的美化
在谷歌浏览器中，鼠标悬停链接时无明显效果。
为了改变这种最基本的超链接的样式，利用伪类选择器，按照a:link->a:visited->a:hover->a:active的顺序设置不同的链接访问效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>草稿</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="草稿.html" target="_blank">加入我们</a>
<a href="草稿.html" target="_blank">媒体报道</a>
<a href="草稿.html" target="_blank">官方博客</a>
<a href="草稿.html" target="_blank">帮助中心</a>
</div>
</body>
</html>
7.1.2.按钮链接的美化
按钮当然会比纯文字看起来更美观，而相较于上面，我们只需要更改<a>标签即可
<style>
#menu{
text-align: center;
/* div内的元素水平居中 */
}
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{
box-shadow: 5px 5px 10px black;
/* 点击链接时 */
}
第一个按钮是显示了鼠标点击状态下的按钮，上述代码其他部分跟文字链接一致，所以无需更改。
7.1.3背景链接的美化
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{
box-shadow: 5px 5px 10px black;
/* 点击链接时 */
}
7.2 CSS列表的美化
代码第一版全部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.A{
list-style-type: square;
}
.B{
list-style-type: circle;
}
.C{
list-style-type: decimal;
}
</style>
</head>
<body>
<div>
<h3>测试工程师</h3>
<ol class="A">
<li>李芳</li>
<li>徐寒冰</li>
<li>尹茹梦</li>
</ol>
</div>
<div>
<h3>后端开发工程师</h3>
<ol class="B">
<li>刘昊</li>
<li>刘准云</li>
<li>张炳文</li>
</ol>
</div>
<div>
<h3>前端开发工程师</h3>
<ol class="C">
<li>陈翔</li>
<li>刘佳慧</li>
<li>于璐</li>
</ol>
</div>
</body>
</html>代码结果与下列结果一致
7.2.1.列表项类型（list-style-type）
列表项的类型有许多，现在这里演示一下三种类型，我们首先给不同的列表定义一个class类，然后进行css编辑
<style>
.A{
list-style-type: square;
}
.B{
list-style-type: circle;
}
.C{
list-style-type: decimal;
}
</style>
7.2.2.列表项图像（list-style-image）
与上述基本类似，但是形式会更多样，更丰富，代码格式如下(再重申一遍，所有图片样式都在img文件夹内）
<style>
.A{
list-style-image: url(img/list1.jpg);
}
.B{
list-style-image: url(img/list2.jpg);
}
.C{
list-style-image: url(img/list3.jpg);
}
</style>
展示的样式都是css类型，全部样式请看（7.2）
7.2.3.列表项位置（list-style-position）
图标默认位置在<li></li>标签外面，只需要通过
list-style-position: inside / outside;即可改变图标在列表中的位置，（前面是放在里侧，后面是放在内侧）
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.A{
list-style-image: url(img/list1.jpg);
list-style-position: outside;/* 设置图标在外侧 */
}
.B{
list-style-image: url(img/list2.jpg);
list-style-position: inside;/* 设置图标在内侧 */
}
.C{
list-style-image: url(img/list3.jpg);
/* 默认 */
}
</style>
当图标设置为inside时，两个就绑定了，一个往后移，一起往后移。
.C{
list-style-image: url(img/list3.jpg);
list-style-position: inside;
}
.C li{
padding-left: 20px;
}
7.2.4.复合列表样式（list-style）
list-style属性可以给它三个值，第一个是类型，第二个值是给它一个图，第三个是给它一个位置
它是上面三种类型的结合，可以仅用一条就拥有上述三条的效果。
<style>
li{
border: 2px solid #000000;
width: 100px;
}
.A{
list-style: square url(img/list1.jpg) outside;
}
.B{
list-style: circle url(img/list2.jpg) inside;
}
.C{
list-style: decimal url(img/list3.jpg) inside;
}
.C li{
padding-left: 20px;
}
</style>
7.2.5.利用背景图像实现列表项标记
有些时候我们需要的图像是会占很大一片区域，而我们需要的放置的内容则在图片里面。这个时候再用上述的方法就不管用了，按照之前所学的内容，我们可以用把图片设置为背景的方式，来实现把文字放入图片中恰当的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例7.8</title>
<style type="text/css">
li{
list-style-type: none;
/* 设置列表项类型为不显示,因为列表项会默认显示阿拉伯数字,所以需要none.来让它不显示. */
background: url(img/list4.jpg)no-repeat;
/* 因为背景设置的时候因为太小的原因,默认会重复出现,所以需要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表格的美化
代码大致样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
/* border-collapse: separate; */
border-collapse: collapse;
}
table,td,th {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<th>张三</th>
<th>男</th>
<th>18</th>
</tr>
<tr>
<th>李四</th>
<th>男</th>
<th>19</th>
</tr>
</table>
</body>
</html>7.3.1.border-collapse
表格单元格是否合并边框
有两种值，一种是默认值collapse（边框不合并）
<style type="text/css">
table{
/* border-collapse: separate; */
border-collapse: collapse;
}
table,td,th {
border: 1px solid #000000;
}
</style>
一种是单元格边框合并separate
<style type="text/css">
table{
border-collapse: separate;
/* border-collapse: collapse; */
}
table,td,th {
border: 1px solid #000000;
}
</style>
7.3.2..border-spacing
表格单元格的间距，可以分横向和纵向两个方向去设置单元格的间距。输入两个值，第一个是横向的值，第二个是纵向的值。
<!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 #000000;
}
</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>注意，设置间距时最多可以输入两个值，不可以输入第三个。
.one{
border-collapse: separate;
/* 设置两个值,它会分别设置横向和纵向的间距 */
/* 最多两个值,给两个值,第一个是横向,第二个是纵向 */
border-spacing: 10px;
}
.two{
border-collapse: separate;
border-spacing: 10px 30px;
}
7.3.3.caption-side
表格的标题，设置标题的位置。（caption-side:...;）
代码全貌：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cap{
caption-side:bottom;
}
table,th,td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table class="cap">
<caption><h2>值班表</h2></caption>
<tr>
<th>时间</th>
<th>值日生</th>
</tr>
<tr>
<td>08: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>主要区域：
.cap{
/* 设置表格标题的位置top是上.bottom是下 */
caption-side: left;
}
7.3.4.empty-cells
对空单元格的处理方法，默认情况下空单元格是有边框的，而我们可以设置两种属性来更改，第一种是有边框，也就是默认情况下的样子（empty-cells: show;），第二种是无边框（empty-cells: hide;），也就是下面的样子。（我使用的一直是class类，所以在html里面也需要在table里面的class中更改名字！！！）
.emp{
/*默认情况下，空单元格是有边框的*/
/* empty-cells: show; */
/* 把空单元格隐藏起来 */
empty-cells: hide;
}
7.4 多媒体的添加与美化
7.4.1.<embed>标签的使用
这个标签功能很多，可以说是万能标签。因为它可以引用音频，动画，视频等。这个标签的好处就是“万能”，但是它也有一个缺点，
（阳春三月，没有显示，是因为没有flash插件，这个不是<embed></embed>标签的问题，是因为HTML标签有新增）
<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>标签的使用
想必一定会有人用这个标签的时候发现音频不显示，因为它已经被淘汰了。之所以会存在，是因为会有些“老人”曾经会留下这种代码。我们需要看懂，所以就存在了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
div{
margin: 10px;
border: 5px solid #000000;
}
</style>
</head>
<body>
<div>
<h2>童话镇-背景音乐</h2><!-- 旧的书写格式 -->
<bgsound src="media/童话镇.mp3" loop="-1"></bgsound>
</div>
<div>
<h2>童话镇-背景音乐</h2><!-- 我们可以使用这种新的 -->
<embed src="media/童话镇.mp3" loop="-1"></embed>
</div>
</body>
</html>
7.4.3.HTML5新增的多媒体标签
<embed>...</embed>在上面有说部分功能因为HTML新增，而且新电脑没有flash插件让它无法显示，下面就是它们专门的标签。
请注意，两个标签中均需要controls="controls"存在，不然没有用。
7.4.3.1.<audio>标签
<h1>audio标签 铃铛</h1>
<audio src="media/铃铛.wav" controls="controls"></audio>
7.4.3.2.<video>标签
<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: #e0ffff;
color: #ff0000;
margin: 20px;
padding: 10px 15px;
border-radius: 10px;
}
a:link,a:visited{
box-shadow: 6px 6px 10px #000000;
}
a:hover{
font-size: 14px;
}
a:active{
font-size: 13px;
box-shadow: -5px -5px 10px #000000;
}
h3{
color: #a52a2a;
}
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: #a52a2a;
}
</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/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/铃铛.mp3" controls="controls" loop="loop"></audio>
</div>
</div>
</body>
</html>结果示例
扫一扫
954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
