第三次作业 --- 仿写电商页面

最新推荐文章于 2024-07-17 14:13:18 发布

丶柊丶

最新推荐文章于 2024-07-17 14:13:18 发布

阅读量187

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_83911548/article/details/139898301

版权

（仅为样式仿写，不实现功能）

1.页面1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿写pdd电商页面1---首页</title>
</head>
<style>
     *{
            margin: 0 auto;
        }

        div,span{
            /* border: 1px solid red; */
            color: #6c6c6c;
        }

        li{
            display: inline-block;
            list-style-type:none;
        }

        /* 1.顶部栏 */
        .top{
            height: 110px;
            width: 1980px;
            position:fixed;
            top: 0px;
            background: white;
            z-index: 1;
        }

        .top > div{
            margin: 0px 10px;
            height: 105px;
            border-bottom: 5px solid rgb(255, 0, 0);
            position: relative;
        }

        .top-print{
            position: absolute;
            top:15px;
            
        }

        .top-text{
            position: absolute;
            top:40px;
            left: 170px;
        }

        .top-text a,.navigation-text a,.container3 a{
            text-decoration: none;
            
        }

        /* 2.内容 */
        .container{
            width: 1700px;
            position: absolute;
            top: 145px;
        }
        
        .container1{
            height: 30px;
            border-bottom: 1px solid #6c6c6c;

        }

        .container1 > div{
            color: black;
            display: inline-block;
            font-size: 20px;
        }

        .container2{
            position: absolute;
            left: 200px;
        }
    
        .container3{
            position: absolute;
            right: 330px;
        }

        .box{
            width: auto;
            height: auto;

            margin-top: 20px;

            position: relative;
        }

        .box > div{
            top: 145px;
            /* border: 1px solid black; */
            width: auto;
            
        }
        
        .box1{
            margin-left: 200px;
        }

        .box2{
            margin-left:178px;
        }


        .box2 > div{
            display: inline-block;
            margin:  20px 21px;
        }

        /* 3.底部 */
        .foot{
            height: 200px;
            width: 100%;

            position: absolute;
            top: 800px;

            background: #3f3e3e;
        }

        .foot1,.foot2,.foot3,.foot4 {
            margin-top: 15px;
            text-align: center;
        }

         .foot span{
            color: #cbcbcb;
        }
</style>
<body>
     <!-- 1.顶部栏 -->
     <div class="top">
        <div clsass="top1">
            <div class="top-print"><img src="https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png" width="180px" height="63px"></div>
            <ul class="top-text">
                <li><a href=""><span>首页|</span></a></li>
                <li><a href=""><span>拼多多商家入驻|</span></a></li>
                <li><a href=""><span>热点资讯|</span></a></li>
                <li><a href=""><span>社会招聘|</span></a></li>
                <li><a href=""><span>校园招聘|</span></a></li>
                <li><a href=""><span>招采平台|</span></a></li>
                <li><a href=""><span>帮助中心|</span></a></li>
                <li><a href=""><span>举报平台|</span></a></li>
                <li><a href=""><span>分享赚钱|</span></a></li>
                <li><a href=""><span>查快递</span></a></li>
            </ul>
        </div>
    </div>

    <!-- 2.内容 -->
    <div class="container"> 
        <div class="container1">
            <div class="container2">精选活动</div>
            <div class="container3"><a href=""><span>更多&gt;</span></a></div>
        </div>
        <div class="box"> 
            <div class="box1"><a href=""><img src="https://cdn.pinduoduo.com/upload/home/img/index/seckill_v2.jpg"></a></div>
            <div class="box2">
                <div><a href=""><img src="https://cdn.pinduoduo.com/upload/home/img/index/sale_v2.jpg"></a></div>
                <div><a href=""><img src="https://cdn.pinduoduo.com/upload/home/img/index/supermarket_v2.jpg"></a></div>
                <div><a href=""><img src="https://cdn.pinduoduo.com/upload/home/img/index/download.jpg"></a></div>
            </div>
            
        </div>
    </div>

    <!-- 3.底部 -->
    <div class="foot">
        <div class="foot1">
            <span>
                Copyright 2015-2024  pinduoduo.com 版权所有
                (增值电信业务经营许可证: 沪B2-20170215)
            </span>
        </div>
        <div class="foot2">
            <span>
                互联网药品信息服务资格证书：（沪）-经营性-2024-0019 | 网络文化经营许可证：沪网文 [2022] 3418-243 号 | 
                药品网络交易服务第三方平台备案: (沪) 网药平台备字〔2023〕第000006-001号
            </span>
        </div>
        <div class="foot3">
            <div></div>
            <span>沪公网安备 31010502000392号</span>
            <span>（沪）网械平台备字[2018]第00003号</span>
            <span>沪ICP备15010535号-13 | 营业执照</span>
        </div>
        <div class="foot4">
            <span>全国旅游服务热线：12301</span>
        </div>
