第七章 利用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>
相关推荐
excel2 分钟前
彻底理解缓冲区:从概念、背压到可运行的 Fetch 流式示例
前端
小蜜蜂嗡嗡2 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说4 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh8 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴9 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_9 小时前
TailWind CSS
前端·css·postcss
烛阴10 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧10 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment11 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点12 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端