web第三次作业

.归零，

于 2024-07-18 14:44:02 发布

阅读量276

点赞数 2

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/2301_81610630/article/details/140522904

版权

1.京东单个商品展示界面仿写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东单个商品页</title>
 
    <style>
        *{
            margin: 0;
        }
        /* .a,.b,.c,.e,.d{
            border: 1px solid black;
            margin-top: 5px;
        } */
 
 
        /* 头部 搜素框 */
        .a{
            height: 100px;
        }
        .a1,.a2,.a3,.a4{
            height: 100px;
            display: inline-block;
            /* border: 1px solid red; */
        }
        /* 京东logo */
        .a1{
            width: 16%;
            margin-left: 150px;
        }
        /* 分类下拉框 */
        .a2{
            width: 10%;
           vertical-align: middle;
           
        }
        /* 搜索框box */
        .a3{
            width: 38%;
            vertical-align: middle;
        }
        /* 搜索输入框 */
        .a3>.search .text{
            border: none;
            height: 30px;
            width: 400px;
            border: 2px solid brown;
            margin-left: 80px;
        }
        /* 提交框1 */
        span>.submit1{
            border: none;
            height: 34px;
            width: 50px;
            margin-top: 2px;
            margin-left: -4px;
            background-color: brown;
            color: white;
            font-family: "楷体";
        } 
        /* 提交框2 */
        span>.submit2{
            border: none;
            height: 34px;
            width: 50px;
            margin-top: 2px;
            margin-left: -5px;
            background-color: rgb(101, 100, 100);
            color: white;
            font-family: "楷体";
        }
       /* 搜索框下面的文字 */
        .a3>ul li{
          list-style: none;
          display: inline-block;
         margin-left: 10px;
         font-size: 12px;
         font-family: "微软雅黑";
         position: relative;
         left: 0;
        }
        /* 购物框 */
        .a4{
            width: 19%;
            vertical-align: middle;
        }
        .a4>input{
            border: none;
            height: 30px;
            width:120px ;
            border: 1px solid rgb(174, 174, 174);
            
            font-family: "黑体";
            margin-left: 70px;
            font-size: 15px;
            color: rgb(251, 251, 251);
        }
       
 
 
 
        /* 店名（官网可复制图片） */
       .b{
            height: 120px;
        }
 
 
 
 
        /* 导航栏商品选择*/
        .c{
            height: 40px;
            background-color: black;
        }
        /* 左边导航文字 */
        .c1{
            display: inline-block;
            margin-left: 200px;
        }
        .c1>ul li{
            list-style: none;
            display: inline-block;
             color: white;
            font-size: 16px;
            margin-left: 30px;  
            margin-top: 10px;
        }
        .c1>ul li:hover{
            color: red;
        }
        .c .c11{
            border: none;
            background-color: black;
            color: white;
            font-size: 16px;
        }
        /* 右边导航搜索框 */
       .c>span{
       margin-left: 150px;
       }
 
 
 
 
 
       /* 商品导航栏介绍 */
       .d{
        height: 20px;
        background-color: rgb(206, 201, 201);
        }
       .d>ul{ 
        margin-left: 200px;
       
       }
       .d>ul>li{
        list-style: none;
        display: inline-block;
        margin-left: 20px;
        font-family: "微软雅黑";
        font-size: 13px;
       
       }
 
       
       
        /* 商品样式 */
        .e{
            height: 700px;
        }
        .e>div{
           height:  690px;
            display: inline-block;
            /* border: 1px solid red; */
        }
        .e1{
            width: 28%;
            vertical-align: top;
        }
 
        /* 左边商品展示 */
        .e1>.e11{
            margin-top: 15px;
            margin-left: 120px;
        }
        .e1>.e12, .e1>.e13{
          margin-left: 120px;
      
        }
        .e1>.e12>div,.e1>.e13>div{
            margin-top: 20px;
            display: inline-block;
            padding-left: 15px;
        }
        .e13>.e132{
           margin-left: 210px;
        }
        .e131:hover,.e132:hover{
            color: red;
        }
 
        /* 中间具体商品展示 */
        .e2{
            width: 40%;
        }
        .e2>div{
            margin-left: 100px;
        }
        /* 商品名称 */
        .e21{
            margin-top: 25px;
            color: rgb(102, 102, 102) ;
            font-size: 16px;
        }
        /* 配送地址、配送时间 */
        .e23>.e232,.e23>.e233,.e23>.e234{
            margin-left:100px ;
        }
       .e232>ul li,.e233>ul li{
            display: inline-block;
            list-style: none;
            color: rgb(112, 162, 243);
            margin-left: 20px;
            margin-top: 10px;
            font-size: 14px;
        }
        /* 去掉七天价保的边框 */
        .e2321{
            border: none;
        }
        .e23>.e234>div{
            margin-left:100px ;
            font-size: 13px;
            margin-top: 10px;
        }
        .e234>span{
            color: red;
        }
        .e235{
            margin-top: 10px;
            font-size: 11px;
        }
 
        /* 右边推荐商品 */
        .e3{
            width: 28%;
            /* border: 1px solid red; */
            height: 590px;
            position: absolute;
           right: 0;
           top:35%;
        
        }
        .e3>div{
            margin-left: 80px;
            margin-top: 20px;
        }
        .e3>span{
            margin-top: 20px;
            margin-left: 140px;
            font-family:"微软雅黑" ;
            font-size: 20px;
            color: rgb(90, 88, 88);
        }
      
    </style>
