<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>翡翠阁</title>
<style type="text/css">
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2em;
color: #4CAF50;
margin-bottom: 20px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.product-item {
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
transition: transform 0.3s ease;
}
.product-item img {
width: 100px;
height: 100px;
object-fit: cover;
}
.product-item p {
margin: 10px 0;
font-size: 1em;
color: #333;
}
.product-item:hover {
transform: scale(1.05);
border-color: #4CAF50;
}
</style>
</head>
<body>
<div class="container">
<h1>翡翠阁</h1>
<img src="img/cap.jpg" alt="翡翠阁">
<div class="product-grid">
<div class="product-item">
<img src="img/li1.jpg" alt="毒爱项链">
<p>毒爱项链子</p>
<p>¥1500元</p>
</div>
<div class="product-item">
<img src="img/li2.jpg" alt="羊脂玉戒">
<p>羊脂玉戒子</p>
<p>¥2300元</p>
</div>
<div class="product-item">
<img src="img/li3.jpg" alt="紫玉手镯">
<p>紫玉手镯</p>
<p>¥2880元</p>
</div>
<div class="product-item">
<img src="img/li4.jpg" alt="牛头翡翠">
<p>牛头美玉</p>
<p>¥999元</p>
</div>
<div class="product-item">
<img src="img/li5.jpg" alt="毒爱挂件">
<p>毒爱挂件</p>
<p>¥1800元</p>
</div>
<div class="product-item">
<img src="img/li6.jpg"alt="毒爱蝴蝶扣">
<p>毒爱蝴蝶扣</p>
<p>¥3500元</p>
</div>
<div class="product-item">
<img src="img/li7.jpg" alt="翡翠耳坠">
<p>翡翠耳坠</p>
<p>¥2380元</p>
</div>
<div class="product-item">
<img src="img/li8.jpg" alt="毒爱白金">
<p>毒爱白金镯子</p>
<p>¥9999元</p>
</div>
</div>
</div>
</body>
</html>