七、利用CSS和多媒体美化页面的习题
题目一：
利用CSS技术，结合表格和列表，制作并美化 “ 翡翠阁 ”页面。运行效果如下
运行效果：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>翡翠阁</title>
<style type="text/css">
#whole{
text-align: center;
}
h2{
background-image: url(img/cap.jpg);
background-repeat: no-repeat;
background-position: center;
}
table{
border: 2px solid black;
margin: auto;
}
.top{
border-collapse: separate;
border-spacing: 15px 20px;
}
img{
border: 2px solid black;
}
</style>
</head>
<body>
<div id="whole">
<caption>
<h2>翡翠阁</h2>
</caption>
<div>
<table class="top">
<tr>
<td><img src="img/li1.jpg"/></td>
<td><img src="img/li2.jpg"/></td>
<td><img src="img/li3.jpg"/></td>
<td><img src="img/li4.jpg"/></td>
</tr>
<tr>
<td>翡翠项链坠子<br />￥1500元</td>
<td>羊腊玉戒指<br />￥2300元</td>
<td>紫玉手镯<br />￥2880元</td>
<td>羊头黄玉<br />￥999元</td>
</tr>
<tr>
<td><img src="img/li5.jpg"/></td>
<td><img src="img/li6.jpg"/></td>
<td><img src="img/li7.jpg"/></td>
<td><img src="img/li8.jpg"/></td>
</tr>
<tr>
<td>翡翠挂件<br />￥1800元</td>
<td>翡翠蝴蝶胸扣<br />￥3300元</td>
<td>翡翠耳坠<br />￥2380元</td>
<td>翡翠白金镯子<br />￥9999元</td>
</tr>
</table>
</div>
</div>
</body>
</html>代码讲解
-
它防止了相邻单元格的边框合并在一起。每个单元格的边框都会独立显示，而不是与其他单元格的边框合并成一条线。border-collapse: separate; -
这个属性定义了相邻单元格边框之间的距离。这个属性仅在border-spacing: 15px 20px;border-collapse设置为separate时才有效。border-spacing接受两个值： - 第一个值（15px）定义了单元格边框的水平间距，即行与行之间的边框距离。
- 第二个值（20px）定义了单元格边框的垂直间距，即列与列之间的边框距离。
题目二：
用表格布局页面，利用CSS技术，及添加多媒体，制作并美化“ 心灵之音 ”页面，运行效果如下
运行效果：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>心灵之音</title>
<style type="text/css">
body{
background-image: url(img2/bg-0.jpg);
}
table{
border-collapse: collapse;
margin: auto;
background-color: white;
}
table,tr,td{
border: 1px solid black;
}
.left{
writing-mode: vertical-lr;
text-align: center;
font-size: 40px;
letter-spacing: 10px;
color: royalblue;
}
a{
color: black;
}
.bottom1{
text-align: center;
background-color: burlywood;
}
.bottom2{
background-color: burlywood;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class="left" rowspan="2">心灵之音</td>
<td>
<img src="img2/list.jpg"/>
<ol type="1">
<li>陈小朵-匆匆那年</li>
<audio src="media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio>
<li>陈颖恩-那些你很冒险的梦</li>
<audio src="media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio>
<li>黄霄雲-左手指月</li>
<audio src="media/黄霄雲 - 左手指月.mp3" controls="controls"></audio>
<li>李健 - 抚仙湖</li>
<audio src="media/李健 - 抚仙湖.mp3" controls="controls"></audio>
</ol>
</td>
</tr>
<tr>
<td class="bottom1">
<a href="#">流行音乐</a>
 <a href="#">摇滚音乐</a>
 <a href="#">现代音乐</a>
 <a href="#">民族音乐</a>
<br />
<a href="#">蓝调歌曲</a>
 <a href="#">管弦乐队</a>
 <a href="#">合奏乐</a>
 <a href="#">更多···</a>
</td>
</tr>
<tr>
<td class="bottom2" colspan="2">
<center>版权所有©心灵之音网站</center>
</td>
</tr>
</table>
</div>
</body>
</html>代码讲解
-
它的作用是让一个单元格跨越（合并）多行。简单来说，就是使一个单元格占据表格中垂直方向上的多行位置。在本例中跨越2行合并。rowspan="2" -
当<ol type="1">type="1"时，表示有序列表的编号将以阿拉伯数字（1、2、3、4 等）显示。 -
文本垂直排列，但是是从右向左（right - to - left）排列。writing-mode的属性是文本的流向和方向。writing-mode: vertical-lr;
原文地址：https://blog.csdn.net/2303_81737387/article/details/143729431
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！