第七章 利用CSS和多媒体美化页面习题

1.利用CSS技术,结合表格和列表,制作并美化"翡翠阁"页面

代码:

html 复制代码
<!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技术,及添加多媒体,制作并美化"心灵之音"页面

代码:

html 复制代码
<!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>
相关推荐
pe7er7 分钟前
使用CDN、ImportMap增强Vue playground
前端
ze_juejin17 分钟前
Angular的懒加载由浅入深
前端
JSON_L18 分钟前
Vue 详情模块 4
前端·javascript·vue.js
码间舞24 分钟前
什么是Tearing?为什么React的并发渲染可能会有Tearing?
前端·react.js
gnip36 分钟前
做个交通信号灯特效
前端·javascript
小小小小宇36 分钟前
Webpack optimization
前端
尝尝你的优乐美38 分钟前
前端查缺补漏系列(二)JS数组及其扩展
前端·javascript·面试
咕噜签名分发可爱多40 分钟前
苹果iOS应用ipa文件安装之前?为什么需要签名?不签名能用么?
前端
她说人狗殊途1 小时前
Ajax笔记
前端·笔记·ajax
yqcoder1 小时前
33. css 如何实现一条 0.5 像素的线
前端·css