第三次作业-CSDN博客

本文链接：https://blog.csdn.net/2301_80653940/article/details/139835672

一、京东登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东登录页面</title>
    <style>
        .AB{
            width: 1200px;
            height: 100px;
            margin: auto;
        }
        .A{
            width: 400px;
            height: 100px;
            font-size:  30px;
            margin-left: 250px;
            float: left;
        }
        .A1{
            float: left;
        }
        .A2{
            float: left;
            margin-top: 35px;
        }
        .B{
            text-align: center;
            width: 300px;
            height: 35px;
            float: left;
            margin-top: 56px;
        }
        .advise{
            font-size: 15px;
            text-decoration: none;
            margin-top: 15px;
        }
        .advise:hover,.C1:hover,.forget:hover,.qq:hover,.wechat:hover,.zhuce:hover,
        .a1:hover,.a2:hover,.a3:hover,.a4:hover,.a5:hover,.a6:hover,.a7:hover,.a8:hover,.a9:hover,.a10:hover{
            color: red;
        }
        .C{
            width: 1075px;
            height: 31px;
            margin: auto;
            color: rgb(131, 128, 128);
            padding: 10px;
            
        }
        .C1,.qq,.wechat,.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10{
            text-decoration: none;
            color: black;
        }

        .text{
            height: 45px;
            background-color: antiquewhite;
        }
        .D{
            background-color: #E93854;
        }
        .D1{
            width: 1200px;
            height: 477px;
            margin: auto;
        }
        .D-img1{
            
            height: 477px;
            margin: auto;
            float: left;
        }
        .sign{
            width: 350px;
            height: 450px;
            background-color: white;
            float: left;
            margin-top: 15px;
            margin-left: 30px;
            
        }
        .sign-1{
            height: 7%;
            font-size: 14px;
            color: #ff623a;
            padding: 10px;
            text-align: center;
            background-color: antiquewhite;
        }
        .sign-2{
            height: 68%;
            /* background-color: blue; */
        }
        .sign-3{
            height: 18%;
            background-color: #F6F6F6;
        }

        .sign-2A{
            height: 285px;
            /* background-color: red; */
            position: relative;
            top: 11px;
            left: 0px;
        }
        .sign-2A1{
            margin-left: 15px;
            margin-top: 15px;
            font-size: 20px;
            font-weight: 800;
        }
        .sign-text,.sign-password{
            width: 300px;
            height: 45px;
            font-size: 18px;
            border-radius: 8px;
            margin-top: 30px;
            margin-left: 14px;
        }

        .sign-2A2{
            font: 12px;
            text-align: right;
            margin-top: 10px;
            margin-right: 10px;
            
        }
        .forget,.zhuce{
            text-decoration: none;
            color: blue;
        }
        .submit{
            width: 220px;
            height: 45px;
            border-radius: 10px;
            font-size: 23px;
            font-weight: 800;
            margin-left: 68px;
            margin-top: 10px;
            color: white;
            background-color: #ff8787;
        }
        li{
            display:inline-block;
            line-height: 80px;
            
        }
        .line{
            padding: 0px 20px 0px 20px;
        }
        .line2{
            padding-left: 80px;
        }
        .img4,.img5{
            position: relative;
            top: 5px;
        }
        .foot{
            width: 1600px;
            height: 50px;
            /* background-color: aqua; */
            margin: auto;
            margin-top: 10px;
            text-align: center;
        }
        .a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10{
            font-size: 25px;
            margin: 0px 20px;
        }
    </style>
