html 常见的电商产品的展示

最新推荐文章于 2024-04-29 22:14:03 发布

快乐加倍！

最新推荐文章于 2024-04-29 22:14:03 发布

阅读量3.3k

点赞数 7

分类专栏：前端学习笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_63159221/article/details/128276045

版权

前端学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

做电商网站时，避免不了的就是产品的展示，下面是我用html,css代码写的简单的电商产品的展示。上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            display: block;
            /*转化为块级元素，因为a标签不能包含行内元素*/
        }

        .product {
            margin: 50px auto 0px;
            width: 255px;
            height: 353px;
            /* background: red; */
            border: 1px solid #ddd;
            text-align: center;
        }

        .product p.describe {
            margin-top: 26px;
            font-family: MicrosoftYaHei;
            color: #89756a;
        }

        .product-text {
            height: 115px;
            background: #f8f8f8;
            margin-top: 20px;
        }

        .product .product-text .product-mark {
            font-size: 0px;
            /*用于消除图片间隙*/
        }

        .product .product-text .product-mark img {
            margin: 14px 2px 0px 2px;
        }

        .product-text h3 {
            font-size: 20px;
            font-weight: normal;
            margin-top: 18px;
            color: #333;
        }

        .product-text p {
            font-size: 20px;
            color: #ad322b;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="product">
        <a href="http://www.icodingedu.com">
            <img src="../images/kettle.png" alt="水壶" style="margin-top: 20px">
            <p class="describe">快速煮水，安心引用</p>
            <div class="product-text">
                <div class="product-mark">
                    <img src="../images/live.png" alt="直播中">
                    <img src="../images/odds.png" alt="特惠">
                    <img src="../images/30day.png" alt="30天保价">
                    <img src="../images/server.png" alt="售后服务">
                </div>
                <h3>云米水电壶</h3>
                <p>￥65</p>
            </div>
        </a>
    </div>
</body>

</html>

附上效果图