第七章作业1-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_81317864/article/details/143221009

1.利用CSS技术，结合表格和列表，制作并美化“翡翠阁”页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>翡翠阁</title>
		<style type="text/css">
			#all{
				text-align: center;
			}
			h2{
				background-image: url(img/cap.jpg);
				background-repeat: no-repeat;
				background-position: center;
			}
			table{
				border: 2px solid black;
				margin: auto;
			}
			.first{
				border-collapse: separate;
				border-spacing: 15px 20px;
			}
			img{
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<caption>
				<h2>翡翠阁</h2>
			</caption>
			<div>
				<table class="first">
					<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 />￥999元</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>
		</div>
	</body>
</html>

第七章 作业1

第七章作业1