WEB前端第三次作业

leisurekuan

已于 2025-02-26 15:14:59 修改

阅读量257

点赞数 3

文章标签：前端 javascript css

于 2025-02-26 14:59:24 首次发布

本文链接：https://blog.csdn.net/leisurekuan/article/details/145878960

版权

作业一：完成京东商品展示页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页</title>
    <style>
        .container{
            width: 1578px;
            height: 1980px;
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            /* background-color: aqua; */
            border-radius: 8px;
        }
        .item1{
            width: 1577px;
            height: 31px;
            background-color: #e3e4e5;
            display: flex;
            align-items: center;

        }
        .item1-1{
            display: flex;

            font-size: 12px;
            color: #999999;
            margin-left: 200px;
        }
        .item1-2{
            display: flex;

            font-size: 12px;
            color: #999999;
            margin-left: 10px;
        }
        .item1-3{
            display: flex;

            font-size: 12px;
            color: #999999;
        }
        .q{
            width: 730px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 300px;
            font-size: 12px;
            color: #999999;
        }
        .item1-5,.item1-4,.item1-6,.item1-7,.item1-8{
            display: flex;
        }
        .item2{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 1210px;
            height: 100px;
        }
        .item2-2{
            margin-left: -100px;
            margin-top: 20px;
        }
        .w{
            width: 75px;
            height: 27px;
            color: #666666;
            font-size: 12px;
            background-color: white;
            border: 1px solid gray;
        }
        .r{
            color: #666666;
            font-size: 12px;
        }
        .u{
            width: 456px;
            height: 36px;
            border: 2px solid red;
        }
        .y{
            width: 141px;
            height: 36px;
            color: #666666;
            font-size: 12px;
            background-color: white;
            border: 1px solid gray;
        }
        .item2-4{
            margin-bottom: 12px;
        }
        .item3{
            width: 1575px;
            height: 110px;
            display: flex;
            justify-content: baseline;
            align-items: center;
            
        }
        .item3-1{
            font-size: 24px;
            font-weight: bold;
            margin-left: 350px;
            margin-right: 30px;
        }
        .item4{
            width: 1575px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333333;
            color: #ffffff;
        }
        .item4-8{
            margin-right: 360px;
        }
        .item4-2,.item4-4,.item4-6{
            margin-left: 30px;
            margin-right: 30px;
        }
        .item4-7{
            margin-right: 30px;
        }
        .item5{
            width: 1575px;
            height: 43.5px;
            display: flex;
            font-size: 12px;
            color: #666666;
            background-color: #f2f2f2;

        }
        .item5-1{
            width: 349px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin-left: 200px;


        }
        .item5-2{
            width: 363px;
            height: 40px;
            display: flex;
            justify-content: baseline;
            align-items: center;
            margin-left: 500px;
        }
        .item5-2-1,.item5-2-2,.item5-2-3{
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .item6{
            display: flex;
        }
        .item6-1{
            display: flex;
            flex-direction: column;
        }
        .item6-1-2{
            margin-top: 20px;
            margin-right: 10px;
            /* background-color: blue; */
            width: 455px;
            height: 52px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item6-1-2-2{
            border: 2px solid red;
        }
        .item6-1-1{
            border: 1px solid gray;
        }
        .item6-2{
            display: flex;
            flex-direction: column;
            width: 738px;
            height: 650px;
            /* background-color: blueviolet; */
            justify-content: space-around;
            align-items: flex-start;
        }
        .item6-2-1{
            font-size: 16px;
            color: #666666;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item6-2-2{
            display: flex;
            width: 738px;
            height: 107px;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            background-color:#f3f3f3
        }
        .item6-2-2-1{
            display: flex;
            /* justify-content: baseline; */
            align-items: center;
            /* justify-content: flex-start; */
        }
        .z{
            font-size: 12px;
            color: #999999;
        }
        .x{
            font-size: 22px;
            color: #e4393c;
            margin-left: 20px;
            margin-right: 20px;
        }
        .c{
            font-size: 12px;
            color: #005aa0;
        }
        .item6-2-2-2{
            display: flex;
            /* justify-content: baseline; */
            align-items: center;
            /* justify-content: space-around */
            font-size: 12px;
            color: #999999;
        }
        .b{
            color: #df3033;
            border: 1px solid #df3033;
            margin-left: 20px;
            margin-right: 20px;
        }
        .item6-2-2-3{
            font-size: 12px;
            color: #999999;
            margin-left: 50px;
        }
        .item6-2-3{
            display: flex;
            font-size: 12px;
            color: #999999;
            

        }
        .ww{
            color: plum;
            margin-left: 20px;
        }
        .item6-2-4{
            font-size: 12px;
            display: flex;
            color: #999999;

        }
        .tt{
            border: 1px solid gray;
            margin-left: 20px;
        }
        .yy{
            margin-left: 20px;
            margin-right: 20px;
        }
        .uu{
            margin-left: 20px;
            margin-right: 20px;
        }
        .oo{
            margin-left: 20px;
            margin-right: 20px;
            color: plum; 
        }
        .pp{
            margin-left: 20px;
            margin-right: 20px;
            color: plum; 
        }
        .aa{
            color: plum; 
        }
        .ss{
            color: plum; 
        }
        .item6-2-5{
            font-size: 12px;
            color: plum;
            display: flex;
            margin-left: 54px;

        }
        .ff{
            color: #df3033;
        }
        .gg{
            margin-left: 20px;
            margin-right: 20px;
        }
        .hh{
            margin-right: 20px;
        }
        .item6-2-6{
            font-size: 12px;
            color: #999999;
            display: flex;
            margin-left: 54px;
        }
        .xx{
            color: #e4393c;
        }
        .vv{
            font-weight: bold;
        }
        .item6-2-7{
            display: flex;
            font-size: 12px;
            color: #999999;
            justify-content: center;
            align-items: center;

        }
        .ll,.mm,.nn{
            display: flex;
            align-items: center;
            border: 1px solid;
            color: #666666;
        }
        .mm{
            margin-left: 20px;
            margin-right: 20px;
            border: 1px solid red;
        }
        .ll{
            margin-left: 20px;
        }
        .item6-2-8{
            font-size: 12px;
            color: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .www,.rrr,.ttt{
            width: 62px;
            height: 34px;
            border: 1px solid gray;
            font-family: 12px;
            text-align: center;
            
            
        }
        .qqq{
            
            margin-right: 20px;
        }
        .www{
            border: 1px solid red;
        }
        .www1,.rrr1,.ttt1{
            
            
            margin-top: 10px;
        }
        .rrr{
            margin-left: 20px;
            margin-right: 20px;
        }
        .item6-2-9{
            font-size: 12px;
            color: #999999;
            display: flex;
            align-items: center;

        }
        .uuu{
            border: 1px solid red;
            width: 64px;
            height: 34px;
            text-align: center;
            margin-left: 20px;
        }
        .uuu1{
            margin-top: 10px;
        }
        .ppp{
            width: 300px;
            height: 50px;
            background-color: #e4393c;
            color: white;
            font-size: 20px;
            font-weight: bold;
            border: 0px solid;
        }
        .item7{
            width: 1208px;
            height: 38px;
            background-color: #f3f3f3;
            display: flex;
            align-items: center;
            border: 1px solid gray;

        }
        .item7-1{
            width: 106px;
            height: 38px;
            background-color: #e4393c;
            color: white;
            text-align: center;
            margin-right: 40px;
        }
        .item7-2{
            margin-right: 40px;
            
        }
        .item7-4{
            margin-left: 40px;
            margin-right: 40px;
        }
        .bbbb{
            margin-top: 8px;
        }
        .item9{
            font-size: 56px;
            color: #8a8989;
            font-weight: bold;

        }
        .item10{
            font-size: 56px;
            color: black;
            font-weight: bold;
        }
        .item8{
            width: 1035px;
            height: 536px;
            margin-top: 30px;
            /* background-color: #f3f3f3; */
        }
        .item11{
            margin-top: 30px;
        }
        .item11,.item12,.item13,.item14{
            color: #666666;
            margin-left: 190px;
        }
        .vvvvv{
            width: 1570px;
            height: 260px;
            background-color: #eaeaea;
            
            
            
        }
       
        
       


    </style>


</head>
<body>
    <div class="container">
        <div class="item1">
            <div class="item1-1">
                <svg t="1740464164389"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2042" width="16" height="16"><path d="M160 448a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z m32-64h192V192H192z m-32 512a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z m32-64h192V640H192z m658.88-560L720 141.12 589.12 272 720 402.88z m-153.6 198.72l-176-176a32 32 0 0 1 0-45.44l176-176a32 32 0 0 1 45.44 0l176 176a32 32 0 0 1 0 45.44l-176 176a32 32 0 0 1-45.44 0zM608 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z m32-64h192V640H640z" p-id="2043"></path></svg>
                京东首页
            </div>
            <div class="item1-2">
                <svg t="1740464580132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3052" width="16" height="16"><path d="M512 427.023m-90 0a90 90 0 1 0 180 0 90 90 0 1 0-180 0Z" fill="" p-id="3053"></path><path d="M512 910.402c-19.14 0-37.482-5.854-53.042-16.929-14.063-10.01-24.926-23.596-31.589-39.46L255.043 585.177l-0.154-0.25C225.522 537.209 210 482.605 210 427.021c0-80.667 31.414-156.506 88.454-213.546S431.333 125.021 512 125.021s156.506 31.414 213.546 88.454C782.587 270.515 814 346.354 814 427.021c0 55.849-15.655 110.671-45.274 158.539l-0.264 0.419-172.081 268.716c-6.755 15.726-17.66 29.176-31.704 39.055-15.485 10.895-33.7 16.652-52.677 16.652zM309.246 551.141l175.494 273.78 1.194 3.197c4.149 11.107 14.381 18.284 26.066 18.284 11.584 0 21.791-7.071 26.004-18.015l1.165-3.028L714.43 551.678C737.701 513.983 750 470.884 750 427.021c0-63.572-24.756-123.339-69.709-168.292-44.952-44.951-104.719-69.708-168.291-69.708s-123.339 24.756-168.292 69.708S274 363.449 274 427.021c0 43.64 12.186 86.552 35.246 124.12z" fill="" p-id="3054"></path></svg>
                广东
            </div>
            <div class="q">
            <div class="item1-3">
                李荣浩
                <svg t="1740464972594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6616" width="16" height="16"><path d="M60.235294 361.411765l744.809412 425.622588A30.117647 30.117647 0 0 1 790.136471 843.294118H173.658353a60.235294 60.235294 0 0 1-59.783529-52.766118L60.235294 361.411765z" fill="#F5C164" p-id="6617"></path><path d="M963.764706 361.411765l-53.63953 429.116235A60.235294 60.235294 0 0 1 850.341647 843.294118H233.893647a30.117647 30.117647 0 0 1-14.968471-56.259765L963.764706 361.411765z" fill="#F5C164" p-id="6618"></path><path d="M512 240.941176l331.053176 509.289412A60.235294 60.235294 0 0 1 792.545882 843.294118H231.454118a60.235294 60.235294 0 0 1-50.507294-93.06353L512 240.941176z" fill="#FFE09E" p-id="6619"></path><path d="M512 240.941176l331.053176 509.289412A60.235294 60.235294 0 0 1 792.545882 843.294118H512V240.941176z" fill="#F9CF7E" p-id="6620"></path><path d="M512 210.823529m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="6621"></path><path d="M963.764706 331.294118m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="6622"></path><path d="M60.235294 331.294118m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="6623"></path></svg>
                <svg t="1740465191313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7589" width="16" height="16"><path d="M906.092102 308.984237c0 2.486634-0.901533 4.976338-2.721994 6.945179L524.814352 725.19152c-3.837398 4.148483-10.311857 4.40124-14.461363 0.563842-4.14746-3.838422-4.40124-10.311857-0.563842-14.461363l378.556779-409.261081c3.837398-4.149507 10.31288-4.40124 14.46034-0.563842C904.986931 303.484989 906.092102 306.231543 906.092102 308.984237z" p-id="7590"></path><path d="M523.796162 718.66999c0 2.739391-1.092891 5.471618-3.255137 7.486508-4.133134 3.853771-10.608615 3.62762-14.46341-0.505513L120.654452 312.305889c-3.852748-4.133134-3.62762-10.606569 0.505513-14.462387 4.134157-3.853771 10.608615-3.62762 14.46341 0.505513l385.424186 413.345096C522.886443 713.664999 523.796162 716.171076 523.796162 718.66999z" p-id="7591"></path></svg>
                &nbsp;|
            </div>
            <div class="item1-4">
                我的订单&nbsp;|
            </div>
            <div class="item1-5">
                我的京东
                <svg t="1740465191313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7589" width="16" height="16"><path d="M906.092102 308.984237c0 2.486634-0.901533 4.976338-2.721994 6.945179L524.814352 725.19152c-3.837398 4.148483-10.311857 4.40124-14.461363 0.563842-4.14746-3.838422-4.40124-10.311857-0.563842-14.461363l378.556779-409.261081c3.837398-4.149507 10.31288-4.40124 14.46034-0.563842C904.986931 303.484989 906.092102 306.231543 906.092102 308.984237z" p-id="7590"></path><path d="M523.796162 718.66999c0 2.739391-1.092891 5.471618-3.255137 7.486508-4.133134 3.853771-10.608615 3.62762-14.46341-0.505513L120.654452 312.305889c-3.852748-4.133134-3.62762-10.606569 0.505513-14.462387 4.134157-3.853771 10.608615-3.62762 14.46341 0.505513l385.424186 413.345096C522.886443 713.664999 523.796162 716.171076 523.796162 718.66999z" p-id="7591"></path></svg>
                |
            </div>
            <div class="item1-6">
                企业采购
                <svg t="1740465191313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7589" width="16" height="16"><path d="M906.092102 308.984237c0 2.486634-0.901533 4.976338-2.721994 6.945179L524.814352 725.19152c-3.837398 4.148483-10.311857 4.40124-14.461363 0.563842-4.14746-3.838422-4.40124-10.311857-0.563842-14.461363l378.556779-409.261081c3.837398-4.149507 10.31288-4.40124 14.46034-0.563842C904.986931 303.484989 906.092102 306.231543 906.092102 308.984237z" p-id="7590"></path><path d="M523.796162 718.66999c0 2.739391-1.092891 5.471618-3.255137 7.486508-4.133134 3.853771-10.608615 3.62762-14.46341-0.505513L120.654452 312.305889c-3.852748-4.133134-3.62762-10.606569 0.505513-14.462387 4.134157-3.853771 10.608615-3.62762 14.46341 0.505513l385.424186 413.345096C522.886443 713.664999 523.796162 716.171076 523.796162 718.66999z" p-id="7591"></path></svg>
                |
            </div>
            <div class="item1-7">
                客户服务
                <svg t="1740465191313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7589" width="16" height="16"><path d="M906.092102 308.984237c0 2.486634-0.901533 4.976338-2.721994 6.945179L524.814352 725.19152c-3.837398 4.148483-10.311857 4.40124-14.461363 0.563842-4.14746-3.838422-4.40124-10.311857-0.563842-14.461363l378.556779-409.261081c3.837398-4.149507 10.31288-4.40124 14.46034-0.563842C904.986931 303.484989 906.092102 306.231543 906.092102 308.984237z" p-id="7590"></path><path d="M523.796162 718.66999c0 2.739391-1.092891 5.471618-3.255137 7.486508-4.133134 3.853771-10.608615 3.62762-14.46341-0.505513L120.654452 312.305889c-3.852748-4.133134-3.62762-10.606569 0.505513-14.462387 4.134157-3.853771 10.608615-3.62762 14.46341 0.505513l385.424186 413.345096C522.886443 713.664999 523.796162 716.171076 523.796162 718.66999z" p-id="7591"></path></svg>
                |
            </div>
            <div class="item1-8">
                网站导航
                <svg t="1740465191313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7589" width="16" height="16"><path d="M906.092102 308.984237c0 2.486634-0.901533 4.976338-2.721994 6.945179L524.814352 725.19152c-3.837398 4.148483-10.311857 4.40124-14.461363 0.563842-4.14746-3.838422-4.40124-10.311857-0.563842-14.461363l378.556779-409.261081c3.837398-4.149507 10.31288-4.40124 14.46034-0.563842C904.986931 303.484989 906.092102 306.231543 906.092102 308.984237z" p-id="7590"></path><path d="M523.796162 718.66999c0 2.739391-1.092891 5.471618-3.255137 7.486508-4.133134 3.853771-10.608615 3.62762-14.46341-0.505513L120.654452 312.305889c-3.852748-4.133134-3.62762-10.606569 0.505513-14.462387 4.134157-3.853771 10.608615-3.62762 14.46341 0.505513l385.424186 413.345096C522.886443 713.664999 523.796162 716.171076 523.796162 718.66999z" p-id="7591"></path></svg>
                |
            </div>
            <div class="item1-9">
                手机京东
                |
            </div>
            <div class="item1-10">
                网站无障碍
            </div>
            </div>
        </div>
        <div class="item2">
            <div class="item2-1">
                <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" width="160px" height="60px">
            </div>
            <div class="item2-2">
                <button class="w">全部分类</button>
            </div>
            <div class="item2-3">
                <div class="e">
                    <input class="u" type="text" placeholder="政府补贴20%手机">
                </div>
                <div class="r">
                    iphone16政府补贴苹果iphone16苹果16苹果手机苹果iphone
                </div>
                <!-- <div class="t"></div> -->
            </div>
            <div class="item2-4">
                <button class="y">
                    我的购物车
                </button>
            </div>
        </div>
        <div class="item3">
            <div class="item3-1">
                Apple &nbsp;产品京东自营旗舰店
            </div>
            <div class="item3-2">
                <img src="https://img14.360buyimg.com/cms/jfs/t1/114720/13/22985/9543/62fdec91E482a002a/f08654a94ed6ea02.png" width="145px" height="35px">
            </div>
        </div>
        <div class="item4">
            <div class="item4-1">首页</div>
            <div class="item4-2">Mac</div>
            <div class="item4-3">iPad</div>
            <div class="item4-4">iPhone</div>
            <div class="item4-5">Watch</div>
            <div class="item4-6">AirPoads</div>
            <div class="item4-7">配件</div>
            <div class="item4-8">App &nbsp;Store充值卡</div>
        </div>
        <div class="item5">
            <div class="item5-1">
                <div class="5-1-1">手机通讯></div>
                <div class="5-1-2">手机></div>
                <div class="5-1-3">Apple></div>
                <div class="5-1-4">iphone16</div>
                
            </div>
            <div class="item5-2">
                <div class="item5-2-1">
                    <svg t="1740470035816" class="icon" viewBox="0 0 1896 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8632" width="40" height="40"><path d="M598.15753909 372.95428467h233.67404953v66.30420667H598.15753909V372.95428467z m0 95.27206426h233.67404953v67.5916668H598.15753909V468.22634892z m442.24262253 128.74603297h240.11135085v53.42960338h-240.11135085v-53.42960338z m38.62380989-121.02127087h161.57627094v40.55500009h-161.57627094v-40.55500009z" fill="#fd5004" p-id="8633"></path><path d="M1471.69937104 183.05388622H399.88864915c-38.62380988 0-70.81031779 31.54277783-70.81031848 70.81031845v516.27159066c0 38.62380988 31.54277783 70.81031779 70.81031848 70.81031845h1073.09818269c37.98007983 0 70.81031779-31.54277783 70.16658775-70.81031845V253.22047393c-0.64373005-38.62380988-32.18650791-70.16658772-71.45404855-70.16658771z m-636.00540136 504.04071808v-26.39293667h-225.30555735v26.39293667h-30.25531771V347.20507808h90.76595314c9.65595231-17.38071443 16.73698435-34.11769877 21.24309547-52.14214325l30.25531772 3.86238105c-5.14984118 17.38071443-11.58714316 32.83023864-20.59936542 47.63603213H865.30555733v339.88952622h-29.61158765v0.64373007z m460.91079707 1.28746079h-28.96785759v-18.02444516h-231.0991286v18.02444516H1006.92619291V568.64825437h290.3223039v119.73381072h-0.64373006z m-252.98595413-148.70166831V452.77682471h212.43095404v86.90357206h-212.43095404z m277.4477006-63.72928574h-28.96785759v-53.42960404h-284.52873198v56.0045243h-28.96785758V396.77230039h342.46444715v79.17881064z m11.5871425-122.95246171h-96.5595244v24.46174646h-30.25531772v-24.46174646h-113.9402388v24.46174646h-30.2553177v-24.46174646h-94.62833421v-26.39293665h95.91579433v-28.32412686h30.25531771v28.32412686H1206.48254367v-28.32412686h30.25531772v28.32412686h95.91579433v26.39293665z" fill="#fd5004" p-id="8634"></path><path d="M598.15753909 564.14214326h233.67404953v72.74150866H598.15753909V564.14214326z" fill="#fd5004" p-id="8635"></path></svg>
                    Apple产品京东自营旗舰店
                </div>
                <div class="item5-2-2">
                    <svg t="1740470132610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10618" width="20" height="20"><path d="M512 0c282.763636 0 512 229.236364 512 512s-229.236364 512-512 512S0 794.763636 0 512 229.236364 0 512 0z m65.303273 832.837818c-8.378182 0-16.430545 1.303273-17.314909 3.258182l0.418909-2.373818-2.094546 6.981818c-0.651636 2.373818-1.256727 4.747636-1.768727 7.121455l-1.442909 7.214545c-2.792727 14.289455-7.586909 28.066909-14.289455 40.96-8.331636 16.430545-9.169455 21.317818-4.282181 21.317818 12.381091 0 43.938909-43.938909 53.34109-74.658909 2.978909-8.936727 1.722182-9.774545-12.567272-9.774545z m18.338909-102.167273c-12.8 0-16.430545 2.56-18.338909 6.609455v-1.070545c-1.722182 4.933818-8.750545 6.609455-24.762182 6.609454-16.011636 0-21.317818 1.908364-21.317818 6.609455 0 4.701091 4.887273 6.842182 17.92 6.842181 8.378182 0 15.36 0 17.221818 1.349819l0.465454 0.791272a242.129455 242.129455 0 0 1-8.378181 19.549091l-4.840728 9.448728a181.76 181.76 0 0 0-13.451636 30.952727c0 2.513455 13.591273 4.189091 35.746909 4.421818h49.570909v35.653818c0 28.392727-1.070545 35.467636-7.261091 39.889455l-1.675636 1.070545a18.152727 18.152727 0 0 0-8.750546 11.962182c0 9.774545 27.508364 2.327273 39.051637-11.077818 8.517818-9.402182 9.774545-16.430545 9.774545-44.404364v-33.047273h44.404364c36.026182 0 44.590545-1.303273 44.590545-6.609454 0-5.352727-8.983273-6.609455-42.682181-7.447273l-43.752728-1.536-3.584-17.92c-1.210182-16.802909-1.629091-18.571636-13.405091-18.757818h-3.444363c-13.917091 0-15.080727 0-15.173818 15.453091v24.669091h-21.317819c-5.538909 0.325818-11.077818 0-16.477091-0.930909l-8.052363-1.861818c1.210182-9.448727 4.421818-18.525091 9.355636-26.670546l11.543273-23.877818h102.912c42.635636-0.139636 51.106909-1.024 51.106909-6.842182 0-5.399273-7.028364-6.376727-40.541091-6.562909h-32.861091c-62.045091 0-72.936727 0-70.795636-6.656 2.141091-6.609455 0-6.609455-12.8-6.609455zM320 831.301818c-16.849455 0-15.127273 0-22.807273 27.554909v-0.465454a200.331636 200.331636 0 0 1-16.849454 42.682182l-8.983273 14.708363h9.402182c10.24 0 31.976727-26.670545 45.428363-55.668363 11.496727-24.762182 10.705455-28.811636-6.190545-28.811637z m164.491636-61.858909h-202.472727l-1.675636 24.948364a138.472727 138.472727 0 0 0-0.605091 17.780363l0.605091 8.890182c15.220364 1.582545 30.533818 2.141091 45.847272 1.722182h42.682182v24.110545c0 31.278545-3.770182 47.709091-11.496727 52.689455l-2.187636 1.070545a11.729455 11.729455 0 0 0-8.517819 9.774546c0 9.867636 25.367273 4.514909 38.632728-8.517818 8.936727-8.285091 10.24-13.637818 10.24-44.357818v-34.769455h88.901818v-53.341091z m-38.167272 60.602182c-10.24 0-14.754909 2.141091-14.754909 6.609454l0.837818 0.41891c5.771636 19.409455 14.568727 37.701818 26.065454 54.272l7.214546 9.728c5.073455 6.656 12.101818 11.496727 20.061091 13.870545 6.795636 0 7.447273-1.070545 0.279272-14.708364l-2.420363-4.514909a149.317818 149.317818 0 0 1-15.965091-42.635636c-5.352727-21.364364-6.004364-23.04-21.364364-23.04z m255.534545 2.56l-15.453091-0.046546 3.118546 8.471273a256 256 0 0 0 7.447272 17.361455c11.496727 26.251636 36.026182 56.552727 45.428364 56.552727 8.471273 0 8.098909-1.722182 1.070545-12.194909l-2.56-3.816727a186.228364 186.228364 0 0 1-15.592727-37.329455c-7.447273-27.089455-7.912727-27.741091-23.458909-28.997818z m-242.315636-50.129455l-1.303273 11.915637-1.256727 12.381091H310.178909l-1.256727-12.381091-1.489455-11.915637h152.110546z m-91.136-46.312727c-1.861818 5.352727-11.496727 6.609455-49.477818 6.609455s-46.545455 1.303273-46.545455 6.609454c0 4.933818 12.753455 6.609455 90.391273 6.795637h59.671272c61.579636-0.139636 72.285091-1.024 72.285091-6.795637 0-6.795636-8.564364-6.609455-49.058909-6.609454-40.541091 0-48.872727-1.256727-48.872727-6.609455 0-4.421818-3.118545-6.050909-8.983273-6.516364l-3.816727-0.09309a16.849455 16.849455 0 0 0-15.592727 6.609454z m236.823272-241.710545c-4.654545 1.722182-8.983273 3.630545-13.218909 4.701091-19.549091 4.189091-39.749818 4.189091-59.298909 0l-2.094545-0.372364a6.842182 6.842182 0 0 0-6.469818 4.189091l-12.008728 20.48c-8.098909 13.498182-16.290909 26.996364-24.669091 41.192727a19.642182 19.642182 0 0 1-10.007272 7.447273l-1.163637 0.372363-1.117091 0.279273a24.343273 24.343273 0 0 1-29.090909-18.338909l-0.930909-2.792727a18.804364 18.804364 0 0 1-1.210182-5.725091 34.117818 34.117818 0 0 0 0 24.296727l2.56 4.654546a37.562182 37.562182 0 0 0 25.832728 16.709818l-38.632728 65.489454c10.891636 2.327273 13.032727 1.675636 19.176728-5.12 9.216-11.124364 20.061091-21.783273 30.533818-32.442181 5.725091-5.678545 11.776-11.031273 18.152727-16.011637l5.399273-2.978909 5.678545-2.56-0.977454 20.48c-0.698182 13.312-1.396364 26.298182-1.396364 39.703273 3.351273-0.232727 6.702545-0.232727 10.053818 0l2.792728 0.093091c3.118545-0.372364 4.328727-2.792727 5.538909-6.516364a307.2 307.2 0 0 1 11.077818-34.350545l3.677091-7.493819a89.367273 89.367273 0 0 1 9.309091-13.824l1.768727-1.954909 2.141091-1.396363a10.472727 10.472727 0 0 1 14.010182 4.654545l2.932363 4.794182c1.768727 3.258182 3.258182 6.749091 4.328728 10.333091l5.306181 20.573091 4.933819 20.573091c0.465455 1.489455 2.141091 3.863273 3.444363 3.863272h14.475637l-0.837819-0.232727z m44.218182-349.090909c-18.432 0.232727-36.957091 1.163636-55.296 2.420363a572.974545 572.974545 0 0 0-69.12 9.634909l-20.805818 4.980364c-41.378909 10.705455-81.640727 25.367273-120.226909 43.845818l-12.148364 5.585455c-24.064 11.776-46.266182 26.996364-65.908363 45.149091l-9.588364 10.100363-9.402182 10.24a532.014545 532.014545 0 0 0-30.952727-17.501091 106.682182 106.682182 0 0 0-21.317818-8.750545l-3.816727-0.744727a21.317818 21.317818 0 0 0-21.41091 12.241454l-2.373818 5.492364c-1.489455 3.723636-2.792727 7.493818-3.770182 11.357091l-4.096 15.453091a350.487273 350.487273 0 0 1-30.72 73.541818l-4.514909 8.797091a136.517818 136.517818 0 0 0-9.774545 28.066909l-0.930909 5.213091a28.578909 28.578909 0 0 0 36.165818 30.254545l11.310545-3.211636c14.894545-4.794182 28.904727-11.915636 41.611637-21.131637l5.306182-3.909818c16.942545-13.777455 26.298182-35.048727 24.762181-57.111273l-0.930909-13.870545c-0.930909-9.216-2.048-18.432-2.048-27.508364l0.418909 0.605091c5.352727 1.536 7.68 5.585455 9.402182 11.776 2.141091 7.447273 5.306182 14.661818 9.355637 21.317818l6.888727 10.286546c9.588364 13.405091 21.085091 25.367273 34.071273 35.560727l12.8 10.146909a418.769455 418.769455 0 0 0 160.861091 75.217455l12.660363 3.025454a220.625455 220.625455 0 0 0 102.772364-3.025454l12.381091-3.863273a273.687273 273.687273 0 0 0 132.887272-97.28l7.912728-11.450182 7.912727-11.776a37.748364 37.748364 0 0 0-8.797091 3.165091l-3.956364 1.768727-4.142545 1.44291-12.939636 3.863272a265.169455 265.169455 0 0 1-132.980364 1.489455l-11.962182-3.165091a202.24 202.24 0 0 1-92.578909-58.088727l-2.327273-2.653091a21.317818 21.317818 0 0 1-3.211636-6.283637v-3.025454a10.007273 10.007273 0 0 1 2.56-5.306182l1.396364-1.024c2.187636-0.930909 5.352727 0 7.586909 1.024 2.327273 1.768727 4.375273 3.863273 6.144 6.190545l8.378182 8.61091c17.221818 16.616727 37.608727 29.789091 59.904 38.725818l13.498181 4.282182a258.792727 258.792727 0 0 0 124.974546 4.282181l10.007273-1.954909c13.218909-3.025455 25.972364-7.819636 37.98109-14.289454l4.561455-2.606546a34.769455 34.769455 0 0 0 10.565818-11.450182l6.190546-13.172363c7.726545-17.826909 13.172364-36.538182 16.244363-55.761455l0.930909-10.612363c0.698182-10.705455 0.372364-21.410909-0.930909-32.023273l-1.722182-6.144a57.157818 57.157818 0 0 0-33.931636-35.048727l-12.381091-5.213091a238.08 238.08 0 0 0-91.694545-16.104728z m-130.513454 64.232727l3.537454 0.046545a18.152727 18.152727 0 0 1 19.176728 17.314909v0.232728a17.966545 17.966545 0 0 1-19.176728 16.802909l-1.954909 0.139636-1.861818-0.139636a17.268364 17.268364 0 0 1 3.816727-34.350546z m216.855272-48.593455c13.963636-0.186182 27.834182 2.327273 40.727273 7.68l2.653091 1.303273c4.375273 2.234182 8.657455 5.026909 8.657455 10.891636a15.127273 15.127273 0 0 1-10.426182 14.894546l-8.890182 3.258182a110.312727 110.312727 0 0 1-18.432 4.189091l-10.938182 1.396363c-14.568727 1.349818-29.323636 0.372364-43.659636-2.839273l-5.911273-1.908363-5.585454-2.56-2.327273-1.210182a11.962182 11.962182 0 0 1 0.372363-20.154182l5.678546-3.863273c7.773091-4.794182 16.570182-7.819636 25.693091-8.936727l7.354182-1.489454c4.980364-0.651636 10.053818-0.651636 15.034181-0.651637z" fill="#707070" p-id="10619"></path><path d="M770.978909 357.748364l-3.956364 1.768727-4.142545 1.442909c-21.410909 6.981818-43.566545 11.170909-65.908364 12.567273l-13.358545 0.465454c-22.341818 0.279273-44.730182-2.327273-66.653091-7.68l-11.962182-3.165091a202.24 202.24 0 0 1-92.578909-58.088727l-2.327273-2.653091a21.317818 21.317818 0 0 1-3.211636-6.283636v-3.025455a10.007273 10.007273 0 0 1 2.56-5.306182l1.396364-1.024 1.768727-0.372363a13.498182 13.498182 0 0 1 5.818182 1.396363c2.327273 1.768727 4.375273 3.863273 6.144 6.190546 18.897455 20.712727 42.263273 36.910545 68.282182 47.336727a258.792727 258.792727 0 0 0 82.618181 14.196364l14.010182-0.232727c14.010182-0.698182 28.020364-2.466909 41.844364-5.399273l10.007273-1.954909c13.218909-3.025455 25.972364-7.819636 37.98109-14.289455l4.561455-2.606545a34.769455 34.769455 0 0 0 10.565818-11.450182l1.210182-2.420364 1.210182-2.420363a532.945455 532.945455 0 0 1-17.966546 37.701818l-0.232727 0.418909-3.816727 3.211636-3.863273 1.675637zM518.981818 209.687273h3.537455a18.245818 18.245818 0 0 1 18.618182 13.684363l0.558545 3.630546v0.232727a18.013091 18.013091 0 0 1-15.546182 16.756364l-3.630545 0.046545-1.954909 0.139637-1.861819-0.139637a17.268364 17.268364 0 0 1-3.025454-33.745454l3.304727-0.605091z m216.855273-48.64c13.963636-0.186182 27.834182 2.327273 40.727273 7.68l2.653091 1.303272c4.375273 2.234182 8.657455 5.026909 8.657454 10.891637a15.127273 15.127273 0 0 1-10.426182 14.894545l-8.890182 3.258182a110.312727 110.312727 0 0 1-18.432 4.189091l-10.938181 1.396364c-14.568727 1.349818-29.323636 0.372364-43.659637-2.839273l-5.911272-1.908364-5.585455-2.56-2.327273-1.210182a11.962182 11.962182 0 0 1 0.372364-20.154181l5.678545-3.863273c7.773091-4.794182 16.570182-7.819636 25.693091-8.936727l7.354182-1.489455c4.980364-0.651636 10.053818-0.651636 15.034182-0.651636z" fill="#707070" p-id="10620"></path></svg>
                    联系客服
                </div>
                <div class="item5-2-3">
                    <svg t="1740470181815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11618" width="20" height="20"><path d="M546.9696 55.7056l124.5184 252.3136a38.89664 38.89664 0 0 0 29.3376 21.2992l278.4256 40.448c31.9488 4.6592 44.7488 43.9296 21.6064 66.4576l-201.472 196.4032a39.10656 39.10656 0 0 0-11.2128 34.5088l47.5648 277.2992c5.4784 31.8464-27.9552 56.1152-56.5248 41.0624l-249.0368-130.9184a38.8096 38.8096 0 0 0-36.2496 0l-249.0368 130.9184c-28.5696 15.0528-62.0032-9.2672-56.5248-41.0624l47.5648-277.2992c2.1504-12.6464-2.048-25.5488-11.2128-34.5088L23.1936 436.224C0.0512 413.696 12.8 374.3744 44.8 369.7664l278.4256-40.448a39.0144 39.0144 0 0 0 29.3376-21.2992l124.5184-252.3136c14.2848-28.9792 55.552-28.9792 69.888 0z" fill="#F40C0C" p-id="11619"></path><path d="M668.5184 416.0512c1.0752-0.0512 2.0992-0.1024 3.1744-0.0512 0.4608 0 0.9728 0.0512 1.4336 0.1024 1.792 0.1536-0.8704-0.1536-0.1024-0.0512 1.9968 0.3584 3.9424 0.8192 5.8368 1.4848 0.3584 0.1024 1.024 0.5632 1.3824 0.512-1.024-0.4096-1.2288-0.512-0.7168-0.3072 0.2048 0.1024 0.4608 0.2048 0.6656 0.3072 0.8704 0.4096 1.7408 0.8704 2.56 1.3824 0.8192 0.512 1.6384 1.024 2.4576 1.5872 1.536 1.0752-0.0512 0.1024 0-0.0512 0 0.0512 1.1776 0.9728 1.3312 1.0752 1.536 1.3312 2.9184 2.816 4.2496 4.4032 0.9728 1.1264-0.9216-1.3312 0 0 0.256 0.4096 0.5632 0.8192 0.8192 1.1776 0.512 0.8192 1.024 1.6384 1.4848 2.5088 0.256 0.4096 0.4608 0.8704 0.6656 1.28 0.1024 0.2048 0.2048 0.4608 0.3072 0.6656 0.256 0.512 0.1536 0.3072-0.3072-0.7168 0 0.7168 0.768 1.9968 0.9728 2.7136 0.3072 0.9216 0.512 1.8944 0.7168 2.816 0.0512 0.256 0.4608 2.304 0.1536 0.9216s0.0512 0.6656 0.0512 0.9216c0.256 3.9936 3.328 7.8848 7.68 7.68 3.9424-0.1536 7.9872-3.3792 7.68-7.68a40.0896 40.0896 0 0 0-13.6704-27.5456c-7.936-6.912-18.2784-11.264-28.928-10.496-3.9936 0.256-7.8848 3.328-7.68 7.68 0.256 3.9424 3.4816 7.9872 7.7824 7.68z" fill="#FFFAFA" p-id="11620"></path></svg>
                    已关注店铺
                </div>
            </div>
        </div>
        <div class="item6">
            <div class="item6-1">
                <div class="item6-1-1">
                    <img src="https://img11.360buyimg.com/n1/s450x450_jfs/t1/255907/28/18299/38536/67a59d80F4bcd24f4/5004c2bc9fc46c3b.png.avif" width="450px" height="450px">
                </div>
                <div class="item6-1-2">
                    <div class="item6-1-2-1">
                        <svg t="1740471152909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12590" width="22" height="32"><path d="M210.4 511.1 641.3 80.2c22.8-22.8 59.8-22.8 82.6 0 22.8 22.8 22.8 59.8 0 82.6L375.7 511.1l348.3 348.3c22.8 22.8 22.8 59.8 0 82.6-22.8 22.8-59.8 22.8-82.6 0L210.4 511.1 210.4 511.1zM210.4 511.1" p-id="12591"></path></svg>
                    </div>
                    <div class="item6-1-2-2">
                        <img src="https://img11.360buyimg.com/n5/s54x54_jfs/t1/255907/28/18299/38536/67a59d80F4bcd24f4/5004c2bc9fc46c3b.png.avif" width="58px" height="58px">
                    </div>
                    <div class="item6-1-2-3">
                        <img src="https://img11.360buyimg.com/n5/s54x54_jfs/t1/100922/9/45800/6474/66df723fF8b7254f0/4ab4391587a07169.jpg.avif" width="58px" height="58px">
                    </div>
                    <div class="item6-1-2-4">
                        <img src="https://img11.360buyimg.com/n5/s54x54_jfs/t1/227211/25/27200/60036/66df723fF2c9b3583/4ffe22aa288db6cf.jpg.avif" width="58px" height="58px">
                    </div>
                    <div class="item6-1-2-5">
                        <img src="https://img11.360buyimg.com/n5/s54x54_jfs/t1/18852/9/23953/9624/66df723eF6a817501/43d6be3b6676a5f5.jpg.avif" width="58px" height="58px">
                    </div>
                    <div class="item6-1-2-6">
                        <img src="https://img11.360buyimg.com/n5/s54x54_jfs/t1/159716/5/48175/29502/66df723eFa1234420/c7bdd1f74aa656ab.jpg.avif" width="58px" height="58px">
                    </div>
                    <div class="item6-1-2-7">
                        <svg t="1740471601671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13701" width="22" height="32"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#7F7F7F" p-id="13702"></path></svg>
                    </div>
                </div>
                <div class="item6-1-3">
                    
                </div>
            </div>
            <div class="item6-2">
                <div class="item6-2-1">
                    <svg t="1740470035816" class="icon" viewBox="0 0 1896 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8632" width="40" height="40"><path d="M598.15753909 372.95428467h233.67404953v66.30420667H598.15753909V372.95428467z m0 95.27206426h233.67404953v67.5916668H598.15753909V468.22634892z m442.24262253 128.74603297h240.11135085v53.42960338h-240.11135085v-53.42960338z m38.62380989-121.02127087h161.57627094v40.55500009h-161.57627094v-40.55500009z" fill="#fd5004" p-id="8633"></path><path d="M1471.69937104 183.05388622H399.88864915c-38.62380988 0-70.81031779 31.54277783-70.81031848 70.81031845v516.27159066c0 38.62380988 31.54277783 70.81031779 70.81031848 70.81031845h1073.09818269c37.98007983 0 70.81031779-31.54277783 70.16658775-70.81031845V253.22047393c-0.64373005-38.62380988-32.18650791-70.16658772-71.45404855-70.16658771z m-636.00540136 504.04071808v-26.39293667h-225.30555735v26.39293667h-30.25531771V347.20507808h90.76595314c9.65595231-17.38071443 16.73698435-34.11769877 21.24309547-52.14214325l30.25531772 3.86238105c-5.14984118 17.38071443-11.58714316 32.83023864-20.59936542 47.63603213H865.30555733v339.88952622h-29.61158765v0.64373007z m460.91079707 1.28746079h-28.96785759v-18.02444516h-231.0991286v18.02444516H1006.92619291V568.64825437h290.3223039v119.73381072h-0.64373006z m-252.98595413-148.70166831V452.77682471h212.43095404v86.90357206h-212.43095404z m277.4477006-63.72928574h-28.96785759v-53.42960404h-284.52873198v56.0045243h-28.96785758V396.77230039h342.46444715v79.17881064z m11.5871425-122.95246171h-96.5595244v24.46174646h-30.25531772v-24.46174646h-113.9402388v24.46174646h-30.2553177v-24.46174646h-94.62833421v-26.39293665h95.91579433v-28.32412686h30.25531771v28.32412686H1206.48254367v-28.32412686h30.25531772v28.32412686h95.91579433v26.39293665z" fill="#fd5004" p-id="8634"></path><path d="M598.15753909 564.14214326h233.67404953v72.74150866H598.15753909V564.14214326z" fill="#fd5004" p-id="8635"></path></svg>
                    Apple/苹果 iPhone 16（A3288）256GB 白色 支持移动联通电信5G 双卡双待手机
                </div>
                <div class="item6-2-2">
                    <div class="item6-2-2-1">
                        <div class="z">京东价</div>
                        <div class="x">￥5999.00</div>
                        <div class="c">降价通知</div>
                    </div>
                    <div class="item6-2-2-2">
                        <div class="v">
                            促&nbsp;&nbsp;&nbsp;销
                        </div>
                        <div class="b">
                            满额返劵
                        </div>
                        <div class="n">
                            实付满100元，收货后返满70-7.2元券，先到先得。若点击跳转后的页面展示券面额则为用券商品
                        </div>
                    </div>
                    <div class="item6-2-2-3">
                        页，如无券面额则为凑单商品页或活动页。   详情>>
                    </div>
                </div>
                <div class="item6-2-3">
                    <div class="qq">增值业务</div>
                    <div class="ww">高价回收，极速到账</div>
                </div>
                <div class="item6-2-4">
                    <div class="rr">
                        配送至
                    </div>
                    <div class="tt">
                        广东广州市白云区白云湖街道
                    </div>
                    <div class="yy">
                        有货
                    </div>
                    <div class="uu">
                        支持
                    </div>
                    <div class="oo">
                        59元免基础运费
                    </div>
                    <div class="pp">
                        可配送全球
                    </div>
                    <div class="aa">
                        7天价保
                    </div>
                    <div class="ss">
                        免举证退换货
                    </div>
                </div>
                <div class="item6-2-5">
                    <div class="ff">京东物流</div>
                    <div class="gg">京准达</div>
                    <div class="hh">211限时达</div>
                    <div class="kk">明日达</div>
                </div>
                <div class="item6-2-6">
                    <div class="zz">由</div>
                    <div class="xx">京东</div>
                    <div class="cc"> 发货, 并提供售后服务. 23:10前付款，预计</div>
                    <div class="vv">明天(02月26日)</div>
                    <div class="bb">送达</div>
                </div>
                <div class="item6-2-7">
                    <div class="dd">选择外观</div>
                    <div class="ll">
                        <img src="https://img13.360buyimg.com/n9/s40x40_jfs/t1/255227/20/18203/43346/67a59d82F22417f40/7dff24953ad24a81.png.avif" width="40px" height="40px">
                        群青色
                    </div>
                    <div class="mm">
                        <img src="https://img11.360buyimg.com/n9/s40x40_jfs/t1/260822/40/17409/42864/67a59d83F7f6c39f4/a59c07bcaba47ebe.png.avif" width="40px" height="40px">
                        深青色
                    </div>
                    <div class="nn">
                        <img src="https://img10.360buyimg.com/n9/s40x40_jfs/t1/255666/28/18350/42758/67a59d7fF162e8263/89ae6d88e76118f3.png.avif" width="40px" height="40px">
                        粉色
                    </div>
                </div>
                <div class="item6-2-8">
                    <div class="qqq"><div class="qqq1">选择版本</div></div>
                    <div class="www"><div class="www1">128GB</div></div>
                    <div class="rrr"><div class="rrr1">256GB</div></div>
                    <div class="ttt"><div class="ttt1">512GB</div></div>
                </div>
                <div class="item6-2-9">
                    <div class="yyy">购买方式</div>
                    <div class="uuu"><div class="uuu1">公开版</div></div>
                </div>
                <div class="item6-2-10">
                    <button class="ppp">加入购物车</button>
                </div>
                <div class="item6-2-11"></div>
                <div class="item6-2-12"></div>
                <div class="item6-2-13"></div>
            </div>
        </div>
        <div class="item7">
            <div class="item7-1"><div class="bbbb">商品介绍</div></div>
            <div class="item7-2">规格与包装</div>
            <div class="item7-3">售后保障</div>
            <div class="item7-4">商品评价（100万+）</div>
            <div class="item7-5">手机社区</div>

        </div>
        <div class="item9">
            空间拍摄
        </div>
        <div class="item10">将照片和视频带入全新维度。</div>
        <div class="item8">
            <img src="https://www.apple.com.cn/iphone-16/images/overview/camera-system/spatial/hero_spatial__gna2d6arpimq_large_2x.png" width="1033px" height="535px">
        </div>
        <div class="vvvvv">
        <div class="item11">
            <pre>
                关于我们| 联系我们| 联系客服| 合作招商| 商家帮助| 营销中心| 手机京东| 友情链接| 销售联盟| 京东社区| 风险监测| 质量公告| 隐私政策| 京东公益| Media & IR
            </pre>
        </div>
        <div class="item12">
            <pre>京公网安备 11000002000088号|京ICP备11041704号| ICP| 药品医疗器械网络信息服务备案|自营医疗器械经营资质|药品网络交易第三方平台备案凭证|新出发京零 字第大120007号</pre>
        </div>
        <div class="item13">
            <pre>互联网出版许可证编号新出网证(京)字150号| 出版物经营许可证|违法和不良信息举报电话：4006561155</pre>
        </div>
        <div class="item14">
            <pre>Copyright © 2004 - 2025 京东JINGDONG 版权所有|消费者维权热线：4006067733 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照 | 增值电信业务经营许可证</pre>
        </div>
    </div>

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

运行截图如下：

作业二：完成京东登录页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页</title>
    <style>
        .container{
            width: 1570px;
            height: 845px;
            background-color: #f2f3f5;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        .item1{
            width: 1008px;
            height: 60px;
            /* background-color: antiquewhite; */
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .item1-2{
            display: flex;
        }
        .x{
            font-size: 14px;
            color: #999999;
        }
        .item2{
            width: 1008px;
            height: 34.89px;
            display: flex;
            align-items: baseline;
            

            background-color: #FFF5CC;
            color: #994D00;
            font-size: 12px;
            
        }
        .y{
            margin-top: 10px;
        }
        .item3{
            width: 1008px;
            height: 476px;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            border-radius: 8px;
        }
        .item3-1{
            width: 300px;
            height: 34.89px;
            display: flex;
            background-color: #FFF5CC;
            color: #994D00;
            font-size: 12px;
            align-items: baseline;
            margin-right: 650px;
            /* margin-bottom: 50px; */
        }
        .u{
            margin-top: 10px;
        }
        .item3-2{
            width: 650px;
            height: 422px;
            /* background-color: cadetblue; */
            display: flex;
            justify-content: space-around;
            /* align-items: baseline; */
            
        }
        .item3-2-1{
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 100px;
        }

        .i{
            color: #fa2c19;
            font-size: 20px;
            font-weight: bold;
            margin-right: 10px;
            margin-left: 70px;
        }
        .o{
            font-size: 20px;
            font-weight: bold;
        }
        .item3-2-1-1{
            display: flex;

        }
        .p{
            width: 350px;
            height: 43px;
            border-radius: 8px;
            border: 0px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: #f2f3f5;
        }
        .a{
            width: 350px;
            height: 43px;
            border-radius: 8px;
            border: 0px;
            background-color: #f2f3f5;
        }
        .item3-2-1-4{
            font-size: 14px;
            color: #666666;
            margin-left: 293px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .s{
            width: 350px;
            height: 43px;
            background-color: rgb(124, 53, 53);
            color: white;
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            border: 0px;
        }
        .g{
            display: flex;
        }
        .h{
            display: flex;
            margin-right: 170px;
        }
        .item3-2-3{
            margin-top: 32px;
            margin-left: 160px;
            /* margin-bottom: 60px; */

        }
       
        .item3-2-1-6{
            display: flex;
            justify-content: space-between;
            margin-top: 35px;
            color: #595959;
        }
        .item3-2-3-1{
            font-size: 20px;
            font-weight: bold;
            margin-left: 25px;
            margin-bottom: 10px;
        }
        .item3-2-3-3{
            font-size: 14px;
            color: #666666;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .j{
            color: #595959;
        }
        .v{
            color: #e4393c;
            margin-right: 43px;
        }
        .item4,.item5{
            font-size: 12px;
            color: #666666;
        }
        .item4{
            margin-top: 30px;
        }
        .item5{
            margin-bottom: 70px;
        }
        
       
        

    </style>
</head>
<body>
    <div class="container">
        <div class="item1">
            <div class="item1-1">
                <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" width="170px" height="60px">
            </div>
            <div class="item1-2">
                <svg t="1740226372290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2371" width="16" height="16"><path d="M52 520c0 258.464 209.536 468 468 468S988 778.464 988 520 778.464 52 520 52 52 261.536 52 520z m24 0c0-245.216 198.784-444 444-444S964 274.784 964 520 765.216 964 520 964 76 765.216 76 520z" fill="#8b8b8b" p-id="2372"></path><path d="M277.456 461.44c1.024 13.28 2.432 26.592 2.928 39.952 0.928 24.752-8.608 44.48-28.224 58.912a138.704 138.704 0 0 1-49.696 23.616c-21.104 5.056-38.72-12.768-33.216-34.4 3.12-12.304 7.136-24.832 13.392-35.696 15.552-26.864 25.008-55.968 32.8-85.888a94.24 94.24 0 0 1 5.76-16.32c4.224-9.024 13.84-13.712 23.04-10.88 6.64 2.08 13.12 5.008 19.328 8.368 9.824 5.28 19.392 11.28 29.088 17.008 5.92-6.512 11.616-13.408 17.744-19.728 21.616-22.064 48.288-36.064 75.424-48.976 42.56-20.224 86.336-37.376 132.384-47.168a495.6 495.6 0 0 1 64.88-9.168c25.952-2.112 51.984-2.88 78.016-2.352 33.712 0.784 66.944 5.424 97.712 21.312 16.624 8.608 30.544 20.464 33.536 39.952 2.08 13.648 1.296 28.096-0.208 41.952-2.512 23.504-11.856 45.216-20.976 66.608-2.432 5.648-8.752 10.176-14.256 13.488-13.92 8.336-29.44 12.688-45.216 15.76-44.4 8.736-87.968 4.848-130.464-10.832-25.216-9.328-45.552-26.272-64.096-45.68-1.904-1.984-3.472-4.688-5.84-5.856-2.48-1.264-6.48-2.272-8.256-1.04-1.856 1.328-2.928 5.648-2.432 8.224 0.656 3.072 2.928 6.144 5.136 8.576 26.88 29.888 59.6 49.904 98.16 59.072 46.08 10.944 91.904 10.336 137.12-5.056 2.56-0.88 5.12-1.904 7.632-3.072 2.416-1.104 4.848-2.512 8.176-3.072-4.976 7.472-9.696 15.104-14.896 22.352-35.088 48.368-80.048 82.368-136.8 99.376-36.224 10.848-72.448 9.312-108.432 0.288-60.192-15.104-115.44-41.04-163.072-82.512-14.816-12.912-28.8-26.848-38.56-44.352a85.92 85.92 0 0 1-8.784-21.472c-1.472-5.952-3.84-9.76-8.832-11.28z m438.032-147.76c-6.992 0.64-14.048 0.944-20.96 2.032-10.688 1.76-20.896 5.36-29.36 12.528-7.52 6.304-6.656 15.408 1.696 20.256 3.36 1.904 7.136 3.28 10.832 4.32 16.912 4.768 34.144 3.52 51.264 1.536 8.768-1.04 17.44-3.904 25.744-7.2 6.08-2.112 10.016-8 9.68-14.432-0.256-6.816-5.696-9.28-10.56-11.648-12.096-5.728-25.088-7.344-38.336-7.392z m-200.832 80.256c10.144 0 18.032-7.36 18.032-16.576-0.08-9.168-8.336-16.784-18.112-16.704-10.192 0.064-17.824 7.248-17.872 16.704 0 9.232 7.824 16.496 17.952 16.576z m78.48 399.248c-4.688 0-9.184 0.32-13.6-0.128-1.216-0.16-2.864-2.272-3.2-3.84-3.28-13.184-6.08-26.56-9.648-39.712a51.232 51.232 0 0 0-6.816-14.592c-4.432-6.816-11.856-7.68-16.832-1.296-4.848 6.144-9.12 13.12-12.128 20.432-4.352 10.688-7.472 21.92-10.56 33.136-1.28 4.624-2.848 7.04-7.84 6.24-2.784-0.448-5.76-0.08-9.28-0.08 0.736-19.2 1.376-37.84 2.096-58.112-4.432 2.24-7.792 3.36-10.336 5.392-6 4.864-11.712 10.048-17.12 15.552-9.696 10.176-19.104 20.752-28.512 31.28-5.92 6.608-8 7.296-18.192 4.864a14945.488 14945.488 0 0 1 36.352-63.2c-11.84-3.504-22.144-8.32-26.576-20.832-2.688-7.632-2.432-16 0.704-23.456 0.72 2.736 1.296 5.536 2.08 8.24 4 14 15.968 21.264 29.44 17.072 3.808-1.344 7.04-3.888 9.264-7.248 11.824-19.648 23.232-39.6 34.512-59.52 2.08-3.68 4.128-4.32 7.984-3.68 18.528 3.008 37.12 5.872 55.808 0.8 4.064-1.072 8-2.848 12.352-4.432 0.048 52.112 0.048 104.16 0.048 157.12z" fill="#8b8b8b" p-id="2373"></path></svg>
                <div class="x">登录页面，改进建议</div>
            </div>
        </div>
        <div class="item2">
            <div class="r"><svg  t="1740406955022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2444" width="16" height="16"><path d="M923.2 337.9c-22.5-53.2-54.7-101-95.8-142.1-41.1-41.1-88.8-73.3-142.1-95.8-55.1-23.3-113.7-35.1-174-35.1s-118.9 11.8-174 35.1c-53.2 22.5-101 54.7-142.1 95.8-41.1 41.1-73.2 88.9-95.7 142.1-23.3 55.1-35.1 113.7-35.1 174s11.8 118.9 35.1 174c22.5 53.2 54.7 101 95.8 142.1 41.1 41.1 88.8 73.3 142.1 95.8 55.1 23.3 113.7 35.1 174 35.1s118.9-11.8 174-35.1c53.2-22.5 101-54.7 142.1-95.8 41.1-41.1 73.3-88.8 95.8-142.1 23.3-55.1 35.1-113.7 35.1-174-0.1-60.3-11.9-118.8-35.2-174z m-141 444.7C709.8 855 613.7 894.8 511.4 894.8c-102.3 0-198.5-39.8-270.8-112.2-72.3-72.3-112.2-168.5-112.2-270.8 0-102.3 39.8-198.5 112.2-270.8 72.4-72.3 168.5-112.2 270.8-112.2 102.3 0 198.5 39.8 270.8 112.2 72.3 72.4 112.2 168.5 112.2 270.8 0 102.3-39.9 198.5-112.2 270.8z m0 0" p-id="2445"></path><path d="M511.9 260.5c-28.2 0-50.6 23.7-49 51.9l15.2 267.3c1 17.9 15.9 31.9 33.8 31.9 18 0 32.8-14 33.8-31.9l15.2-267.3c1.6-28.2-20.8-51.9-49-51.9z m0 412.1c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48z m0 0" p-id="2446"></path></svg></div>
            <div class="y">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</div>
        </div>
        <div class="item3">
            <div class="item3-1">
                <div class="r"><svg  t="1740406955022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2444" width="16" height="16"><path d="M923.2 337.9c-22.5-53.2-54.7-101-95.8-142.1-41.1-41.1-88.8-73.3-142.1-95.8-55.1-23.3-113.7-35.1-174-35.1s-118.9 11.8-174 35.1c-53.2 22.5-101 54.7-142.1 95.8-41.1 41.1-73.2 88.9-95.7 142.1-23.3 55.1-35.1 113.7-35.1 174s11.8 118.9 35.1 174c22.5 53.2 54.7 101 95.8 142.1 41.1 41.1 88.8 73.3 142.1 95.8 55.1 23.3 113.7 35.1 174 35.1s118.9-11.8 174-35.1c53.2-22.5 101-54.7 142.1-95.8 41.1-41.1 73.3-88.8 95.8-142.1 23.3-55.1 35.1-113.7 35.1-174-0.1-60.3-11.9-118.8-35.2-174z m-141 444.7C709.8 855 613.7 894.8 511.4 894.8c-102.3 0-198.5-39.8-270.8-112.2-72.3-72.3-112.2-168.5-112.2-270.8 0-102.3 39.8-198.5 112.2-270.8 72.4-72.3 168.5-112.2 270.8-112.2 102.3 0 198.5 39.8 270.8 112.2 72.3 72.4 112.2 168.5 112.2 270.8 0 102.3-39.9 198.5-112.2 270.8z m0 0" p-id="2445"></path><path d="M511.9 260.5c-28.2 0-50.6 23.7-49 51.9l15.2 267.3c1 17.9 15.9 31.9 33.8 31.9 18 0 32.8-14 33.8-31.9l15.2-267.3c1.6-28.2-20.8-51.9-49-51.9z m0 412.1c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48z m0 0" p-id="2446"></path></svg></div>
                <div class="u">京东不会以任何理由要求您转账，谨防诈骗</div>
            </div>
            <div class="item3-2">
                <div class="item3-2-1">
                    <div class="item3-2-1-1">
                        <div class="i">密码登录</div>
                        <div class="o">短信登录</div>
                    </div>
                    <div class="item3-2-1-2">
                        <input class="p" type="text" placeholder="账号名/手机号/邮箱">
                    </div>
                    <div class="item3-2-1-3">
                        <input class="a" type="text" placeholder="密码">
                    </div>
                    <div class="item3-2-1-4">
                        忘记密码
                    </div>
                    <div class="item3-2-1-5">
                        <button class="s">登 &nbsp;&nbsp;录</button>
                    </div>
                    <div class="item3-2-1-6">
                        <div class="g">
                            <svg t="1740410557742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3410" width="16" height="16"><path d="M931.396342 597.895516c-18.412522-49.611518-90.528235-161.621029-91.551153-217.881514h-0.511459c0-3.068754 0.511459-6.137507 0.511459-9.206261 0-204.583581-146.78872-370.807741-327.845189-370.807741-181.056469 0.511459-327.845189 166.22416-327.845189 371.3192 0 3.068754 0.511459 6.137507 0.511459 9.206261h-0.511459c-1.022918 56.260485-72.627171 168.269996-91.551153 217.881514-18.923981 49.611518-23.527112 99.223037-14.832309 139.116835 8.694802 39.382339 15.855228 63.932369 24.038571 71.604254s15.855228 16.366687 40.405257-1.534377c19.946899-16.366687 41.428175-49.611518 41.428175-49.611518s17.901063 51.657354 57.794862 91.551152c-31.198996 14.83231-76.718843 47.565683-79.787597 69.558418-3.068754 21.481276 47.565683 102.80325 166.735619 104.849085 119.169936 1.534377 158.552275-49.611518 162.643947-53.70319 11.252097-11.763556 20.458358-18.923981 20.458358-18.923981s9.71772 7.160425 20.458358 18.923981c4.091672 4.091672 43.474011 55.749026 162.643947 53.70319 119.169936-2.045836 169.804372-83.367809 166.735619-104.849085-3.068754-21.481276-48.588601-54.726108-79.787597-69.558418 39.893798-39.382339 57.794862-91.551153 57.794862-91.551152s21.481276 33.244832 41.428175 49.611518c24.55003 17.389604 32.221914 9.206261 40.405258 1.534377 8.183343-7.671884 15.343769-32.221914 24.03857-71.604254 9.71772-39.893798 4.603131-90.016776-13.809391-139.628294z" fill="#369BCE" p-id="3411"></path></svg>
                            <div>QQ</div>
                        </div>
                        <div class="h">
                            <svg t="1740410688905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4458" width="16" height="16"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="4459"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="4460"></path></svg>
                            <div>微信</div>
                        </div>
                        <div class="j">立即注册</div>
                    </div>
                </div>
                <div class="item3-2-2"></div>
                <div class="item3-2-3">
                    <div class="item3-2-3-1">手机扫码安全登录</div>
                    <div class="item3-2-3-2">
                        <img class="l" src="https://qr.m.jd.com/show?appid=133&size=147&t=1740411023358" width="204px" height="204px">
                    </div>
                    <div class="item3-2-3-3">
                        <div class="c">打开</div>
                        <div class="v">手机京东</div>
                        <div class="b">扫描二维码</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item4 ">
            关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益
        </div>
        <div class="item5">
            Copyright © 2004-2025  京东JD.com 版权所有
        </div>
    </div>
</body>
</html>

运行截图如下：

作业三：完成京东注册页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        .container{
            width: 1570px;
            height: 900px;
            /* background-color: aqua; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        .item1{
            width: 1570px;
            height: 110px;
            background-color: white;
            box-shadow: 8px 8px 8px  #f2f2f2;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }
        .item1-1{
            margin-bottom: 20px;
            margin-left: 100px;

        }
        .item1-2{
            font-size: 24px;
            color: #333333;
            margin-right: 900px;
        }
        .item1-3{
            font-size: 16px;
            color: #999999;
        }
        .item1-4{
            font-size: 16px;
            color: #ee2222;
            margin-right: 100px;
            text-decoration: underline;
        }
        .item2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }
        .item2-1{
            display: flex;
            margin-bottom: 15px;
        }
        .x{
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            color: white;
            background-color: #33bb44;
            border-radius: 50%;
            text-align: center;
        }
        .v{
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            color: #999999;
            /* background-color: #33bb44; */
            border-radius: 50%;
            text-align: center;
        }
        .n{
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            color: #999999;
            /* background-color: #33bb44; */
            border-radius: 50%;
            text-align: center;
        }
        .b,.c{
            color: #999999;
        }
        .w{
            width: 290px;
            height: 51px;
            margin-left: -6px;
            margin-bottom: 2px;
        }
        .e{
            width: 108px;
            height: 57px;
            background-color: white;
            border: 1px solid gray;
            margin-top: 2px;
        }
        .s{
            width: 404px;
            height: 54px;
            border: 1px solid gray;
            background-color: white;
        }
        .item2-2,.item2-3,.item2-4,.item2-6{
            margin-bottom: 28px;
        }
        .ll{
            width: 404px;
            height: 54px;
            background-color: #e2231a;
            color: white;
            font-size: 16px;
            border: 0px;
        }
        .item2-5{
            text-decoration: underline;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
            margin-right: 290px;
        }
        .item2-6{
            display: flex;
            color: #999999;
            font-size: 12px;
        }
        .icon{
            margin-right: 9px;
        }
        .ww{
            margin-left: 90px;
            margin-right: 90px;
        }
        .ee{
            margin-right: 6px;
        }
        .qq{
            color: #33bb44;
        }
        .item2-3{
            margin-bottom: 60px;
        }
        .item2-2{
            display: flex;
            align-items: center;
        }
        .hh{
            margin-bottom: 4px;
        }
        .item3{
            color: #0563c1;
            margin-top: 100px;
            text-decoration: underline;
            margin-bottom: -90px;
        }
        .item4{
            color: #999999;
            font-size: 12px;
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="item1">
            <div class="item1-1"><img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" width="160px" height="60px"></div>
            <div class="item1-2">欢迎注册</div>
            <div class="item1-3">已有账号？</div>
            <div class="item1-4">请登录></div>
        </div>
        <div class="item2">
            <div class="item2-1">
                <div class="x">1</div>
                <div class="c">&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;>&nbsp;&nbsp;</div>
                <div class="v">2</div>
                <div class="b">&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;>&nbsp;&nbsp;</div>
                <div class="n">3</div>
            </div>
            <div class="item2-6">
                <div class="qq">验证手机号</div>
                <div class="ww">填写账号信息</div>
                <div class="ee">注册成功</div>

            </div>
            <div class="item2-2">
                <div class="hh"><button class="e">中国0086∨</button></div>
                <input class="w" type="text" placeholder="建议使用常用手机号">
            </div>
            <div class="item2-3">
                <button class="s">点击按钮进行验证</button>
            </div>
            <div class="item2-4">
                <button class="ll">下一步</button>
            </div>
            <div class="item2-5">
                <svg t="1740550224722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2806" width="20" height="20"><path d="M511.931733 1023.351467a512.887467 512.887467 0 0 1-377.514666-166.126934l-20.241067-21.742933 20.241067-21.742933a513.7408 513.7408 0 0 1 377.514666-166.126934c143.121067 0 281.088 60.552533 377.514667 166.126934l20.241067 21.742933-20.206934 21.742933a512.887467 512.887467 0 0 1-377.514666 166.126934z m-308.565333-187.869867a448.853333 448.853333 0 0 0 308.565333 123.1872 448.853333 448.853333 0 0 0 308.565334-123.1872 448.853333 448.853333 0 0 0-308.565334-123.1872 448.853333 448.853333 0 0 0-308.565333 123.221333z m309.077333-234.461867c-90.2144 0-163.84-73.489067-163.84-163.5328 0-90.043733 73.6256-163.566933 163.84-163.566933 90.248533 0 163.874133 73.5232 163.874134 163.566933a163.7376 163.7376 0 0 1-163.84 163.5328z m0-262.382933a99.259733 99.259733 0 0 0-99.0208 98.850133 99.259733 99.259733 0 0 0 99.0208 98.850134 99.259733 99.259733 0 0 0 99.054934-98.850134 98.952533 98.952533 0 0 0-99.054934-98.850133z" fill="#B4B4B4" p-id="2807"></path><path d="M116.770133 721.1008A442.88 442.88 0 0 1 64.9216 512c0-246.340267 200.704-446.122667 447.010133-446.122667 246.340267 0 447.010133 200.2944 447.010134 446.122667 0 72.977067-18.1248 144.930133-51.848534 208.5888 16.5888 15.530667 32.1536 32.085333 46.6944 49.698133A506.914133 506.914133 0 0 0 1023.761067 512c0-282.043733-229.717333-511.317333-512.341334-511.317333C229.307733 1.160533 0.1024 230.434133 0.1024 512c0 91.101867 24.3712 180.6336 70.519467 258.286933 13.994667-17.066667 29.559467-33.655467 46.148266-49.152z" fill="#B4B4B4" p-id="2808"></path></svg>
                企业用户注册
            </div>
        </div>
        
        <div class="item3">
            <pre>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益</pre>
        </div>
        <div class="item4">Copyright © 2004-2025  京东JD.com 版权所有</div>
    </div>
</body>
</html>

运行截图如下：