利用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