1.利用CSS技术，结合表格和列表，制作并美化“翡翠阁”页面。
参考代码如下：
<!DOCTYPE html>
<html>
<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>
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