</head>
<body>
    <div class="AB">
        <div class="A">
            <div class="A1"><img src="./img/2.png" class="img2"></div>
            <div class="A2">欢迎登录</div>
        </div>
        <div class="B">
        <a href="https://wj-dongjian.jd.com/q/61a05143f2ec2b00b35e40a6" target="_blank" class="advise">登录页面，改进建议</a>
        </div>
    </div>
    <div class="text">
        <div class="C">
            <img src="./img/3.png" width="15px" height="15px" class="img3">
            依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
            <a href="https://about.jd.com/privacy/" class="C1">《京东隐私政策》</a>
            已上线，将更有利于保护您的个人隐私。
        </div>
    </div>
    <div class="D">
        <div class="D1">
            <div class="D-img1"><img src="./img/1.png" height="475px"></div>
            <div class="sign">
                <div class="sign-1">
                    <img src="./img/3.png" height="16px">京东不会以任何理由要求您转账，谨防诈骗
                </div>
                <form action="https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2F
                www.jd.com%2F%3Fsource%3Denterprise%26cu%3Dtrue%26utm_source%3Dntp.msn.cn%26u
                tm_medium%3Djingfen%26utm_campaign%3Dt_2030767747_%26utm_term%3D940aa24799c04
                32eb4aca6a4a49f8276" method="get">
                <div class="sign-2">
                    <div class="sign-2A">
                        <div class="sign-2A1">密码登录</div>
                        <div><input type="text" class="sign-text" placeholder="账号/手机号/邮箱" required></div>
                        <div><input type="password" class="sign-password" placeholder="密码" required></div>
                        <div class="sign-2A2"><a href="https://aq.jd.com/process/findPwd?s=1" target="_blank" class="forget">忘记密码</a></div>
                        <div><button type="submit" class="submit">登录</button></div>
                    </div>
                </div>
                </form>
                <div class="sign-3">
                       <ul class="3A">
                        <li><img src="./img/4.png" height="22px" class="img4"><a href="https://graph.qq.com/oauth2.0/show?which
                            =Login&display=pc&response_type=code&state=C36A64B90D68381566D4F841718D095A4FAEB3239481D3C6A5AA8F
                            BCD1EC1037719ACD14F1CDA57C210D9713041CE905&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com
                            %2Fnew%2Fqq%2Fcallback.action%3Fuuid%3D75dfc4548ac4459186b0b4a769e898e7" target="_blank" class="qq">QQ</a>
                        </li>
                        <span class="line"></span>
                        <li><img src="./img/5.png" height="22px" class="img5"><a href="https://open.weixin.qq.com/connect/qrconn
                            ect?appid=wx827225356b689e24&state=A551D19997B62CCB082E628D11E2B1F7CF181317AC450443D18435EA92DB90F15212F563AAD69
                            60A7828347D4C7A9A15&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3F%26uuid%3Daaf5268c3ab742b
                            d836dbfffd8b395da&response_type=code&scope=snsapi_login#wechat_redirect" target="_blank" class="wechat">微信</a>
                        </li>
                        <span class="line2"></span>
                        <li><a href="https://reg.jd.com/p/regPage?ignore=1" target="_blank" class="zhuce">立即注册</a></li>
                       </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <a href="https://about.jd.com/" class="a1">关于我们</a>
        |
        <a href="https://about.jd.com/contact" class="a2">联系我们</a>
        |
        <a href="https://zhaopin.jd.com/home;jsessionid=2ED0100FAF9B2BFFDEDD0F1A9E96158F.s1" class="a3">人才招聘</a>
        |
        <a href="https://lai.jd.com/" class="a4">商家入驻</a>
        |
        <a href="https://jzt.jd.com/gw/index?ReturnUrl=https%3A%2F%2Fjzt.jd.com%2Fhome%2F%23%2Findex" class="a5">广告服务</a>
        |
        <a href="https://app.jd.com/" class="a6">手机京东</a>
        |
        <a href="https://club.jd.com/links.aspx" class="a7">友情链接</a>
        |
        <a href="https://media.jd.com/" class="a8">销售联盟</a>
        |
        <a href="https://pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html" class="a9">京东社区</a>
        |
        <a href="https://gongyi.jd.com/" class="a10">京东公益</a>
    </div>
</body>
</html>

代码运行结果截图：

