使用CSS3制作一个简单的商品列表、浮动布局

很困的程序媛

已于 2022-10-31 11:13:19 修改

阅读量2.8k

点赞数 4

分类专栏： css 文章标签： css3 css html5

于 2022-03-21 00:50:16 首次发布

本文链接：https://blog.csdn.net/m0_67372185/article/details/123625522

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

 <style>

        *{

            margin: 0px;

            padding: 0px;

            list-style: none;

        }

        .box{

            width: 1365px;

            height: 490px;

            border: 1px solid rgb(201,201,201);

            margin: 0px auto;

            margin-top: 20px;

        }

        .h2{

            color: red;

            border-left: 3px solid red;

            padding-left: 10px;

            margin-left: 25px;

            margin-top: 25px;

        }

        .list_1{

            width: 1180px;

           margin: auto;

           clear: both;

        }

        .ul_li{

            size: 8px;

            color: rgb(165,172,195);

            float: left;

            padding: 4px;

        }

        .li_1{

            clear: both;

        }

        .list_2{

            width: 1300px;

            height: 380px;

           margin: auto;

           clear: both;

        }

        .li_2{

            width: 238px;

            height: 370px;

            float: left;

            padding: 10px;

        }

        .pho_1{

            width: 240px;

            height: 195px;

            text-align: center;

        }

        .p_1{

            font-family: 微软雅黑;

            font-size: 15px;

        }

        .p_2{

            font-size: 10px;

            color: rgb(165,172,195);

        }

        .pho_2{

            width: 35px;

            height: 15px;

        }

        .p_3{

            color: red;

            font-size: 15px;

            display: inline-block;

        }

        .p_4{

            color: rgb(165,172,195);

            font-size: 12px;

            display: inline-block;

            text-decoration: line-through;

        }

        .p_5{

            color: rgb(165,172,195);

            font-size: 12px;

            display: inline-block;

            margin-left: 90px;

        }

    </style>

</head>

<body>

    <div class="box">

        <h2 class="h2">热卖单品</h2><br>

        <ul class="list_1">

            <li class="ul_li">客厅灯</li>

            <li class="ul_li">床垫</li>

            <li class="ul_li">电脑箱</li>

            <li class="ul_li">窗帘</li>

            <li class="ul_li">男内裤</li>

            <li class="ul_li">鞋柜</li>

            <li class="ul_li">沙发</li>

            <li class="ul_li">收纳箱</li>

            <li class="ul_li">茶几</li>

            <li class="ul_li">抱枕</li>

            <li class="ul_li">椅子</li>

            <li class="ul_li">电脑桌</li>

            <li class="ul_li">拉杆箱</li>

            <li class="ul_li">浴室柜</li>

            <li class="ul_li">运动鞋</li>

            <li class="ul_li">电风扇</li>

            <li class="ul_li">衣柜</li>

            <li class="ul_li">面膜</li>

            <li class="ul_li">风扇</li>

            <li class="ul_li">充电宝</li>

            <li class="ul_li">男T恤</li>

            <li class="ul_li">耳机</li>

            <li class="ul_li">拖鞋</li>

            <li class="ul_li">零食</li>

            <li class="ul_li">男鞋</li>

            <li class="li_1"></li>

        </ul><hr>

        <ul class="list_2">

            <li class="li_2"><img class="pho_1" src="image/pic.1.webp" alt=""><p class="p_1"><br>泰迪熊正品&nbsp;毛衣熊公仔&nbsp;新品&nbsp;女生生日礼物</p>

                <br><p class="p_2">评论&nbsp;255&nbsp;收藏&nbsp;604</p>

                 <br><p class="p_3">¥96</p>

                  <p class="p_4">¥472</p>

                   <p class="p_5">月销82笔</p></li>

            <li class="li_2"><img class="pho_1"src="image/pic.2.webp" alt=""><p class="p_1"><br>幼儿园数字字帖描红本&nbsp;儿童凹槽写字本练字</p>

                <br><p class="p_2">评论&nbsp;255&nbsp;收藏&nbsp;604</p>

                 <br><p class="p_3">¥13.8</p>

                  <p class="p_4">¥68</p>

                   <p class="p_5">月销82笔</p></li>

            <li class="li_2"><img class="pho_1"src="image/pic.3.webp" alt=""><p class="p_1"><br>磁性画板灰色家用写字板黑板墙涂鸦板多功能</p>

                <br><p class="p_2">评论&nbsp;0&nbsp;收藏&nbsp;3320</p>

                 <br><p class="p_3">¥19.9</p>

                  <p class="p_4">¥39</p>

                   <p class="p_5">月销51笔</p></li>

            <li class="li_2"><img class="pho_1"src="image/pic.4.webp" alt=""><p class="p_1"><br>

                <img class="pho_2" src="image/包邮.png" alt="">逻辑思维训练机益智玩具创造力小学生早教机</p>

                <br><p class="p_2">评论&nbsp;0&nbsp;收藏&nbsp;80</p>

                 <br><p class="p_3">¥1499</p>

                  <p class="p_4">¥2508</p>

                   <p class="p_5">月销14笔</p></li>

            <li class="li_2"><img class="pho_1"src="image/pic.5.webp" alt=""><p class="p_1"><br>儿童三拉杆轮书包小学生男孩6-12周岁女孩1-</p>

                <br><p class="p_2">评论&nbsp;2143&nbsp;收藏&nbsp;29856</p>

                 <br><p class="p_3">¥138</p>

                  <p class="p_4">¥629</p>

                   <p class="p_5">月销710笔</p></li>

        </ul>

    </div>

</body>