</body>
</html>

运行截图

2.页面2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿写拼多多页面2</title>
    <style>
        *{
            margin: 0 auto;
        }

        div,span{
            /* border: 1px solid red; */
            color: #6c6c6c;
        }

        li{
            display: inline-block;
            list-style-type:none;
        }

        /* 1.顶部栏 */
        .top{
            height: 110px;
            width: 1980px;

            position:fixed;
            top: 0px;
            background: white;
            z-index: 1;
        }

        .top > div{
            margin: 0px 10px;
            height: 105px;
            /* border: 1px solid black; */
            position: relative;
        }

        .top-print{
            position: absolute;
            top:15px;
            
        }

        .top-text{
            position: absolute;
            top:40px;
            left: 170px;
        }

        .top-text a,.navigation-text a{
            text-decoration: none;
            
        }
        /* 2.导航栏 */
        .navigation{
            margin-top: 110px;
            height: 30px;
            width: 100%;
            background: red;
            position: fixed;
            opacity: 1;
            z-index: 1;
        }

        .navigation-text > ul{
            width: 200px;
            margin-left: 0px;
            color: rgb(255, 255, 255);
            /* border: 1px solid black; */
            position: relative;
            top: 5px;
            
        }

        .navigation-text  a:hover{
            background: rgb(2, 2, 43);
        }

        .navigation-text span{
            
            color: white;
        }
        
        /* 3.内容 */
        .container{
            height: 2000px;
            width: 100%;

            position: absolute;
            top: 145px;
        }

        .box{
            float: left;
            position: relative;
            margin-left: 50px;
            display: grid;


            grid-template-columns:repeat(4,2fr);
            grid-template-rows: repeat(4,2fr);
            

            grid-gap: 10px;
            
        }

        .box > div{
            /* border: 1px solid black; */
            width: 266px;
            
        }

        .box img{
            margin: 10px 33px;
        }

        .box-text{
            padding: 15px;
            color: #686868;
        }

        .box-price1{
            margin-left: 20px;
            font-size: 22px;
        }

        .box-price2{
            color: #cbcbcb;
            font-size: 16px;
            text-decoration: line-through;
        }

        .box-price3{
            color: #cbcbcb;
            font-size: 16px;
            margin-top: 5px;
            float: right;
        }
        /* 4.底部 */
        .foot{
            height: 200px;
            width: 100%;

            position: absolute;
            top: 2000px;

            background: #3f3e3e;
        }

        .foot1,.foot2,.foot3,.foot4 {
            margin-top: 15px;
            text-align: center;
        }

         .foot span{
            color: #cbcbcb;
        }
    </style>

</head>
<body>
    <!-- 1.顶部栏 -->
    <div class="top">
        <div clsass="top1">
            <div class="top-print"><img src="https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png" width="180px" height="63px"></div>
            <ul class="top-text">
                <li><a href=""><span>首页|</span></a></li>
                <li><a href=""><span>拼多多商家入驻|</span></a></li>
                <li><a href=""><span>热点资讯|</span></a></li>
                <li><a href=""><span>社会招聘|</span></a></li>
                <li><a href=""><span>校园招聘|</span></a></li>
                <li><a href=""><span>招采平台|</span></a></li>
                <li><a href=""><span>帮助中心|</span></a></li>
                <li><a href=""><span>举报平台|</span></a></li>
                <li><a href=""><span>分享赚钱|</span></a></li>
                <li><a href=""><span>查快递</span></a></li>
            </ul>
        </div>
    </div>
    <!-- 2.导航栏 -->
    <div class="navigation">
       <div class="navigation-text">
            <ul>
                <li><a href=""><span>限时秒杀</span></a></li>
                <li><a href=""><span>9.9特卖</span></a></li>
                <li><a href=""><span>食品超市</span></li>
            </ul>
       </div>
    </div>
    <!-- 3.内容 -->
    <div class="container">
        <div class="box">
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div >
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
            <div>
                <img src="https://img.pddpic.com/gaudit-image/2024-06-11/eef3cec1a1b846df3a59b82b145a5615.jpeg">
                <div class="box-text">【正宗四川青脆脱骨李】新鲜空心土李子冰糖李孕妇水果批发包邮</div>
                <div>
                    <span class="box-price1">￥3.2</span>
                    <span class="box-price2">￥42</span>
                    <span class="box-price3">已拼1.5万+斤</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 4.底部 -->
    <div class="foot">
        <div class="foot1">
            <span>
                Copyright 2015-2024  pinduoduo.com 版权所有
                (增值电信业务经营许可证: 沪B2-20170215)
            </span>
        </div>
        <div class="foot2">
            <span>
                互联网药品信息服务资格证书：（沪）-经营性-2024-0019 | 网络文化经营许可证：沪网文 [2022] 3418-243 号 | 
                药品网络交易服务第三方平台备案: (沪) 网药平台备字〔2023〕第000006-001号
            </span>
        </div>
        <div class="foot3">
            <div></div>
            <span>沪公网安备 31010502000392号</span>
            <span>（沪）网械平台备字[2018]第00003号</span>
            <span>沪ICP备15010535号-13 | 营业执照</span>
        </div>
        <div class="foot4">
            <span>全国旅游服务热线：12301</span>
        </div>
    </div>
