css商品展示 css商品列表
Instagram潮流分享找貨選品2025-07-115510
為了實現(xiàn)CSS商品展示，你可以使用以下代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品展示</title>
<style>
.product {
display: inline-block;
width: 200px;
height: 200px;
background-color: #f1f1f1;
margin: 10px;
text-align: center;
font-size: 14px;
line-height: 200px;
}
.product img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品圖片">
<p>商品名稱：蘋果</p>
<p>價格：5元</p>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品圖片">
<p>商品名稱：香蕉</p>
<p>價格：3元</p>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品圖片">
<p>商品名稱：橙子</p>
<p>價格：4元</p>
</div>
</body>
</html>這段代碼創(chuàng)建了一個簡單的HTML頁面，包含三個商品展示。每個商品都是一個.product類的元素，包含一個圖片和一個標題。圖片寬度設置為200px，高度自適應。標題文本居中顯示，字體大小為14px，行高為200px。
本文內(nèi)容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Instagram潮流分享
