第七章 利用CSS和多媒体美化页面习题
1.利用CSS技术，结合表格和列表，制作并美化“翡翠阁”页面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>翡翠阁</title>
<style type="text/css">
.all{
width: 690px;
height: 530px;
margin: 0 auto;
border: 1px solid black;
}
.text{
height: 90px;
line-height: 90px;
background: url("img/cap.jpg")no-repeat;
background-position: center;
}
td{
height: 100px;
text-align: center;
}
img{
width: 150px;
height: 140px;
margin: 10px 0px 0px 17px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="text">
<h1 align=center>翡翠阁</h1>
</div>
<div class="all">
<table>
<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/>¥990元</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>
</body>
</html>
2.用表格布局页面，利用CSS技术，及添加多媒体，制作并美化“心灵之音”页面
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心灵之音</title>
<style type="text/css">
body{
background: url(img/bg-0.jpg) no-repeat;
}
.ab{
width: 500px;
height: 724px;
border: 2px solid black;
border-bottom: 4px solid black;
float: left;
margin-left: 400px;
background-color: white;
}
h1{
text-align: center;
font-size: 55px;
writing-mode: vertical-lr;
border: 2px solid black;
border-bottom: 3px solid black;
width: 100px;
height: 670px;
float: left;
margin: 0;
}
.a{
width: 393.5px;
height: 600px;
border: 2px solid black;
float: right;
}
.b{
float: right;
width: 393.5px;
height: 67.1px;
border: 2px solid black;
border-bottom: 3px solid black;
background-color: burlywood;
}
a{
padding: 12px;
}
.c{
position: absolute;
top: 683.8px;
border: 2px solid black;
border-top: 0px;
border-bottom: 0;
width: 498px;
height: 50px;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="ab">
<div>
<div>
<h1>心灵之音</h1>
</div>
<div class="a">
<table>
<tr>
<td><img src="img/list.jpg" width="390px"/ ></td>
</tr>
<tr>
<td>
<p>1.陈小朵-匆匆那年</p>
</td>
</tr>
<tr>
<td>
<audio src="media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio>
</td>
</tr>
<tr>
<td>
<p>2.陈颖恩-那些你很冒险的梦</p>
</td>
</tr>
<tr>
<td>
<audio src="media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio>
</td>
</tr>
<tr>
<td>
<p>3.黄霄雲-左手指月</p>
</td>
</tr>
<tr>
<td>
<audio src="media/黄霄雲 - 左手指月.mp3" controls="controls"></audio>
</td>
</tr>
<tr>
<td>
<p>4.李健-抚仙湖</p>
</td>
</tr>
<tr>
<td>
<audio src="media/李健 - 抚仙湖.mp3"controls="controls"></audio>
</td>
</tr>
</table>
</div>
<div class="b">
<p>
<a href="#">流行音乐</a>
<a href="#">摇滚音乐</a>
<a href="#">现代音乐</a>
<a href="#">民族音乐</a>
<a href="#">蓝调歌曲</a>
<a href="#">管弦乐队</a>
<a href="#">合奏乐</a>
<a href="#">更多...</a>
</p>
</div>
</div>
<div class="c">
<h3 align="center">版权所有@心灵之音网站</h3>
</div>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/KO2131855283/article/details/143692018
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！