第七章 利用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>
相关推荐
程序员爱钓鱼2 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel9 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233313 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts