css商品列表頁 css設(shè)置產(chǎn)品項(xiàng)的樣式
Wildberries自然之選找貨選品2025-05-272850
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表頁</title>
<style>
body {
font-family: Arial, sans-serif;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.product-card {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
text-align: center;
}
.product-name {
font-size: 1.5em;
font-weight: bold;
}
.product-price {
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="product-list">
<div class="product-card">
<img src="https://via.placeholder.com/300x200" alt="商品圖片">
<h2 class="product-name">商品名稱</h2>
<p class="product-price">價(jià)格:¥99.00</p>
</div>
<!-- 更多商品卡片... -->
</div>
</body>
</html>
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。