</head>
<body>
 
 
    <!-- 头部 总搜索框-->
    <div class="a">  
        <!-- 京东logo -->
        <div class="a1"><img src="./京东logo.png" width="210px" height="80px" alt=""></div>
        <!-- 全部分类下拉框 -->
        <div class="a2">
            <select name="" id="">
                <option value="">全部分类</option>
                <option value="">家用电器</option>
                <option value="">数码</option>
                <option value="">...</option>
            </select>
        </div>
 
 
    <!-- 搜索框box -->
        <div class="a3">
          <div  class="search">
            <input type="text" class="text" placeholder="口红">
           <span> <input type="submit"  class="submit1" value="搜全站">
            <input type="submit"  class="submit2" value="搜本店"></span>
          </div>
            <ul>
                <li>兰蔻</li>
                <li>兰蔻口红</li>
                <li>唇釉</li>
                <li>兰蔻312</li>
                <li>兰蔻唇釉</li>
            </ul>
        </div>
        <!-- 我的购物车下拉框 -->
        <div class="a4"><input type="text"  placeholder="我的购物车&nbsp;&nbsp;&nbsp;>"></div>
    </div>
 
 
    <!-- 店名 -->
    <div class="b">
       <img src="https://img13.360buyimg.com/cms/jfs/t1/112143/7/26088/33799/625fd539E0496e66a/1915006515024903.jpg.avif" height="100px" width="1800px" alt="">
    </div>
 
    <!-- 导航栏商品选择 -->
    <div class="c"> 
        <div class="c1">
            <ul>
                <li>首页</li>
                <li>
                    <select name="" class="c11" id="">
                        <option value="">全部分类</option>
                        <option value="">家用电器</option>
                        <option value="">数码</option>
                        <option value="">...</option>
                    </select>
                </li>
                <li>送礼甄选</li>
                <li>护肤系列</li>
                <li>彩妆系列</li>
                <li>香氛系列</li>
                <li>青春奢宠</li>
                <li>精选套餐</li>
            </ul>
        </div>
        <span> <input type="text" class="c12" placeholder="小黑瓶">
            <input type="submit" class="c13" value="搜索"></span>
        
    </div>
 
    <!-- 商品导航栏介绍 -->
    <div class="d">
        <ul>
            <li>美妆护肤</li>
            <li>></li>
            <li>香水彩妆</li>
            <li>></li>
            <li>唇彩唇蜜/唇釉</li>
            <li>></li>
            <li>兰蔻(LANCOME)</li>
            <li>></li>
            <li>兰蔻清纯柔润水唇釉...</li>
        </ul>
    </div>
 
 
    <!-- 商品样式 -->
    <div class="e">
        <!-- 官网下载图片 -->
        <div class="e1">
           <div class="e11"> <img src="https://img11.360buyimg.com/n1/jfs/t1/244628/2/6057/244416/65f2db11Fc4664562/6a91037590af74a9.jpg.avif" height="400px" width="400px" alt=""></div>
            <div class="e12">
                <div><img src="https://img11.360buyimg.com/n5/jfs/t1/240390/3/11684/114472/666c625fF74208cfb/b22df5ce39bb8464.jpg.avif" height="80px" width="80px" alt=""></div>
                <div><img src="https://img11.360buyimg.com/n5/jfs/t1/233651/39/17561/80575/66609799Fd72a98b0/489f8d20997fef3f.jpg.avif" height="80px" width="80px" alt=""></div>
                <div><img src="https://img11.360buyimg.com/n5/jfs/t1/119759/4/41873/84502/65f2db10F82d69d3e/26910196fac2d8aa.jpg.avif" height="80px" width="80px" alt=""></div>
                <div><img src="https://img11.360buyimg.com/n5/jfs/t1/129602/27/38642/164725/65f2db0fF8c1a1bc7/253f4025eab9d471.jpg.avif"height="80px" width="80px"  alt=""></div>
            </div>
            <div class="e13">
                <div class="e131"><举报></div>
                <div class="e132"><关注></div>
            </div>
        </div> 
 
        <!-- 中间的商品具体介绍 -->
        <div class="e2">
            <!-- 商品名称 -->
            <div class="e21">兰蔻312裸唇釉裸柔桃 春夏显白柔和裸橘色口红唇膏礼盒生日礼物送女友</div>
            <!-- 价格 -->
            <div class="e22"><img src="./京东价格表.png" width="600px" height="200px" alt=""></div>
            <!-- 配送地址 、配送时间 -->
            <div class="e23">
                <div class="e231">配&nbsp;送&nbsp;至
                    <select name="" id="">
                        <option value="">湖南省长沙市望城区丁字湾镇芙蓉北路</option>
                    </select>
                    <span>有货</span>
                <div>
                <div class="e232">
                    <ul>
                        <li>支持&nbsp;&nbsp;&nbsp;59元免基础运费</li>
                        <li>|</li>
                        <li>可配送全球</li>
                        <li>|</li>
                        <li>京东发货&售后</li>
                        <li>|</li>
                        <li>
                            <select name="" class="e2321" id="">
                                <option value="">七天价保</option>
                                <option value="">过敏无忧</option>
                                <option value="">免费上门退换</option>
                                <option value="">破损退换</option>
                                <option value="">闪电退款</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="e233">
                    <ul>
                        <li>京东物流</li>
                        <li>后天达</li>
                        <li>|</li>
                        <li>预约送货</li>
                        <li>|</li>
                        <li>部分发货</li>
                    </ul>
                </div>
                <div class="e234">由<span>京东</span>发货，并提供售后服务，明天16:15前下单，预计06月17日(周一)送达</div>
                <div class="e235">重&nbsp;&nbsp;&nbsp;量&nbsp;&nbsp;0.036kg</div>
            </div>
            <!--选择商品的款式（和前面方法大差不差，这里偷小懒） -->
            <div class="e24"><img src="./商品样式.png" width="600px" alt=""></div>
         <hr>
        </div> 
 
        <!-- 右边推荐商品 -->
         <div class="e3">
            <span>看了又看</span>
            <div><img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/180872/32/45337/154696/666c5e04F84100f40/530b4bdd49a36ab1.jpg" width="200px" height="200px" alt=""></div>
            <div><img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/238489/4/10710/120924/666c5e04F72d9e29c/c05500b1aafac7bf.jpg" width="200px" height="200px" alt=""></div>
            <div><img src="https://img10.360buyimg.com/n1/s150x150_jfs/t1/185622/8/46139/134744/666c5e0aF45781819/34471b729c92ee1e.jpg" width="200px" height="200px" alt=""></div>
         </div>
 
    </div>
   
