利用CSS技术,结合表格和列表,制作并美化“翡翠阁”页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>翡翠阁</title>
<style type="text/css">
.cap{
caption-side: top;
}
table{
border: 1px solid black;
border-spacing:20px
}
img{
width: 160px;
height: 160px;
border: 1px solid black;
}
li{
list-style-type:none;
background: url(img/cap.jpg)no-repeat;
border: 100px;
text-align: center;
background-position: center;
background-size:23%;
}
</style>
</head>
<body>
<table>
<ol>
<li><h2>翡翠阁</h2></li>
</ol>
<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 align="center">
<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 align="center">
<td>翡翠挂件<br/>¥1800元</td>
<td>翡翠蝴蝶胸扣<br/>¥3300元</td>
<td>翡翠挂件<br/>¥2380元</td>
<td>翡翠白金镯子<br/>¥9999元</td>
</tr>
</table>
</body>
</html>
标签:翡翠,第七章,img,1px,black,background,习题,border From: https://blog.csdn.net/2303_80888494/article/details/143254212