1.利用CSS技术，结合表格和列表，制作并美化“翡翠阁”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>翡翠阁</title>
<link rel="stylesheet" href="css/243_1.css" type="text/css"/>
</head>
<body>
<div class="div1">
<caption><h6 class="empp">翡翠阁</h6></caption>
</div>
<div>
<table class="emp" id="font1">
<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></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>翡翠项链坠子<br/>￥1500元</td>
<td>羊脂玉戒指<br/>￥2300元</td>
<td style="color: purple;">紫玉手链<br/>￥2880元</td>
<td>羊头黄玉<br/>￥999元</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></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>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>CSS代码如下：
h6{
text-align: center;
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
background-image:url(../img/cap.jpg) ;
}
table,td{
border: none;
}
.emp{
border-collapse: separate;
empty-cells: hide;
}
.empp{
border-collapse: separate;
empty-cells: hide;
}
img{
width: 60px;
height: 60px;
border: 1px solid #000000;
}
.photo{
width:100px;
height: 50%;
padding-left: 85px;
padding-top: 40px;
border: none;
}
#font1{
font-size: 6px;
font-family: heiti;
text-align: center;
font-weight: 400;
}
div{
width: 266px;
border: 1px solid #000000;
position: relative;
}
.div1{
border: none;
}
标签：翡翠,多媒体,width,background,font,border,CSS,页面 From： https://blog.csdn.net/2302_80572539/article/details/143237821