</body>
</html>

运行截图

3.页面3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿写拼多多页面3</title>
    <style>
         *{
            margin: 0 auto;
        }

        div,span{
            /* border: 1px solid red; */
            color: #6c6c6c;
        }

        li{
            display: inline-block;
            list-style-type:none;
        }

        /* 1.顶部栏 */
        .top{
            height: 110px;
            width: 1980px;

            border-bottom: 3px solid red;

            position:fixed;
            top: 0px;
            background: white;
            z-index: 1;
        }

        .top > div{
            margin: 0px 10px;
            height: 105px;
            /* border: 1px solid black; */
            position: relative;
        }

        .top-print{
            position: absolute;
            top:15px;
            
        }

        .top-text{
            position: absolute;
            top:40px;
            left: 170px;
        }

        .top-text a,.navigation-text a{
            text-decoration: none;
            
        }

        /* 2.内容 */
        .navigation1,.navigation2{
            margin-top: 130px;

            /* border: 1px solid red; */
            height: 800px;
            
            float: left;
        }
        /* 左侧40%内容部分 */
        .navigation1{
            width: 38%;
            margin-right: 20px;
        }

        .navigation1 > img{
            position: relative;
            top: 20px;
            left: 100px;
        }

        .box{
            margin-top: 50px;
            /* border:1px red solid; */
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(2,1fr);

            margin-left: 100px;
        }

        .box1 {
            width: 200px;
            height: 30px;

            grid-column: 1/4;
            margin-left: 0px;

            color: black;
            font-size: 20px;
            font-weight: bolder;
        }

        .box2,.div3{
            margin: 10px 0px;
            width: 350px;
            height: 50px;
        }

        .box2 > span{
            position: relative;
            bottom: 20px;
            left: 10px;

            font-size: 20px;
            color: black;
            font-weight: bolder;
        }

        .box3{
            position: relative;
            top:  20px;
            left: 0px;
            font-size: 16px;
            color: rgb(145, 135, 135);
            font-weight: bolder;
        }

        /* 右侧60%内容部分 */
        .navigation2{
            width: 60%;
        }

        .navigation2 > div{
            width: 800px;
            height: 198px;
            /* border: 1px solid black; */
            margin: 20px 0px;
        }

        .navigation21{
            background-color: #f4f4f4;
        }

        .price > div{
            /* border: 1px solid black; */
            float: left;

            margin-top: 0px;
        }

        .price1,.price3,.price5,.price7,.price9{
            width: 19%;
            height: 35px;

            font-size: 16px;
            text-align: end;
            color: #b2adad;
            
        }

        .price2,.price4,.price6,.price8,.price10{
            width: 79%;
            height: 35px;

            margin-left: 10px;
            color: #6c6c6c;
        }

        .price2{
            color: red;
            font-size: 24px;
            font-weight: bolder;
        }

        .price4{
            color: #cbcbcb;
            text-decoration: line-through;
        }

        .price8{
            color: darkorange;
        }

        .price10{
            color: crimson;
        }

        .cell{
            height: 150px;
            width: 800px;
            
            margin-top:10px;
            /* border:1px red solid; */
            display: grid;
            grid-template-columns: 11% 11% 26% 26% 26%;
            grid-template-rows: 50% 50%;
        }

        .cell > div{
            margin: 10px 50px;
        }

        .cell2,.cell7{
            color: red;
        }

        .cell3,.cell4,.cell8,.cell9,.cell10{
            width: 200px;
            color: #000;
            border: 1px solid rgb(202, 199, 199);
        }

        .shop{
            position: relative;
            top: 10px;
        }

        .shop > div{
            width: 128px;
            height: 40px;

            margin: 0px 20px;
            border:1px red solid;

            float: left;

            position: relative;
            top: 130px;
        }

        .shop1{
            line-height: 35px;
            text-align: center;
            color: white;
            background-color: crimson;
        }

        .shop2{
            line-height: 35px;
            text-align: center;
            color: red;
        }

        /* 3.底部 */
        .foot{
            height: 200px;
            width: 100%;

            position: absolute;
            top: 1000px;

            background: #3f3e3e;
        }

        .foot1,.foot2,.foot3,.foot4 {
            margin-top: 15px;
            text-align: center;
        }

         .foot span{
            color: #cbcbcb;
        }
    </style>
