做出如图的效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品展示</title>
<style type="text/css">
body {
text-align: center; /* 让整个页面内容居中 */
font-family: Arial, sans-serif; /* 设置字体 */
}
.title {
background-image: url('img/cap.jpg'); /* 标题背景图片 */
height: 100px; /* 标题高度 */
background-size: 30%; /* 背景图片覆盖整个标题区域 */
background-position: center; /* 背景图片居中显示 */
margin: 0 auto; /* 让标题居中 */
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中标题内容 */
justify-content: center; /* 水平居中标题内容 */
color: white; /* 文字颜色 */
text-shadow: 2px 2px 4px #000000; /* 文字阴影 */
}
.title h1 {
margin: 0; /* 移除标题的默认外边距 */
}
.table-container {
display: inline-block; /* 让表格容器成为行内块元素，以便居中 */
text-align: left; /* 表格内容左对齐 */
}
.one {
border-collapse: separate;
border-spacing: 10px 50px;
width: 80%; /* 表格宽度 */
margin: 20px auto; /* 外边距，实现居中 */
}
table, td {
border: 1px solid #ddd; /* 边框颜色 */
}
td {
background-color: white; /* 单元格背景颜色 */
padding: 15px; /* 单元格内边距 */
text-align: center; /* 文本居中 */
}
img {
width: 150px; /* 图片宽度 */
height: auto; /* 图片高度自适应 */
margin-bottom: 10px; /* 图片与文本之间的间距 */
}
p {
margin: 0; /* 移除段落的默认外边距 */
font-size: 14px; /* 字体大小 */
color: #333; /* 字体颜色 */
}
</style>
</head>
<body>
<div class="title">
<h1>翡翠阁</h1>
</div>
<div class="table-container">
<table class="one">
<tr>
<td>
<img src="img/li1.jpg" alt="翡翠项链嘴子"/>
<p>翡翠项链嘴子<br />$1500</p>
</td>
<td>
<img src="img/li2.jpg" alt="羊脂玉戒指"/>
<p>羊脂玉戒指<br />$2300</p>
</td>
<td>
<img src="img/li3.jpg" alt="紫羽手链"/>
<p>紫羽手链<br />$2880</p>
</td>
<td>
<img src="img/li4.jpg" alt="羊头黄玉"/>
<p>羊头黄玉<br />$6699</p>
</td>
</tr>
<tr>
<td>
<img src="img/li5.jpg" alt="翡翠挂件"/>
<p>翡翠挂件<br />$1260</p>
</td>
<td>
<img src="img/li6.jpg" alt="翡翠蝴蝶胸口扣"/>
<p>翡翠蝴蝶胸口扣<br />$1254</p>
</td>
<td>
<img src="img/li7.jpg" alt="翡翠耳坠"/>
<p>翡翠耳坠<br />$6650</p>
</td>
<td>
<img src="img/li8.jpg" alt="翡翠项白金镯子"/>
<p>翡翠项白金镯子<br />$9999</p>
</td>
</tr>
</table>
</div>
</body>
</html>