css商品展示css商品列表

货源人·学电商2个月前 (07-21)电商货源

css商品展示 css商品列表

为了实现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>

这段代码创建了一个简单的HTML页面，包含三个商品展示。每个商品都是一个.product类的元素，包含一个图片和一个标题。图片宽度设置为200px，高度自适应。标题文本居中显示，字体大小为14px，行高为200px。