第七章 利用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>
相关推荐
灵犀学长8 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享16 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM23 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试