«

好看的商品展示页面html代码

ls4.cn • 2024-04-19 00:30 • 23 次点击 • 源码下载

无聊在其他站看到一个商品展示页面`就拔下来了

``html
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
        }  

        .container {  
            max-width: 1200px;  
            margin: 0 auto;  
            padding: 20px;  
            box-sizing: border-box;  
        }  

        .product {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            text-align: center;  
            background-color: #f5f5f5;  
            padding: 20px;  
            border-radius: 10px;  
            margin-bottom: 20px;  
        }  

        .product-image {  
            width: 100%;  
            max-width: 400px;  
            height: auto;  
            margin-bottom: 20px;  
        }  

        .product-title {  
            font-size: 24px;  
            font-weight: bold;  
            margin-bottom: 10px;  
        }  

        .product-info {  
            font-size: 16px;  
            margin-bottom: 20px;  
        }  

        .product-price {  
            font-size: 20px;  
            font-weight: bold;  
            color: #ff0000;  
        }  

        .product-buttons {  
            display: flex;  
            justify-content: center;  
            margin-top: 20px;  
        }  

        .product-button {  
            display: inline-block;  
            padding: 10px 20px;  
            background-color: #007bff;  
            color: #fff;  
            border-radius: 5px;  
            text-decoration: none;  
            margin-right: 10px;  
        }  

        @media (max-width: 600px) {  
            .product {  
                flex-direction: column;  
            }  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="product">  
            <img src="https://img.alicdn.com/bao/uploaded/i4/2777982817/O1CN01LGg6pe1WgEdvWxiLH_!!0-item_pic.jpg" class="product-image" alt="商品图片">  
            <h2 class="product-title">拍4发5！卡宾熊猫耳酥共130g*5袋</h2>  
            <div class="product-info">  
                <p>★深夜福利：先抢券，0点下单★</p>  
                <p>【卡宾熊】猫耳朵休闲小零食</p>  
                <p>入口嘎嘣脆，口感劲道香脆</p>  
                <p>好吃不腻，休闲追剧必备零食</p>  
            </div>  
            <div class="product-price">  
                <span>原价：¥<span id="originalPrice">19.90</span></span>  
                <span>现价：¥<span id="discountPrice">13.90</span></span>  
            </div>  
            <div class="product-buttons">  
                <a href="#" class="product-button">查看详情</a>  
                <a href="https://uland.taobao.com/quan/detail?sellerId=2777982817&activityId=dcc6e28f920b4877843636ea75ef3904" class="product-button" target="_blank">领取优惠券</a>  
            </div>  
        </div>  
    </div>  

    <script>  
        // 根据提供的数据动态设置
```

扫描二维码，在手机上阅读

推荐阅读：