第七章 利用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 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见17 分钟前
彻底搞懂前端环境变量使用和原理
前端
小王码农记29 分钟前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥37 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x41 分钟前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
麻花20131 小时前
WPF里面的C1FlexGrid表格控件添加RadioButton单选
java·服务器·前端
理想不理想v1 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试
羊子雄起1 小时前
CKEditor前端样式和编辑器的样式不一致的问题
前端·编辑器
聊无生2 小时前
JavaSrcipt 函数高级
开发语言·前端·javascript
xiyusec2 小时前
HTML基础
前端·html