首页 > 其他分享 >第七章作业1

第七章作业1

时间:2024-10-24 20:18:34浏览次数:13  
标签:翡翠 center 作业 100px height 第七章 text border

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>翡翠阁</title>
		<style type="text/css">
			.wz{
				height: 100px;
				line-height: 100px;
				text-align: center;
				background: url(img/cap.jpg) no-repeat;
				background-position: center;
			}
			.wz2{
				width:700px;
				height:550px;
				border:1px solid;
				margin:0 auto;
			}
			td{
				height:100px;
				text-align: center;
			}
			img{
				width:150px;
				height:140px;
				margin: 10px 0px 0 17px;
				border:1px solid;
			}
			
		</style>
		
	</head>
	<body>
		<div class="wz"><h2>翡翠阁</h2></div>
		<div class="wz2">
			<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 />¥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>
	</body>
</html>

标签:翡翠,center,作业,100px,height,第七章,text,border
From: https://blog.csdn.net/2301_79438088/article/details/143218596

相关文章