</body>
</html> 
 
<!-- 其中出现的问题：写完e2后e3突然就以e2为对齐以及渲染标准了，好奇怪 -->
<!-- <div class="e3">
    <span>看了又看</span>
    <div><img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/180872/32/45337/154696/666c5e04F84100f40/530b4bdd49a36ab1.jpg" width="200px" height="200px" alt=""></div>
    <div><img src="https://img13.360buyimg.com/n1/s150x150_jfs/t1/238489/4/10710/120924/666c5e04F72d9e29c/c05500b1aafac7bf.jpg" width="200px" height="200px" alt=""></div>
    <div><img src="https://img10.360buyimg.com/n1/s150x150_jfs/t1/185622/8/46139/134744/666c5e0aF45781819/34471b729c92ee1e.jpg" width="200px" height="200px" alt=""></div>
</div>  -->

2.京东首页界面仿写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东界面</title>
    <style>
        /* div{
            border: 1px solid red;
        } */
        *{
            margin: 0;
        }
 
        /* 头部 */
        .a{
            height: 60px;
            background-color: red;
        }
 
 
        /* 导航栏 */
        .b{
            height: 40px;  
        }
        /* 导航栏内容渲染 */
        .b ul{
            display: inline-block;
        }
        .b>ul li{
            display: inline-block;
           list-style: none;
           margin-left: 20px;
           margin-top: 10px;
        }
        .b1 span,.b5 span{
            color: red;
        }
        
        
 
        /* 搜索栏 */
        .c{height: 100px; }
        .c1,.c2,.c3{display: inline-block;}
        .c1,.c3{
            width: 18%;
        }
        .c1 img{
            margin-left: 60px;
        }
        .c2{
            width: 58%;
        }
        /* 搜索框 */
        .c2>.box {
            margin-top: 20px;
            margin-left: 200px;
            border: none;
        }
        .text{
            
            width: 470px;
            height: 25px;
            border: 2px solid red;
        }
        .submit{
            height: 27px;
            background-color: red;
        }
        /* 搜索框下的语句 */
        .c2>ul li{
            display: inline-block;
            margin-left: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
            font-size:14px ;
        }
 
        /* 主体 */
        .d{
            height: 350px;  
            background-color: rgb(235, 235, 235);
        }
        .d1,.d2,.d3,.d4,.d5{display: inline-block;}
        .d1,.d2,.d5{
            width: 15%;
        }
        .d2>ul{
            border: 1px solid rgb(195, 194, 194);
            border-radius: 3%;
            /* box-shadow: 2px 2px 2px; */
            background-color: white;
        }
        .d1 img{
            float: right;
        }
        .d3{
            width: 33%;
        }
        .d4{
            height: 338px;
            width: 20%;
        }
        .d4>.d41,.d4>.d42,.d4>.d43,.d4>.d44{
            height: 24%;
            margin-top: 5px;
            border: 1px solid rgb(168, 167, 167);
            border-radius: 3%;
        }
 
        .d2>ul li{
          list-style: none;
            font-size: 12px;
           padding-top: 3px;
           
        }
 
        /* 尾部 */
        .e{
            height: 400px;
        }
        .e>.box1{
            height: 350px;
            width: 1100px;
            background-color: red;
            position: absolute;
            margin-left: 15%;
            margin-top:20px;
            border-radius: 2%;
        }
       
        .box1>span{
            font-size: 30px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            color: rgb(31, 20, 7);
            position: absolute;
            margin-left: 25%;
           margin-top: 10px;
        }
        .box1>input{
            border: none;
            height: 30px;
            width: 220px;
            background-color: rgb(166, 232, 12);
            font-size: 18px;
            position: absolute;
            margin-left: 43%;
           margin-top: 15px;
           border-radius: 10px;
        }
        .box1>.box2{
            height: 270px;
            width: 1000px;
            display: grid;
            grid-template-columns: repeat(6,1fr);
            grid-template-rows: repeat(2,1fr);
            grid-gap: 10px;
            margin-top: 5%;
            margin-left: 45px;
           
        }
        .box2>div{
            border: 1px solid rgb(189, 189, 189);
            border-radius: 5%;
            background-color: white;
        }
 
 
 
 
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="a"> <img src="./头部.png" height="60px" width="1400px" alt=""></div>
   
 
    <!-- 导航栏 -->
    <div class="b">
        <ul>湖南</ul>
        <ul>切换至企业版</ul>
        <ul>
            <li class="b1">你好，<span>请登录</span></li>
            <li>免费注册&nbsp;&nbsp;&nbsp;|</li>
            <li>我的订单&nbsp;&nbsp;&nbsp;|</li>
            <li>我的京东&nbsp;&nbsp;&nbsp;|</li>
            <li class="b5"> <span>企业采购</span>&nbsp;&nbsp;&nbsp;|</li>
            <li>商家服务&nbsp;&nbsp;&nbsp;|</li>
            <li>网站导航&nbsp;&nbsp;&nbsp;|</li>
            <li>手机京东&nbsp;&nbsp;&nbsp;|</li>
            <li>网站无障碍</li>
        </ul>
    </div>
 
    <!-- 搜索栏 -->
    <div class="c">
        <div class="c1"><img src="	https://img10.360buyimg.com/img/jfs/t1/217337/13/41302/12933/6658993dF6b3349e7/19a1dab36f5e5bc9.jpg" width="144px" height="90px" alt=""></div>
        <div class="c2">
           <form action="" class="box">
            <input type="text" class="text" placeholder="鲁花花生油" >
            <input type="submit" class="submit" value="搜素">
           </form>
           <ul>
            <li>京东手机</li>
            <li>京东超市</li>
            <li>电脑数码</li>
            <li>京东家电</li>
            <li>大牌奥莱</li>
            <li>拍卖</li>
            <li>京东生鲜</li>
            <li>京东会员</li>
            <li>进口好物</li>
            <li>京东五金城</li>
           </ul>
        </div>
        <div class="c3"><img src="https://img12.360buyimg.com/babel/jfs/t20270530/219934/19/40764/88939/66588936Fc62020cb/556428d80813c7aa.png.avif" width="144px" height="90px" alt=""></div>
    </div>
 
    <!-- 主体 -->
    <div class="d">
        <div class="d1"><img src="./页面左.png" width="199px" height="340px" alt=""></div>
        <div class="d2">
            <ul>
                <li>家用电器</li>
                <li>手机/运营商/数码</li>
                <li>电脑/办公/文具用品</li>
                <li>家居/家具/家装/厨具</li>
                <li>男装/女装/童装/内衣</li>
                <li>美妆/个人清洁/宠物</li>
                <li>女鞋/箱包/钟表珠宝</li>
                <li>男鞋/运动/户外</li>
                <li>房产/汽车/汽车用品</li>
                <li>母婴/玩具乐器</li>
                <li>食品/酒类/生鲜/特产</li>
                <li>艺术/礼品/鲜花/农牧园艺</li>
                <li>京东/买药/计生情趣</li>
                <li>图书/文娱/教育/电子书</li>
                <li>机票/酒店/旅游/生活</li>
                <li>支付/白条/保险/企业金融</li>
                <li>安装/清洗/维修/二手</li>
                <li>元器件/原材料/五金机电</li>
            </ul>
        </div>
        <div class="d3"> <img src="./界面中间.png" height="340px" width="500px" alt=""></div>
        <div class="d4">
            <div class="d41"> <img src="./d41.png" height="80px" width="310px" alt=""></div>
            <div class="d42"><img src="./d42.png" height="80px" width="310px" alt=""></div>
            <div class="d43"><img src="./d43.png" height="80px" width="310px"  alt=""></div>
            <div class="d44"><img src="./d44.png" height="80px" width="310px" alt=""></div>
        </div>
        <div class="d5"><img src="./界面右.png"width="199px" height="340px" alt=""></div>
    </div>
 
    <!-- 尾部 -->
    <div class="e">
       <div class="box1">
        <span>爆款低价开抢</span>
        <input type="text" class="" placeholder="618周年庆&nbsp;&nbsp;又便宜又好">
            <div class="box2">
                <div>商品1</div>
                <div>商品2</div>
                <div>商品3</div>
                <div>商品4</div>
                <div>商品5</div>
                <div>商品6</div>
                <div>商品7</div>
                <div>商品8</div>
                <div>商品9</div>
                <div>商品10</div>
                <div>商品11</div>
                <div>商品12</div>
            </div>
       </div>
    </div>