二、京东购物页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东购物界面</title>
    <style>
        .title{
            width: 1280px;
            height: 100px;
        }

        .title-left{
            width: 205px;
            height: 67px;
            float: left;
            margin-top: 3px;
            margin-left: 425PX;
        }

        .title-right{
            width: 200px;
            height: 50px;
            margin: 0px;
            float: left;
        }
        .top{
            width: 1220px;
            height: 55px;
            border: 4px solid red;
        }

        .one,.two,.three,.four,.five{
            width:200px;
            height: 49px;
            border-right: 3px solid rgb(124, 124, 124);
            float: left;
            margin-top: 3px;
        }
        .six{
            width:200px;
            height: 49px;
            float: left;
            margin-top: 3px;
        }

        .one-A{
            width: 80px;
            height: 22px;
            background-color: rgb(248, 65, 65);
            color: white;
            border-radius: 50px;
            text-align: center;
            margin: auto;
            font-size: 18px;
            font-weight: 700;
        }
        .one-B{
            width: 80px;
            height: 22px;
            color: red;
            margin: auto;
            text-align: center;
            font-size: 14px;
        }

        .two-A,.three-A,.four-A,.five-A,.six-A{
            width: 80px;
            height: 22px;
            color: rgb(0, 0, 0);
            text-align: center;
            margin: auto;
            font-size: 18px;
            font-weight: 700;
        }

        .two-B,.three-B,.four-B,.five-B,.six-B{
            width: 80px;
            height: 22px;
            color: rgb(123, 123, 123);
            text-align: center;
            margin: auto;
            font-size: 14px;
        }
        .a0{
            color: white;
            text-decoration: none;
        }


        .a1{
            color: red;
            text-decoration: none;
        }
        .a2:hover,.a3:hover{
            color: red;
        }
        
        .a2{
            color: rgb(0, 0, 0);
            text-decoration: none;
        }
        .a3{
            color: rgb(123, 123, 123);
            text-decoration: none;
        }

        ul{
            width: 1250px;
            padding: 0px;
        }
        li{
            width: 230px;
            height: 322px;
            list-style: none;
            border: 1px solid red;
            display: inline-block;
            margin-left:12px;
            margin-top: 10px;
        }

        a{
            text-decoration: none;

        }

        .ziying{
            width: 36px;
            height: 16px;
            font-size: 12px;
            background-color: red;
            color: white;
            text-align: center;
            float: left;
        }

        .txt{
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            float: left;
            font-size: 15px;
        }

        .price1{
            color: red;
            font-size: 14px;
            float: left;
            margin-top: 5px;
            font-weight: 550;
        }
        .price2{
            color: red;
            font-size: 20px;
            float: left;
            font-weight: 800;
        }
        span{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="title">
        <div class="title-left"><img src="./img/7.png"></div>
        <div class="title-right"><h1>为你推荐</h1></div>
    </div>
    <div class="top">
        <div class="one">
            <div class="one-A">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a0">精选</a>
            </div>
            <div class="one-B">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a1">猜你喜欢</a>
            </div>
        </div>
        <div class="two">
            <div class="two-A">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">智能先锋</a>
            </div>
            <div class="two-B">
                <a href="https://www.jd.com/?source=enterprise&cu=true&utm_source=n
                tp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">大电器城</a>
            </div>
        </div>
        <div class="three">
            <div class="three-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_2030767747
                _&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">居家优品</a>
            </div>
            <div class="three-B"><a href="https://www.jd.com/?source=enterprise&cu=t
                rue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_20307677
                47_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">品质生活</a>
            </div>
        </div>
        <div class="four">
            <div class="four-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">超市百货</a>
            </div>
            <div class="four-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">百货生鲜</a>
            </div>
        </div>
        <div class="five">
            <div class="five-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">时尚达人</a>
            </div>
            <div class="five-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">美妆穿搭</a>
            </div>
        </div>
        <div class="six">
            <div class="six-A"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a2">进口好物</a>
            </div>
            <div class="six-B"><a href="https://www.jd.com/?source=enterprise&cu=tr
                ue&utm_source=ntp.msn.cn&utm_medium=jingfen&utm_campaign=t_203076774
                7_&utm_term=940aa24799c0432eb4aca6a4a49f8276" class="a3">京东国际</a>
            </div>
        </div>
    </div>
    <div class="body">
        <ul>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./img/6.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/100002868435.html">
                    <div>
                        <img src="https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/240197/23/10785/231042/66724557F30c73ac2/eeddc346e5d45e52.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">博世（BOSCH）机油滤芯机滤清器0512适配大众速腾朗逸宝来高尔夫斯柯达明锐昕动</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">25.
                            <span>40</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/10087612073420.html">
                    <div>
                        <img src="https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/240091/23/12013/188715/66719e40Fd485fcf9/650eb7cb84bed839.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">顾家家居简约头层黄牛皮沙发可翻折扶手羽毛填充靠包真皮沙发客厅1202 【燕麦色】四人位</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">6299.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100049595460.html">
                    <div>
                        <img src="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/231107/1/20727/172190/666eaae3Fde071f2a/05665c697132ab57.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">小米米家小米充气宝2 数字胎压检测 小米汽车su7 预设压力充到即停 </div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">169.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/1561197.html">
                    <div>
                        <img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/163688/7/46225/996470/66597a40F84a1e23e/30abd4cb48ca3ef7.png.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">韩泰（Hankook）轮胎/汽车轮胎 205/55R16 91V K415 原配大众宝来/高尔夫/朗逸</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">289.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/100091696433.html">
                    <div>
                        <img src="https://img13.360buyimg.com/jdcms/s460x460_jfs/t1/167789/13/46371/112111/6671a5dcF2858542c/4af96f21cf5b9e94.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">荣耀MagicBook Pro 16 HUNTER版 AI轻薄游戏笔记本 英特尔酷睿Ultra5 24G 1T RTX4060 3K电竞屏 凝夜色</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">8799.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/10104169355316.html">
                    <div>
                        <img src="https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/111307/18/41472/89662/6649bb90Fdb6a6fbc/1e734f31ecde15cc.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">铠侠（Kioxia）RC20/SE10/SD10固态硬盘M.2接口NVME协议 PCIE4.0台式机笔记本SSD 铠侠SD10-1TB·PCIE4.0 标配:散热片+螺丝+螺丝刀</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">415.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100067888479.html">
                    <div>
                        <img src="https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/240042/6/12289/96091/6671a947F4d67ca70/f7e809f216e7b046.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">顾家家居（KUKA）客厅皮沙发电动轻奢功能沙发游戏沙发意式真皮沙发小户型客厅6055 晨雾绿三人位双电动2.73m</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">358.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100064725988.html">
                    <div>
                        <img src="https://img30.360buyimg.com/jdcms/s460x460_jfs/t1/226944/3/19010/113406/666ba1a6F0b3c9169/94aec12da9df0810.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">讯景（XFX）AMD RADEON RX 7900 XT 20GB 海外版Pro 全新电竞游戏显卡台式电脑独立显卡</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">4999.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100060823850.html">
                    <div>
                        <img src="https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/196562/1/47421/170387/6672349eFb0197bfe/8690aea99a334b9f.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">KOORUI科睿 23.8英寸 180Hz FastIPS屏 300亮度 HDR硬件防蓝光 130%sRGB GTG1ms 旋转升降 电竞显示器X41</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">579.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="https://item.jd.com/100038785641.html">
                    <div>
                        <img src="./img/6.png" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">美的（Midea）61厘米薄407升一级智能双变频十字对开双开门四开门家用电冰箱大容量BCD-407WSPZM(E)超薄可嵌入</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">3399.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/100002868435.html">
                    <div>
                        <img src="https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/240197/23/10785/231042/66724557F30c73ac2/eeddc346e5d45e52.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">博世（BOSCH）机油滤芯机滤清器0512适配大众速腾朗逸宝来高尔夫斯柯达明锐昕动</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">25.
                            <span>40</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/10087612073420.html">
                    <div>
                        <img src="https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/240091/23/12013/188715/66719e40Fd485fcf9/650eb7cb84bed839.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">顾家家居简约头层黄牛皮沙发可翻折扶手羽毛填充靠包真皮沙发客厅1202 【燕麦色】四人位</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">6299.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100049595460.html">
                    <div>
                        <img src="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/231107/1/20727/172190/666eaae3Fde071f2a/05665c697132ab57.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">小米米家小米充气宝2 数字胎压检测 小米汽车su7 预设压力充到即停 </div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">169.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/1561197.html">
                    <div>
                        <img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/163688/7/46225/996470/66597a40F84a1e23e/30abd4cb48ca3ef7.png.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">韩泰（Hankook）轮胎/汽车轮胎 205/55R16 91V K415 原配大众宝来/高尔夫/朗逸</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">289.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
            
            <li>
                <a href="https://item.jd.com/100091696433.html">
                    <div>
                        <img src="https://img13.360buyimg.com/jdcms/s460x460_jfs/t1/167789/13/46371/112111/6671a5dcF2858542c/4af96f21cf5b9e94.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">荣耀MagicBook Pro 16 HUNTER版 AI轻薄游戏笔记本 英特尔酷睿Ultra5 24G 1T RTX4060 3K电竞屏 凝夜色</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">8799.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/10104169355316.html">
                    <div>
                        <img src="https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/111307/18/41472/89662/6649bb90Fdb6a6fbc/1e734f31ecde15cc.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">铠侠（Kioxia）RC20/SE10/SD10固态硬盘M.2接口NVME协议 PCIE4.0台式机笔记本SSD 铠侠SD10-1TB·PCIE4.0 标配:散热片+螺丝+螺丝刀</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">415.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100067888479.html">
                    <div>
                        <img src="https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/240042/6/12289/96091/6671a947F4d67ca70/f7e809f216e7b046.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">顾家家居（KUKA）客厅皮沙发电动轻奢功能沙发游戏沙发意式真皮沙发小户型客厅6055 晨雾绿三人位双电动2.73m</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">358.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100064725988.html">
                    <div>
                        <img src="https://img30.360buyimg.com/jdcms/s460x460_jfs/t1/226944/3/19010/113406/666ba1a6F0b3c9169/94aec12da9df0810.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">讯景（XFX）AMD RADEON RX 7900 XT 20GB 海外版Pro 全新电竞游戏显卡台式电脑独立显卡</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">4999.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="https://item.jd.com/100060823850.html">
                    <div>
                        <img src="https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/196562/1/47421/170387/6672349eFb0197bfe/8690aea99a334b9f.jpg.avif" width="230px" height="230px">
                    </div>
                    <div>
                        <div class="ziying">自营</div>
                        <div class="txt">KOORUI科睿 23.8英寸 180Hz FastIPS屏 300亮度 HDR硬件防蓝光 130%sRGB GTG1ms 旋转升降 电竞显示器X41</div>
                    </div>
                    <div>
                        <div class="price1">￥</div>
                        <div class="price2">579.
                            <span>00</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

代码运行结果截图：

三、京东购物车页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东购物车页面</title>
    <style>
        .head{
            width: 700px;
            height: 97px;
            margin: auto;
        }
        .img1{
            float: left;
            margin: auto;
        }
        .txt1{
            float: left;
            margin: auto;
            margin-left: 300px;
            margin-top: 13px;
        }
        .input1{
            border: 3px solid red;
        }
        .button1{
            border: 3px solid red;
            background-color: red;
            color: white;
        }
        .top{
            width: 700px;
            height: 35px;
            margin: auto;
            font-size: 22px;
            font-weight: 800px;
            color: red;
        }
        .body1{
            width: 700px;
            height: 40px;
            margin: auto;
            margin-top: 15px;
            background-color: #f3f3f3;
        }
        .cx{
            width: 100px;
            height: 20px;
            font-size: 12px;
            padding: 10px 0px 0px 0px;
            float: left;
        }
        .sp{
            width: 100px;
            height: 20px;
            font-size: 12px;
            float: left;
            padding: 11px 100px 0px 0px;
        }
        .dj{
            width: 100px;
            height: 20px;
            font-size: 12px;
            float: left;
            padding: 11px 0px 0px 60px;
        }
        .sl{
            width: 80px;
            height: 20px;
            font-size: 12px;
            float: left;
            padding: 11px 0px 0px 0px;
        }
        .xj{
            width: 80px;
            height: 20px;
            font-size: 12px;
            float: left;
            padding: 11px 0px 0px 30px;
        }
        .cz{
            width: 40px;
            height: 20px;
            font-size: 12px;
            float: left;
            padding: 11px 0px 0px 0px;
        }
        .body2{
            width: 700px;
            height: 150px;
            margin: auto;
        }
        .ck1,.img2{
            float: left;
        }
        .name{
            width: 100px;
            height: 60px;
            font-size: 10px;
            float: left;
            margin-top: 15px;
            margin-left: 10px;
        }
        .name2{
            width: 100px;
            height: 60px;
            font-size: 10px;
            float: left;
            margin-top: 25px;
            margin-left: 10px;
        }
        .name1,.name3{
            text-decoration: none;
            color: black;
        }
        .name1:hover,.name3:hover{
            color: red;
        }
        .price{
            width: 100px;
            height: 30px;
            font-size: 20px;
            font-weight: 60px;
            float: left;
            margin-top: 20px;
            color: red;
            margin-left: 10px;
        }
        .purchasenum{
            width: 25px;
            margin-left: 27px;
            margin-top: 25px;
            float: left;
        }
        .price1{
            width: 100px;
            height: 30px;
            font-size: 20px;
            font-weight: 60px;
            float: left;
            margin-top: 20px;
            color: red;
            margin-left: 45px;
        }
        .remove{
            width: 40px;
            height: 40px;
            font-size: 16px;
            color: black;
            font-weight: 800;
            margin-top: 22px;
            margin-left: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="img1"><img src="./img/2.png" width="134px" height="42px"></div>
        <form action="https://cart.jd.com/cart_index" method="get">
        <div class="txt1">
            <input type="text"  width="270px" height="24px" class="input1">
            <button type="submit" class="button1">搜索</button>
        </div>
        </form>
    </div>
    <div class="top">全部商品 1</div>
    <div class="body1">
        <div class="cx"><input type="checkbox" class="ck" onclick="SelectAll;">全选</div>
        <div class="sp">商品</div>
        <div class="dj">单价</div>
        <div class="sl">数量</div>
        <div class="xj">小计</div>
        <div class="cz">操作</div>
    </div>
    <div class="body2">
        <div class="ck1"><input type="checkbox" class="ck"></div>
        <div class="img2"><a href="https://item.jd.com/10054165118647.html"><img src="https://img30.360buyimg.com/n0/s80x80_jfs/t1/221952/1/43901/150442/666fd402Febd3c472/fc394f794b2a26bb.jpg.dpg"></a></div>
        <div class="name"><a href="https://item.jd.com/10054165118647.html" class="name1">铠侠（Kioxia） RC20 SE10  NVMe M.2接口 PCIE 台式机笔记本固态硬盘</a></div>
        <div class="name2"><a href="https://item.jd.com/10054165118647.html" class="name3">RC20 1T（缓存1G）<br>标配</a></div>
        <div class="price">￥489.00</div>
        <form action="">
        <div ><input type="number" min="1" step="1" value="1" class="purchasenum"></div>
        <div class="price1">￥489.00</div>
        <div class="remove"><button type="reset">删除</button></div>
        </form>
      
       
    
    </div>
</body>
</html>