</head>
<body>
     <!-- 1.顶部栏 -->
     <div class="top">
        <div clsass="top1">
            <div class="top-print"><img src="https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png" width="180px" height="63px"></div>
            <ul class="top-text">
                <li><a href=""><span>首页|</span></a></li>
                <li><a href=""><span>拼多多商家入驻|</span></a></li>
                <li><a href=""><span>热点资讯|</span></a></li>
                <li><a href=""><span>社会招聘|</span></a></li>
                <li><a href=""><span>校园招聘|</span></a></li>
                <li><a href=""><span>招采平台|</span></a></li>
                <li><a href=""><span>帮助中心|</span></a></li>
                <li><a href=""><span>举报平台|</span></a></li>
                <li><a href=""><span>分享赚钱|</span></a></li>
                <li><a href=""><span>查快递</span></a></li>
            </ul>
        </div>
    </div>

    <!-- 2.内容 -->
    <div class="navigation">
        <!-- 左侧40%内容部分 -->
        <div class="navigation1">
            <img src="https://img.pddpic.com/mms-material-img/2024-03-25/625fa347-4fb8-4f77-9766-170f1f99f904.jpeg?
            imageMogr2/quality/90/format/webp" width="480px" height="482px">
            <div class="box">
                <div class="box1">店铺信息</div>
                <div class="box2">
                    <img src="https://commimg.pddpic.com/pdd_ims/img_check/v2/E6EDFF2D6EE40120200112154811880/67e30e444d694e6e9fc94d52f1487e28.png?imageMogr2/quality/90/format/webp"
                     width="47px" height="47px">
                     <span>远方与归期&gt;</span>
                </div>
                <div class="box3">联系客服</div>
            </div>
        </div>
        <!-- 右侧60%内容部分 -->
        <div class="navigation2">
            <h3>挂脖风扇无叶大风力超静音USB充电懒人随身学生办公宿舍迷你风扇</h3>
            <div class="navigation21"> 
               <div class="price">
                <div class="price1">特价</div>
                <div class="price2">￥67.20 — 113.40</div>
                <div class="price3">原价</div>
                <div class="price4">￥96 - 126</div>
                <div class="price5">特价规则</div>
                <div class="price6">2件 9折&nbsp;|&nbsp;&gt;2件 7.8折</div>
                <div class="price7">专享服务</div>
                <div class="price8">全店2件起批 全场包邮 七天退换 48小时发货</div>
                <div class="price9">已售</div>
                <div class="price10">1000+</div>
               </div>
            </div>
            <div class="navigation22">
                <div class="cell">
                    <div class="cell1">款式</div>
                    <div class="cell2">全部</div>
                    <div class="cell3">【深海蓝】超强四核-全域凉风</div>
                    <div class="cell4">【冰川白】超强四核-全域凉风</div>
                    <div class="cell5"></div>
                    <div class="cell6">容量</div>
                    <div class="cell7">全部</div>
                    <div class="cell8">7000M【全新智能数显】升级款</div>
                    <div class="cell9">9000M【续航18小时】数显3档</div>
                    <div class="cell10">10000M【续航24小时】数显3档</div>
                </div>
            </div>
            <div class="shop">
                <div class="shop1">立刻购买</div>
                <div class="shop2">加入购物车</div>
            </div>
        </div>
    </div>

    <!-- 3.底部 -->
    <div class="foot">
        <div class="foot1">
            <span>
                Copyright 2015-2024  pinduoduo.com 版权所有
                (增值电信业务经营许可证: 沪B2-20170215)
            </span>
        </div>
        <div class="foot2">
            <span>
                互联网药品信息服务资格证书：（沪）-经营性-2024-0019 | 网络文化经营许可证：沪网文 [2022] 3418-243 号 | 
                药品网络交易服务第三方平台备案: (沪) 网药平台备字〔2023〕第000006-001号
            </span>
        </div>
        <div class="foot3">
            <div></div>
            <span>沪公网安备 31010502000392号</span>
            <span>（沪）网械平台备字[2018]第00003号</span>
            <span>沪ICP备15010535号-13 | 营业执照</span>
        </div>
        <div class="foot4">
            <span>全国旅游服务热线：12301</span>
        </div>
    </div>
</body>
</html>

运行截图