</body>
</html>

3.京东登录页面仿写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页面</title>
    <!-- 
        头部top
            -logo标识
            -字体欢迎登录部分
        主体
            -中间区域的主体
            -居中的主体区域
            -登录的白色区域（
                登录
                文本框input
                超链接忘记密码
                提交submit
            ）
        尾部
            -无序的超链接
            -版权字段
     -->
     
     <style>
        .top{
            width: 1400px;
            margin: 0;
        }
 
        .logo{
            margin-left: 30px;
        }
        .upper{
            width: 1400px;
            height: 40px;
            background-color: antiquewhite;
            text-align: center;
            font-size: 15px;
            margin-top: 20px;
            font-family: "微软雅黑";
            padding-top: 17px;
        }
 
        .main{
            width: 1400px;
            height: 400px;
            background-color:#e93854;
           
        }
 
        .login{
            width: 200px;
            height: 240px;
            float: right;
            background-color:white;
            margin-top: 100xp;
            border: 1px solid gray;
            padding: 40px 40px 40px 40px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px;
            vertical-align: center;
            margin-top: 40px;
            margin-right: 270px;
        }
 
        .index{
            list-style-type: none;
            display: inline-block;
        }
 
        .bottom ul{
            text-align: center;
            margin-top: 20px;
        }
 
        /* 无序超链接渲染  */
       .bottom ul li{
            display: inline-block;
            list-style: none;
            text-align: center;
            font-size: 12px;
            margin-top: 10px;
            
        }
 
        a{  
            text-decoration: none;
            color: #666;
            text-align: center;
        }
 
        /* 京东中间图片 */
         .main img{
            margin-left: 20%;
        }
 
        /* 通配符 */
        *{
            margin: 0;
            padding: 0;
        }
 
        /* QQ 微信 立即注册*/
        .login ul li{
            list-style: none;
            display: inline-block;
            font-size:14px ;
            color: #666;
            margin-top: 30px;
        }
 
        /* 忘记密码 */
        .forg{
            text-align: right;
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
 
        /* 表单标签 */
        .input{
            width: 200px;
            height: 30px;
 
            /*配合下面拥有一个自己的表单边框  */
            border: 1px solid #bbddbb;
            margin-top: 20px;
            text-align: center;
        }
 
        /* 去掉表单的边框 */
        .input input{
            outline: none;
            border: none;
            margin-top: 10px;
            text-align: left;
        }
 
        /* 提交框 */
        .signin{
            background-color: rgb(229, 112, 112);
            width: 200px;
            height: 25px;
            border-radius: 5px;
            margin-top: 20px;
        }
 
        /* 版权 */
        p{
            font-size: 12px;
            text-align: center;
            color: #666;
        }
        input:focus{
            width: 180px;
            height: 30px;
        }
 
        .login .r1{
            color: red;
        }
     </style>
</head>
<body>
        <!-- 头部 -->
        <div class="top">
            <div class="logo"><img src="./京东logo.png" width="316px" height="60px" alt=""></div>
           
        </div>
        <div class="upper">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</div>
        
        <!-- 主体 -->
        <div class="main">
            <img src="./京东中间图片.png"  width="400px" height="400px" alt="">
            <div class="login">
                <span class="r1" >密码登录</span>&nbsp;&nbsp;
                <span class="r2">短信登录</span>
                <div class="input"> <input type="text" placeholder="账号名/手机号/邮箱" name="username"></div>
                <div class="input"><input type="password" placeholder="密码" name="password" required></div>
                <div class="forg">忘记密码</div>
                <button type="submit" class="signin"><a href="https://www.baidu.com">登&nbsp;&nbsp;录</a></button>
                <ul>
                    <li class="qq">QQ</li>&nbsp;&nbsp;
                    <li class="vx">微信</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <li class="zhuce">立即注册</li>
                </ul>
        </div>
        </div>
 
        <!-- 尾部 -->
        <div class="bottom">
            <ul>
                <li><a href="#">关于我们&nbsp;<span>|</span></a></li>
                <li><a href="#">联系我们&nbsp;<span>|</span></a></li>
                <li><a href="#">人才招聘&nbsp;<span>|</span></a></li>
                <li><a href="#">商家入驻&nbsp;<span>|</span></a></li>
                <li><a href="#">广告服务&nbsp;<span>|</span></a></li>
                <li><a href="#">手机京东&nbsp;<span>|</span></a></li>
                <li><a href="#">友情链接&nbsp;<span>|</span></a></li>
                <li><a href="#">销售联盟&nbsp;<span>|</span></a></li>
                <li><a href="#">京东社区&nbsp;<span>|</span></a></li>
                <li><a href="#">京东公益</a></li>
            </ul>
            <p>Copyright&copy;2004-2024&nbsp;&nbsp;  京东JD.com 版权所有</p>
        </div>
</body>
</html>