HTML+CSS实现拼多多官网首页

该编程了

已于 2022-04-16 22:03:00 修改

阅读量7.5k

点赞数 14

文章标签： html5 css3 前端

于 2022-03-28 22:48:53 首次发布

本文链接：https://blog.csdn.net/weixin_54138158/article/details/123808598

版权

写得一般，愿与大家共同进步（不会制作GIF图片）

一、以下为部分实现图片

二、HTML代码

<!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>
    <link rel="icon" type="image/x-icon" href="images/标题图片.ico">
    <link rel="stylesheet" href="./css/style1.css">
</head>
<body>
    <div class="left">
        <div class="img">
        <img src="./images/二维码.png" alt="">
        <span>微信扫码下载</span>
        <span>App专享优惠</span>
        </div>
    </div>

    <nav class="head">
        <div class="head w">
            <a href="javascript:;"><img src="./images/nav.png" alt=""></a>
        
            <ul class="menu">
                <li class="first"><a href="javascript:;"><span class="first">首页</span></a></li>
                <li><a href="javascript:;"><span class="inner">商家入驻</span></a></li>
                <li><a href="javascript:;"><span class="inner">热点资讯</span></a></li>
                <li><a href="javascript:;"><span class="inner">社会招聘</span></a></li>
                <li><a href="javascript:;"><span class="inner">校园招聘</span></a></li>
                <li><a href="javascript:;"><span class="inner">招采平台</span></a></li>
                <li><a href="javascript:;"><span class="inner">帮助中心</span></a></li>
                <li><a href="javascript:;"><span class="inner">举报平台</span></a></li>
                <li><a href="javascript:;"><span class="inner">分享赚钱</span></a></li>
                <li class="last"><a href="javascript:;"><span class="last">查快递</span></a></li>
            </ul>
        </div>
    </nav>

    <header>
        <a href="javascript:;"><img src="./images/header.jpg" alt=""></a>
    </header>

    <div class="title">
        <a href="javascript:;"><span class="left">精彩活动</span></a>
        <a href="javascript:;"><span class="right">更多 ></span></a>
    </div>

    <main class="w">
        <div>
            <a href="javascript:;"><img src="./images/main.jpg" alt=""></a>
            <div></div>
        </div>
    </main>
    

    <footer class="w">
        <div class="footer">
            <nav>
            <a href="javascript:;"><img src="./images/nav.jpg" alt=""></a>
            <div></div>
            </nav>

            <article>
            <a href="javascript:;"><img src="./images/acticle.jpg" alt=""></a>
            <div></div>
            </article>

            <aside>
            <a href="javascript:;"><img src="./images/aside.jpg" alt=""></a>
            <div></div>
            </aside>
        </div>
        
    </footer>
    

    <div class="title1">
        <a href="javascript:;"><span class="left">精选专题</span></a>
        <a href="javascript:;"><span class="right">更多 ></span></a>
    </div>

    <div class="footer w">


        <div class="div1">
            
            <a href="javascript:;"><img src="./images/div1.jpg" alt=""></a>
            
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div1.1.jpeg" alt=""></a>
                
                <div class="p1">HELLO KOMA纯棉短袖T恤女学生韩版宽松夏季新款卡通印花上衣服潮</div>
                
                <div class="price">
                    ￥
                    <span class="span1">18.9</span>   
                    <span class="span2">￥</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div1.2.jpeg" alt=""></a>
                
                <div class="p2">VEGA CHANG皮衣外套女机车风2022年春季新款韩版宽松PU皮拼色外套</div>
                
                <div class="price">
                    ￥
                    <span class="span1">206.08</span>   
                    <span class="span2">￥230</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div1.3.jpeg" alt=""></a>
                
                <div class="p3">美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔757634</div>
                
                <div class="price">
                    ￥
                    <span class="span1">49.23</span>   
                    <span class="span2">￥199</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div2">
            <a href="javascript:;"><img src="./images/div2.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div2.1.jpeg" alt=""></a>
                
                <div class="p1">I'm David2022年夏季潮流 t恤男宽松印花短袖新款圆领半袖纯棉衫</div>
                
                <div class="price">
                    ￥
                    <span class="span1">39</span>   
                    <span class="span2">￥180</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div2.2.jpeg" alt=""></a>
                
                <div class="p2">DEBRAND夏季薄款牛仔裤男士2022新款宽松休闲百搭直筒破洞长裤子</div>
                
                <div class="price">
                    ￥
                    <span class="span1">41.2</span>   
                    <span class="span2">￥199</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div2.3.jpeg" alt=""></a>
                
                <div class="p3">贵人鸟官方正品休闲裤男春季新款黑色运动裤束脚裤品牌春夏季裤子</div>
                
                <div class="price">
                    ￥
                    <span class="span1">45</span>   
                    <span class="span2">￥199</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

        <div class="div3">
            
            <a href="javascript:;"><img src="./images/div3.png" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div3.1.jpeg" alt=""></a>
                
                <div class="p1">上海9价HPV疫苗九价进口疫苗预防宫颈癌预约代订服务【优先安排】</div>
                
                <div class="price">
                    ￥
                    <span class="span1">5849</span>   
                    <span class="span2">￥9201</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div3.2.jpeg" alt=""></a>
                
                <div class="p2">汇仁 他达拉非片 5mg*7片/盒 治疗勃起功能障碍男性不举速效勃起药品</div>
                
                <div class="price">
                    ￥
                    <span class="span1">54.8</span>   
                    <span class="span2">￥199</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div3.3.jpeg" alt=""></a>
                
                <div class="p3">修正私处瘙痒外阴囊肛门牛皮股癣大腿内侧皮肤湿疹止痒杀菌抑菌膏</div>
                
                <div class="price">
                    ￥
                    <span class="span1">11.9</span>   
                    <span class="span2">￥129</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div4">
            <a href="javascript:;"><img src="./images/div4.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div4.1.jpeg" alt=""></a>
                
                <div class="p1">多力 葵花籽油1.8L*1瓶+黄三238ml*2瓶压榨食用油小包装油</div>
                
                <div class="price">
                    ￥
                    <span class="span1">34.8</span>   
                    <span class="span2">￥89.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div4.2.jpeg" alt=""></a>
                
                <div class="p2">【50克大蛋】白荡里农家散养土鸡蛋新鲜柴鸡蛋草鸡蛋20-40枚装【3月31日发完】</div>
                
                <div class="price">
                    ￥
                    <span class="span1">15.9</span>   
                    <span class="span2">￥120</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div4.3.jpeg" alt=""></a>
                
                <div class="p3">港版雅培Abbott金装成人中老年加营素900g呍呢嗱香草味蛋白质粉</div>
                
                <div class="price">
                    ￥
                    <span class="span1">159</span>   
                    <span class="span2">￥390</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

        <div class="div5">
            
            <a href="javascript:;"><img src="./images/div5.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div5.1.jpeg" alt=""></a>
                
                <div class="p1">JANE HARLOW男鞋运动鞋网面防臭老爹鞋韩版潮流学生百搭休闲鞋子</div>
                
                <div class="price">
                    ￥
                    <span class="span1">138.9</span>   
                    <span class="span2">￥150.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div5.2.jpeg" alt=""></a>
                
                <div class="p2">JANE HARLOW男鞋2022春季新款板鞋韩版透气防臭运动休闲老爹鞋男</div>
                
                <div class="price">
                    ￥
                    <span class="span1">139.9</span>   
                    <span class="span2">￥199</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div5.3.jpeg" alt=""></a>
                
                <div class="p3">JANE HARLOW正品春夏新款透气防臭飞织运动子男士网面运动鞋</div>
                
                <div class="price">
                    ￥
                    <span class="span1">109.9</span>   
                    <span class="span2">￥220.89</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div6">
            <a href="javascript:;"><img src="./images/div6.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div6.1.jpeg" alt=""></a>
                
                <div class="p1">【双标防伪】INSTINCT生鲜本能 百利猫粮无谷鸡肉幼猫成猫11磅</div>
                
                <div class="price">
                    ￥
                    <span class="span1">289</span>   
                    <span class="span2">￥650</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div6.2.jpeg" alt=""></a>
                
                <div class="p2">【3-6岁】熊津数学图画书(全50册 当当</div>
                
                <div class="price">
                    ￥
                    <span class="span1">249</span>   
                    <span class="span2">￥698</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div6.3.jpeg" alt=""></a>
                
                <div class="p3">【保税直发】资生堂UNO洗面奶130g 男士洗面奶面霜控油祛痘去角质</div>
                
                <div class="price">
                    ￥
                    <span class="span1">14.9</span>   
                    <span class="span2">￥99</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

        <div class="div7">
            
            <a href="javascript:;"><img src="./images/div7.png" alt=""></a>
            
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div7.1.jpeg" alt=""></a>
                
                <div class="p1">NEWA妞娃RF射频提拉紧致家用脸部嫩肤无线款法令纹神器送凝胶</div>
                
                <div class="price">
                    ￥
                    <span class="span1">1599</span>   
                    <span class="span2">￥3951</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div7.2.jpeg" alt=""></a>
                
                <div class="p2">【保税直发】Femfresh芳芯私处清洗液洋甘菊女生私处护理液去异味</div>
                
                <div class="price">
                    ￥
                    <span class="span1">18.9</span>   
                    <span class="span2">￥59.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div7.3.jpeg" alt=""></a>
                
                <div class="p3">Colorkey珂拉琪空气唇釉显白不沾杯HelloKitty联名款学生显白口红</div>
                
                <div class="price">
                    ￥
                    <span class="span1">30</span>   
                    <span class="span2">￥102</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div8">
            <a href="javascript:;"><img src="./images/div8.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div8.1.jpeg" alt=""></a>
                
                <div class="p1">【新品】Apple iPhone 13 支持移动联通电信5G 双卡双待手机</div>
                
                <div class="price">
                    ￥
                    <span class="span1">5299</span>   
                    <span class="span2">￥20001</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div8.2.jpeg" alt=""></a>
                
                <div class="p2">七彩虹3080 12G战斧豪华/火神OC  电竞游戏光追电脑独立显卡</div>
                
                <div class="price">
                    ￥
                    <span class="span1">6399</span>   
                    <span class="span2">￥12800</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div8.3.jpeg" alt=""></a>
                
                <div class="p3">Apple/苹果【新品】2021iPad9 10.2英寸平板电脑国行正品全国联保【7天内发货】</div>
                
                <div class="price">
                    ￥
                    <span class="span1">2459</span>   
                    <span class="span2">￥4000</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

        <div class="div9">
            
            <a href="javascript:;"><img src="./images/div9.jpg" alt=""></a>
            
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div9.1.jpeg" alt=""></a>
                
                <div class="p1">【官方正品】爱他美卓萃幼儿配方奶粉 2段 900克 荷兰进口 二段</div>
                
                <div class="price">
                    ￥
                    <span class="span1">758</span>   
                    <span class="span2">￥999</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div9.2.jpeg" alt=""></a>
                
                <div class="p2">【官方正品】爱他美卓萃幼儿配方奶粉 2段 900克 荷兰进口 二段</div>
                
                <div class="price">
                    ￥
                    <span class="span1">13.9</span>   
                    <span class="span2">￥26.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div9.3.jpeg" alt=""></a>
                
                <div class="p3">美国进口Childlife童年时光(常译)婴幼儿钙镁锌液体钙473ml</div>
                
                <div class="price">
                    ￥
                    <span class="span1">75</span>   
                    <span class="span2">￥208</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div10">
            <a href="javascript:;"><img src="./images/div10.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div10.1.jpeg" alt=""></a>
                
                <div class="p1">永艺双背联动电脑椅人体工学办公学习舒适老板椅电竞椅午休可躺XY</div>
                
                <div class="price">
                    ￥
                    <span class="span1">729</span>   
                    <span class="span2">￥1700</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div10.2.jpeg" alt=""></a>
                
                <div class="p2">DEBRAND夏季薄款牛仔裤男士2022新款宽松休闲百搭直筒破洞长裤子DHP 鞋架子简易多层家用防尘多功能门口结实网红鞋柜宿舍特价清仓</div>
                
                <div class="price">
                    ￥
                    <span class="span1">6.56</span>   
                    <span class="span2">￥69.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div10.3.jpeg" alt=""></a>
                
                <div class="p3">松下护眼台灯aa级儿童书桌学习专用学生写字阅读床头灯HHLT0633</div>
                
                <div class="price">
                    ￥
                    <span class="span1">328</span>   
                    <span class="span2">￥350</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

        <div class="div11">
            
            <a href="javascript:;"><img src="./images/div11.jpg" alt=""></a>
            
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div11.1.jpeg" alt=""></a>
                
                <div class="p1">特步运动套装男新款速干宽松健身跑步服休闲装男士短裤短袖两件套</div>
                
                <div class="price">
                    ￥
                    <span class="span1">78</span>   
                    <span class="span2">￥199</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div11.2.jpeg" alt=""></a>
                
                <div class="p2">康佳筋膜枪健身器材家用肌肉颈膜全身放松电动按摩抢专业级经膜仪</div>
                
                <div class="price">
                    ￥
                    <span class="span1">118</span>   
                    <span class="span2">￥330</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div11.3.jpeg" alt=""></a>
                
                <div class="p3">CAMEL骆驼运动T恤男夏季薄款舒适透气圆领短袖健身运动休闲晨跑</div>
                
                <div class="price">
                    ￥
                    <span class="span1">21.2</span>   
                    <span class="span2">￥109</span> 
                </div>

                <div class="div04"></div>

            </div>
            
            <div class="div04"></div>

        </div>
    
        <div class="div12">
            <a href="javascript:;"><img src="./images/div12.jpg" alt=""></a>
            
            <div class="div01">
                
                <a href="javascript:;"><img src="./images/div12.1.jpeg" alt=""></a>
                
                <div class="p1">五粮液52度普五 浓香型 500ml 整箱6瓶装(七代、八代随机发货)</div>
                
                <div class="price">
                    ￥
                    <span class="span1">5669</span>   
                    <span class="span2">￥7800</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div02">
                
                <a href="javascript:;"><img src="./images/div12.2.jpeg" alt=""></a>
                
                <div class="p2">【保税直发】Femfresh芳芯私处清洗液洋甘菊女生私处护理液去异味</div>
                
                <div class="price">
                    ￥
                    <span class="span1">18.9</span>   
                    <span class="span2">￥59.9</span> 
                
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div03">
                
                <a href="javascript:;"><img src="./images/div12.3.jpeg" alt=""></a>
                
                <div class="p3">联想XE05蓝牙耳机挂脖式颈挂无线运动跑步耳入耳游戏吃鸡超长待机</div>
                
                <div class="price">
                    ￥
                    <span class="span1">29.2</span>   
                    <span class="span2">￥99</span> 
                </div>

                <div class="div04"></div>
            </div>
            
            <div class="div04"></div>
        </div>

    </div>

    <div class="pdd-foot">
        
        <div class="pdd-foot-head">
            
            <div class="img-group">
                
                <div class="imge">
                    <img src="./images/foot-img1.png" alt="">
                    <p>扫描二维码微信关注</p>
                </div>
                
                <div class="imge">
                    <img src="./images/foot-img2.png" alt="">
                    <p>扫描二维码下载App</p>
                </div>
                
                <div class="imge">
                    <img src="./images/foot-img3.png" alt="">
                    <p class="p3">微信扫码免费领取拼多多店铺</p>
                </div>


            </div>
            
            <div class="contact-info">
                <p class="title">联系我们</p>
                <p class="detail">客服&amp;举报电话：021-53395288（推荐）或400-8822-528</p>
                <p class="detail">商家热线：021-5339-5088</p>
                <p class="detail">商家客服服务时间：8:00-20:30</p>
                <p class="detail">消费者客服服务时间：8:00-21:30</p>
                <p class="detail">消费者客服外呼号码显示：9541366（仅呼出，不支持呼入）</p>
                <p class="detail">上海寻梦信息技术有限公司</p>
            </div>
        </div> 
        
        <div class="pdd-bottom-nav">
            <ul class="pd-nav-list-item">
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>入驻多多国际</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>校园招聘</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>关于我们</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>帮助中心</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>下载App</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>消费者保障</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>知识产权</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>维权投诉指引</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>廉正举报</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>服务协议</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>隐私政策</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a href="javascript:;">
                        <span>征求意见</span>
                    </a>
                </li>
                
                <li class="pd-nav-list-item">
                    <a class="last" href="javascript:;">
                        <span>Investor Relations</span>
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="copyright">
            
            <div class="pdd-foot-cr">
                <span>Copyright 2015-2022 pinduoduo.com 版权所有</span>
                <a href="javascript:;" >(增值电信业务经营许可证：沪B2-20170215)</a>
            </div>
           
            <div class="pdd-foot-medicine">
                <a href="javascript:;">互联网药品信息服务资格证书：（沪）-经营性-2019-0052</a>
            </div>

            <div class="pdd-foot-record">
                
                <a class="img-wrap" href="javascript:;">
                    <div class="record-img"></div>
                    <span>沪公网安 <!-- -->31010502000392<!-- -->号</span>
                </a>
                <span class="record-num">（沪）网械平台备字[2018]第00003号</span>
                <span class="record-num"><a href="">沪ICP备15010535号-13</a></span>
                <span class="divider arvin-doudou">|</span>
                <a href="">营业执照</a>
            </div>

            <div class="pdd-foot-medicine">全国旅游服务热线：12301</div>

        </div>
        
        <div class="foot-ft">
            
            <a href="javascript:;"><img class="first" src="./images/底部1.png"></a>
            <a href="javascript:;"><img class="second" src="./images/底部2.jpg"></a>
            <a href="javascript:;"><img class="third" src="./images/底部3.png"></a>
            <a href="javascript:;"><img class="big-width" src="./images/底部4.jpg"></a>
            <a href="javascript:;"><img src="./images/底部5.jpg"></a>
            <a href="javascript:;"><img src="./images/底部6png.png"></a>
            <a href="javascript:;"><img src="./images/底部7.png"></a>
        
        </div>

    </div>
</body>
</html>

三、CSS样式

/* 清除样式 */
*{
    margin: 0px;
    padding: 0px;
}
/* 居中样式 */
.w{
    margin: 0px auto;
}
/* 清楚超链接下划线 */
a{
    text-decoration: none;

}
/* 设置网页背景颜色 */
html{
    background-color: rgb(250, 250, 250);
}
/* 设置固定二维码样式 */
body div.left{
    width: 149px;
    height: 199px;
    padding: 4px;
    background-color: white;
    position: fixed;
    left: 0px;
    top: 350px;
}
body div div.img{
    border: 2px solid #ffedf1;
    width: 146px;
    height: 194px;
}
body div.left img{
    width: 112px;
    height: 112px;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 8px;
}
body div.left span{
    display: block;
    margin-left: 30px;
    color: #666;
    font-size: 14px;
}

/* 设置导航的外面盒子 */
body nav.head{
    width: 100%;
    height: 107px;
    background-color:#ffffff;
    border-bottom: solid 4px rgb(237, 67, 91);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;

}
/* 装图片和无序列表的盒子 */
body nav div{
    width: 1230px;
    height: 107px;
}
/* 导航左边图片外的超链接盒子 */
body nav div a{
    margin: 21px auto;
    float: left;
}
/* 导航左边图片样式 */
body nav div img{
    width: 180px;
    height: 63px;
}
/* 设置导航右边的无序列表 */
body nav ul {
    list-style: none;
    padding-top: 20px;
}
/* 设置导航右边无序列表字体 */
body nav ul li span{
    font-size: 18px;
    font-family: '微软雅黑';
    color: #6c6c6c;
    height: 20px;
    margin: 54px 10px 0px 4px;
    padding-right: 14px;
    border-right: #6c6c6c 1px solid;

}
body nav ul span.first{
    width: 21px;
    margin: 54px 15px 0px 57px;
    color: #fc475d;
    padding-right: 16px;
}
body nav ul span.last{
    width: 39px;
    margin: 54px 0px 0px 4px;
    color: #6c6c6c;
    border: none;
}
/* 导航结束 */

/* 头部图片开始 */

header a img{
    display: block;
    width: 1519px;
    height: 350px;
}
body header{
    margin-top: 111px;
}

/* title部分开始 */
body div.title{
    width: 1200px;
    height: 44.4px;
    margin: 69px auto 41px;
    padding: 0px 0px 17px;
    background-color: 250,250,250;
    border-bottom: 1px rgb(193,193,193) solid;
}
/* 左边文字 */
body div.title .left{
    margin-top: 16px;
    float: left;
    width: 80px;
    height: 26.4px;
    font-size: 20px;
    color: #363636;
    font-family: '微软雅黑';

}
/* 右边文字 */
body div.title .right{
    float: right;
    width: 54.69px;
    height: 22px;
    margin: 16px 5px 0px 0px;
    font-size: 18px;
    color: #868686;
    font-family: '微软雅黑';
}

/* main开始 */
body main>div{
    width: 1170px;
    height: 250px;
    background-color: rgb(253,253,253);
    padding: 14px;
    margin: 0px auto 18px;
}
/* 设置模糊效果 */
body main a:hover{
   opacity: .5;
}

/* 设置装图片的大盒子居中 */
body footer{
    width: 1198px;
    height: 255px;
}
/* 设置main下面的三个图片 */

/* 设置装图片的盒子的公共属性 */
body footer .footer nav,article,aside{
    width: 310px;
    height: 210px;
    padding: 14px;
    margin: 0px 18px 17px 0px;
    float: left;
    background-color: rgb(253,253,253);
}
body footer .footer aside{
    margin: 0px 0px 17px 0px;
}

/* 设置中间盒子 */
body footer .footer article{
    width: 457px;
    height: 210px;
}

/* 设置模糊效果 */
body footer .footer nav:hover,article:hover,aside:hover{
    opacity: .5;
}



body div.title1{
    width: 1200px;
    height: 44.4px;
    margin: 55px auto 44px;
    padding: 0px 0px 17px;
    background-color:rgb(250,250,250);
    border-bottom: 1px rgb(193,193,193) solid;
}
body div.title1 .left{
    margin-top: 16px;
    float: left;
    width: 80px;
    height: 26.4px;
    font-size: 20px;
    color: #363636;
    font-family: '微软雅黑';

}
body div.title1 .right{
    float: right;
    width: 54.69px;
    height: 22px;
    margin: 16px 5px 0px 0px;
    font-size: 18px;
    color: #868686;
    font-family: '微软雅黑';
}

/* 下面图片 */
/* 给下面的大盒子footer设置居中 */
body .footer{
    width: 1200px;
    height: 3237.6px;
}

/* div */

body div.footer div.div1,div.div2,
div.div3,div.div4,div.div5,div.div6,
div.div7,div.div8,div.div9,div.div10,
div.div11,div.div12{
    width: 556px;
    height: 484.6px;
    margin: 0px 45px 45px 0px;
    padding: 10px;
    float: left;
    background-color: rgb(253,253,253);
}
body div.footer div.div2,div.div4,
div.div6,div.div8,div.div10,div.div12{
    margin-right: 0px;
}

/* div01 */
body div.footer .div1 .div01,.div2 .div01,
.div3 .div01,.div4 .div01,.div5 .div01,
.div6 .div01,.div7 .div01,.div8 .div01,
.div9 .div01,.div10 .div01,.div11 .div01,.div12 .div01{
    float: left;
    width: 160px;
    height: 206.6px;
    margin: 0px 12px;
    overflow: hidden;
    background-color: rgb(253,253,253);
    
}
body div.footer .div1 .div01 img,
.div2 .div01 img,.div3 .div01 img,
.div4 .div01 img,.div5 .div01 img,
.div6 .div01 img,.div7 .div01 img,
.div8 .div01 img,.div9 .div01 img,
.div10 .div01 img,.div11 .div01 img,.div12 .div01 img{
    display: block;
    width: 125px;
    height: 125px;
    margin: 7px 17.5px;
}
body div.footer .div1 .div01 div.p1,
.div2 .div01 div.p1,.div3 .div01 div.p1,
.div4 .div01 div.p1,.div5 .div01 div.p1,
.div6 .div01 div.p1,.div7 .div01 div.p1,
.div8 .div01 div.p1,.div9 .div01 div.p1,
.div10 .div01 div.p1,.div11 .div01 div.p1,
.div12 .div01 div.p1{
    width: 160px;
    height: 36px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    color: #111;
}
body div.footer .div1 .div01 .price,
.div2 .div01 .price,.div3 .div01 .price,
.div4 .div01 .price,.div5 .div01 .price,
.div6 .div01 .price,.div7 .div01 .price,
.div8 .div01 .price,.div9 .div01 .price,
.div10 .div01 .price,.div11 .div01 .price,
.div12 .div01 .price{
    width: 160px;
    height: 31.6px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
}
body div.footer .div1 .div01 .price span.span1,
.div2 .div01 .price span.span1,
.div3 .div01 .price span.span1,
.div4 .div01 .price span.span1,
.div5 .div01 .price span.span1,
.div6 .div01 .price span.span1,
.div7 .div01 .price span.span1,
.div8 .div01 .price span.span1,
.div9 .div01 .price span.span1,
.div10 .div01 .price span.span1,
.div11 .div01 .price span.span1,
.div12 .div01 .price span.span1{
    color: #111;
    font-size: 16px;
}
body div.footer .div1 .div01 .price span.span2,
.div2 .div01 .price span.span2,
.div3 .div01 .price span.span2,
.div4 .div01 .price span.span2,
.div5 .div01 .price span.span2,
.div6 .div01 .price span.span2,
.div7 .div01 .price span.span2,
.div8 .div01 .price span.span2,
.div9 .div01 .price span.span2,
.div10 .div01 .price span.span2,
.div11 .div01 .price span.span2,
.div12 .div01 .price span.span2{
    color: #cbcbcb;
    font-size: 14px;
    text-decoration: line-through;
}

/* div02 */
body div.footer .div1 .div02,
.div2 .div02,.div3 .div02,
.div4 .div02,.div5 .div02,
.div6 .div02,.div7 .div02,
.div8 .div02,.div9 .div02,
.div10 .div02,.div11 .div02,
.div12 .div02{
    float: left;
    width: 160px;
    height: 206.6px;
    margin: 0px 12px;
    overflow: hidden;
    background-color: rgb(253,253,253);
    
}
body div.footer .div1 .div02 img,
.div2 .div02 img,.div3 .div02 img,
.div4 .div02 img,.div5 .div02 img,
.div6 .div02 img,.div7 .div02 img,
.div8 .div02 img,.div9 .div02 img,
.div10 .div02 img,.div11 .div02 img,
.div12 .div02 img{
    display: block;
    width: 125px;
    height: 125px;
    margin: 7px 17.5px;
}
body div.footer .div1 .div02 div.p2,
.div2 .div02 div.p2,.div3 .div02 div.p2,
.div4 .div02 div.p2,.div5 .div02 div.p2,
.div6 .div02 div.p2,.div7 .div02 div.p2,
.div8 .div02 div.p2,.div9 .div02 div.p2,
.div10 .div02 div.p2,.div11 .div02 div.p2,
.div12 .div02 div.p2{
    width: 160px;
    height: 36px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    color: #111;
}
body div.footer .div1 .div02 .price,
.div2 .div02 .price,.div3 .div02 .price,
.div4 .div02 .price,.div5 .div02 .price,
.div6 .div02 .price,.div7 .div02 .price,
.div8 .div02 .price,.div9 .div02 .price,
.div10 .div02 .price,.div11 .div02 .price,
.div12 .div02 .price{
    width: 160px;
    height: 31.6px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
}
body div.footer .div1 .div02 .price span.span1,
.div2 .div02 .price span.span1,
.div3 .div02 .price span.span1,
.div4 .div02 .price span.span1,
.div5 .div02 .price span.span1,
.div6 .div02 .price span.span1,
.div7 .div02 .price span.span1,
.div8 .div02 .price span.span1,
.div9 .div02 .price span.span1,
.div10 .div02 .price span.span1,
.div11 .div02 .price span.span1,
.div12 .div02 .price span.span1{
    color: #111;
    font-size: 16px;
}
body div.footer .div1 .div02 .price span.span2,
.div2 .div02 .price span.span2,
.div3 .div02 .price span.span2,
.div4 .div02 .price span.span2,
.div5 .div02 .price span.span2,
.div6 .div02 .price span.span2,
.div7 .div02 .price span.span2,
.div8 .div02 .price span.span2,
.div9 .div02 .price span.span2,
.div10 .div02 .price span.span2,
.div11 .div02 .price span.span2,
.div12 .div02 .price span.span2{
    color: #cbcbcb;
    font-size: 14px;
    text-decoration: line-through;
}

/* div03 */
body div.footer .div1 .div03,
.div2 .div03,.div3 .div03,
.div4 .div03,.div5 .div03,
.div6 .div03,.div7 .div03,
.div8 .div03,.div9 .div03,
.div10 .div03,.div11 .div03,.div12 .div03{
    float: left;
    width: 160px;
    height: 206.6px;
    margin: 0px 12px;
    overflow: hidden;
    background-color: rgb(253,253,253);
    
}
body div.footer .div1 .div03 img,
.div2 .div03 img,.div3 .div03 img,
.div4 .div03 img,.div5 .div03 img,
.div6 .div03 img,.div7 .div03 img,
.div8 .div03 img,.div9 .div03 img,
.div10 .div03 img,.div11 .div03 img,
.div12 .div03 img{
    display: block;
    width: 125px;
    height: 125px;
    margin: 7px 17.5px;
}
body div.footer .div1 .div03 div.p3,
.div2 .div03 div.p3,.div3 .div03 div.p3,
.div4 .div03 div.p3,.div5 .div03 div.p3,
.div6 .div03 div.p3,.div7 .div03 div.p3,
.div8 .div03 div.p3,.div9 .div03 div.p3,
.div10 .div03 div.p3,.div11 .div03 div.p3,
.div12 .div03 div.p3{
    width: 160px;
    height: 36px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    color: #111;
}
body div.footer .div1 .div03 .price,
.div2 .div03 .price,.div3 .div03 .price,
.div4 .div03 .price,.div5 .div03 .price,
.div6 .div03 .price,.div7 .div03 .price,
.div8 .div03 .price,.div9 .div03 .price,
.div10 .div03 .price,.div11 .div03 .price,
.div12 .div03 .price{
    width: 160px;
    height: 31.6px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
}
body div.footer .div1 .div03 .price span.span1,
.div2 .div03 .price span.span1,
.div3 .div03 .price span.span1,
.div4 .div03 .price span.span1,
.div5 .div03 .price span.span1,
.div6 .div03 .price span.span1,
.div7 .div03 .price span.span1,
.div8 .div03 .price span.span1,
.div9 .div03 .price span.span1,
.div10 .div03 .price span.span1,
.div11 .div03 .price span.span1,
.div12 .div03 .price span.span1{
    color: #111;
    font-size: 16px;
}
body div.footer .div1 .div03 .price span.span2,
.div2 .div03 .price span.span2,
.div3 .div03 .price span.span2,
.div4 .div03 .price span.span2,
.div5 .div03 .price span.span2,
.div6 .div03 .price span.span2,
.div7 .div03 .price span.span2,
.div8 .div03 .price span.span2,
.div9 .div03 .price span.span2,
.div10 .div03 .price span.span2,
.div11 .div03 .price span.span2,
.div12 .div03 .price span.span2{
    color: #cbcbcb;
    font-size: 14px;
    text-decoration: line-through;
}

/* 给下面每个图片设置模糊效果 */
body div.footer div.div1:hover,div.div2:hover,
div.div3:hover,div.div4:hover,div.div5:hover,div.div6:hover,
div.div7:hover,div.div8:hover,div.div9:hover,div.div10:hover,
div.div11:hover,div.div12:hover{
    opacity: .5;
}


/* 拼多多最下面的部分 */

/* 设置最外面的盒子 */
body .pdd-foot{
    float: left;
    width: 100%;
    height: 600px;
    padding-top: 60px;
    margin: 30px 0px 0px 0px;
    background-color: #fff;
}
/* 设置pdd-foot-head */
body .pdd-foot .pdd-foot-head{
    width: 1000px;
    height: 240px;
    margin: 0px 259.6px;
    background-color: #fff;
}
/* 设置图片外的盒子 */
body .pdd-foot .pdd-foot-head .img-group{
    float: left;
    width: 666px;
    height: 162px;
    background-color: #fff;
    margin-top: 20px;
}
/* 设置图片盒子里的图片的盒子 */
body .pdd-foot .pdd-foot-head .img-group div.imge{
    float: left;
    width: 162px;
    height: 162px;
    margin-right: 60px;
}
/* 设置统一样式的图片 */
body .pdd-foot .pdd-foot-head .img-group div.imge img{
    width: 162px;
    height: 162px;
}
/* 设置图片下的文本 */
body .pdd-foot .pdd-foot-head .img-group div.imge p{
    display: block;
    width: 162px;
    height: 20.8px;
    margin: 8px 0px;
    color: #4d4d4d;
    font-size: 16px;
    text-align: center;
}
body .pdd-foot .pdd-foot-head .img-group div.imge .p3{
    display: block;
    width: 137.7px;
    height: 41.6px;
    margin: 8px 12.150px;
    color: #4d4d4d;
    font-size: 16px;
    text-align: center;
}

/* 设置图片右边的盒子 */
body .pdd-foot .contact-info{
    margin-left: 666px;
    padding-left: 45px;
    width: 410px;
    height: 240px;
    /* margin-top: -182px; */
    border-left: 1px solid #4d4d4d;
    background-color: #fff;
} 
/* 设置图片右边盒子里的文本 */
body .pdd-foot .contact-info p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/* 设置第一行文本 */
body .pdd-foot .contact-info p.title{
    width: 410px;
    height: 24px;
    color: #4d4d4d;
    font-size: 24px;
    line-height: 24px;
    margin-block-start: 0;
    margin-block-end: 0;
}
/* 设置其他行文本 */
body .pdd-foot .contact-info p.title~.detail{
    width: 410px;
    height: 16px;
    margin-top: 20px;
    color: #4d4d4d;
    font-size: 15px;
    line-height: 16px;
    
}


/* 设置下面的导航 */
body .pdd-foot .pdd-bottom-nav{
    width: 1300px;
    height: 20.8px;
    margin: 45px auto 58px;
    background-color: #fff;
}
/* 取消无序列表样式 */
body .pdd-foot .pdd-bottom-nav ul{
    width: 1160px;
    list-style: none;
    margin: 0px auto;
}
/* 让超链接在同一行显示 */
body .pdd-foot .pdd-bottom-nav ul li{
    float: left;
}
/* 设置超链接格式 */
body .pdd-foot .pdd-bottom-nav ul li a:hover{
    color:rgb(252,71,93);
}
body .pdd-foot .pdd-bottom-nav ul li a{
    color: #6c6c6c;
    font-size: 16px;
    margin-left: 6px;
    padding-right: 6px;
    border-right: rgb(193,193,193) solid 1px;
}
/* 取消最后一个超链接的边框 */
body .pdd-foot .pdd-bottom-nav ul:last-child a.last{
    border: none;
}

/* 设置copyright盒子样式 */
body .pdd-foot .copyright{
    width: 1519.2px;
    height: 151px;
    background-color: rgb(63,62,62);
    overflow: hidden;
}
/* 设置copyright里的盒子样式 */
.pdd-foot-cr,.pdd-foot-medicine,.pdd-foot-record,.pdd-foot-medicine{
    width: 100%;
    height: 18px;
    background-color: rgb(63,62,62);
    padding-bottom: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #b1b1b1;
}
/* 设置超链接样式 */
.copyright a{
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #b1b1b1;
}

/* 设置第一个盒子的内边距 */
.pdd-foot-cr{
    padding-top: 24px;
}
/* 设置第三行文字的边距 */
.pdd-foot-record .record-num{
    margin-left: 25px;
}
/* 设置竖线样式 */
.copyright .divider.arvin-doudou{
    margin: 0px 15px;
}

/* 设置图片样式 */
body .pdd-foot .copyright .pdd-foot-record a .record-img{
    background: url(../images/警徽.png) no-repeat;
    background-position: -57px 0;
    background-size: 197px 64px;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -25px;
    bottom: 0;
}

/* 设置网页底部装图片盒子的样式 */
.pdd-foot .foot-ft{
    width: 100%;
    height: 70px;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
}
/* 设置网页底部图片的样式 */
.pdd-foot .foot-ft a img{
    margin: 10px;
    
}
.pdd-foot .foot-ft a img.first{
    display: inline-block;
    width: 100px;
    height: 50px;
}
.pdd-foot .foot-ft a img.second{
    display: inline-block;
    width: 99.28px;
    height: 50px;
}
.pdd-foot .foot-ft a img.third{
    display: inline-block;
    width: 75.83px;
    height: 50px;
}
.pdd-foot .foot-ft a img.big-width{
    width: 137px;
    height: 28.84px;
    margin-bottom: 20px;
}

结语：学无止境，大家一起加油学习吧！