实战模拟京东商城前端项目-CSDN博客

本文链接：https://blog.csdn.net/m0_51562908/article/details/141355384

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城</title>
    <link rel="stylesheet" type="text/css" href="./css/reselt.css">
    <style>
        .container {
            height: 30px;
            background-color: #e3e4e5;
            color: #999;
            font-size: 12px;
        }

        .static {
            width: 1390px;
            height: 50px;
            /*margin: 0 auto;*/
            background-color: white;
            position: fixed;
            top: 0px;
            left: 0px;
            margin: 0px 42px;
            z-index: 100;
            display: none;
            line-height: 50px;
            font-size: 0;
            /*padding: 10px;*/
            /*display: none;*/
        }

        .static .div2 {
            margin-top: 8px;
        }

        /*
        开始设置
        */
        .static .leftfix a {
            font-size: 12px;
            border: #e7e1e1 1px solid;
            color: #232222;
            padding: 15px 25px;
            position: relative;
        }

        .static .leftfix a:hover {
            background-color: red;
        }

        .static .leftfix a ul li {
            /*background-color: #232222;*/
            padding: 0;
            border: 0;
        }

        .static .leftfix a ul li button {
            /*background-color: #232222;*/
            text-align: left;
            width: 100%;
            background-color: #cd1212;
            color: #f6f3f3;
        }

        .static .leftfix a ul li button:hover {
            background-color: white;
            color: red;
        }

        .static .leftfix a ul {
            color: white;
            width: 232px;
            height: 304px;
            position: absolute;
            top: 47px;
            background-color: #cd1212;
            left: -1px;
            padding: 0 0px;
            display: none;
        }

        .static .leftfix a ul li dl {
            width: 800px;
            color: red;
            height: 304px;
            display: none;
            background-color: white;
            position: absolute;
            top: -14px;
            left: 232px;
        }

        .static .leftfix a ul li dl dd span {
            font-size: 16px;
            margin-right: 20px;
        }

        .static .leftfix a ul li dl dd span, ol li {
            display: inline-block;
            float: left;
        }

        .static .leftfix a ul li dl dd ol li button {
            background-color: white;
            border-left: 1px solid #e7e1e1;
            margin: 10px;
            padding: 5px;
            color: #999;
        }

        .static .leftfix a ul li:hover .dlDiv dl {
            display: block;
        }

        .static .leftfix a:hover ul {
            display: block;
        }

        .static input {
            height: 18px;
            width: 128px;
            padding: 7px 15px;
            /*border: #d54b4b;*/
            border: 2px #e33131 solid;
        }

        .static button {
            margin-right: 20px;
            padding: 9px 15px;
            background-color: #e33131;
            position: relative;
            top: -1px;
        }

        .container .content-nav {
            /*background-color: red;*/
            width: 1390px;
            height: 30px;
            margin: 0 auto;
            line-height: 30px;
        }

        .content-nav ul li {
            /*margin-right: 20px;*/
            /*margin-top: 7px;*/
            float: left;
        }

        .content-nav .ul2 li a {
            margin: 0;
            padding-right: 10px;
            padding-left: 10px;
            border-right: 1px solid gray;
        }

        .logo .logo1 {
            height: 54px;
            margin-right: 150px;
        }

        .logo .logo1 img {
            width: 243px;
            height: 54px;
        }

        .logo .search-nav {
            width: 700px;
            height: 69px;
            /*这个能让我们的间隙没有*/
            font-size: 0;
        }

        .logo .search-nav input {
            width: 450px;
            height: 36px;
            position: relative;
            border: 3px red solid;
            border-right: 0;
            /*bottom: 1px;*/
            top: 1px;
        }

        .logo .search-nav button {
            width: 90px;
            height: 42px;
        }

        .search-nav .search-truenav {
            /*background-color: skyblue;*/
            /*height: 25px;*/
            margin-top: 5px;
            /*这个地方简直是一个大坑*/
            font-size: 12px;
        }

        .search-nav .search-truenav ul li {
            float: left;
            padding-right: 15px;
        }


        /*全部结果栏*/
        .content-nav1 {
            width: 1390px;
            height: 30px;
            background-color: #fff;
            text-align: left;
            margin: 0 auto;
            line-height: 30px;
        }

        /*第四个部分brand price ...标签设计*/
        .nav2 {
            width: 1390px;
            margin: 0px auto;
            height: 34px;
            line-height: 34px;
            /*background-color: skyblue;*/
            border-bottom: #e7e1e1 1px solid;
        }

        .brand {
            border-top: #e7e1e1 1px solid;
        }

        .brand ul li {
            float: left;
            padding: 0;
            margin-right: 10px;
        }

        .brand .span1 {
            /*text-align: center;*/
            display: block;
            padding-left: 10px;
            width: 100px;
            color: red;
            background-color: #ddd;
        }

        .brand ul li a {
            margin-left: 10px;
            margin-right: 30px;
            color: #005aa0;;
        }


        /*价格*/
        .price ul li {
            float: left;
            margin: 0;
            padding: 0;
            /*margin-right: 10px;*/
        }

        .price ul li a {
            margin-left: 10px;
            margin-right: 45px;
            color: #005aa0;;
        }

        .price span {
            /*text-align: center;*/
            display: block;
            padding-left: 10px;
            width: 100px;
            color: red;
            background-color: #ddd;
        }

        .choice .span2 {
            width: 100px;
            padding-left: 10px;
            background-color: #ddd;
            color: red;
        }

        .choice li {
            float: left;
        }

        .choice ul {
            position: relative;
        }

        .choice li span a {
            /*font-size: 16px;*/
            color: #005aa0;
        }

        .choice li span {
            /*font-size: 16px;*/
            display: inline-block;
            border: 1px solid #ddd;
            color: #005aa0;
            margin-left: 10px;
            height: 20px;
            line-height: 20px;
            margin-right: 30px;
            position: relative;
            top: 3px;
        }

        /*欧克*/
        .choice li span:hover {
            background-color: red;
        }

        .choice li span a {
            font-size: 16px;
        }

        .choice ul {
            position: relative;
        }

        .choice .box {
            height: 100px;
            width: 1000px;
            display: none;
            /*background-color: #005aa0;*/
            text-align: center;
            padding-left: 10px;
            border: 1px #e7e1e1 solid;
        }

        .choice .box {
            /*display: block;*/
            position: absolute;
            top: 36px;
            left: 0;
            height: 50px;
            line-height: 50px;
        }

        .choice .box ul li {
            font-size: 14px;
            margin-right: 30px;
        }

        .choice .box ul li a {
            color: #005aa0;
        }

        /*直接就使用这个欧克*/
        .choice li:hover .box {
            display: block;
        }


        /*主要的内容去域*/
        .content-main {
            background-color: white;
            width: 1390px;
            height: 2500px;
            margin: 10px auto;


        }

        .content-main .side {
            width: 180px;
            height: 100%;
            /*background-color: blue;*/
            text-align: center;
            border: 1px solid #e7e1e1;
        }

        .content-main span {
            margin-top: 10px;
            font-size: 14px;
        }

        .content-main .side ul li {
            font-size: 0;
            margin-top: 10px;
        }

        .content-main .right {
            width: 1200px;
            height: 100%;
            background-color: #f5f3f3;
        }

        .side .span1 {
            color: red;
            position: relative;
            right: 40px
        }

        .side .span2 {
            margin: 0;
            padding-right: 45px;
            position: relative;
            top: -9px;
            font-size: 12px
        }

        .side .span3 {
            text-align: left;
            padding: 10px;
            position: relative;
            bottom: 10px;
        }

        .side p {
            display: inline;
            color: #005aa0
        }

        /*right边的处理*/
        .mainContent {
            height: 95%;
            width: 100%;
            border: 1px solid #eeeaea;
        }

        /*分页的内容*/
        .page-content {
            /*float: left;*/
            height: 125px;
            width: 100%;
            text-align: center;
            /*background-color: #b97d7d;*/
            line-height: 125px;
            font-size: 0;
        }

        .page-content span {
            display: inline;
            width: 34px;
            height: 34px;
            /*background-color: #c02e2e;*/
            border: 1px solid #e7e1e1;
            padding: 10px;
            font-size: 16px;
            margin: 2px 10px;
            color: #343434;
        }

        .page-content button {
            font-size: 14px;
            background-color: white;
            padding: 12px 20px;
            border: 1px solid #e7e1e1;
        }


        /*页脚区域搜索区域*/
        .footer {
            width: 1390px;
            /*height: 90px;*/
            padding-top: 20px;
            margin: 0 auto;
            border: 1px solid #e7e1e1;
            font-size: 0;
            line-height: 90px;
            text-align: center;
        }

        .footer span {
            margin-left: 10px;
            margin-right: 100px;
            color: #232222;
        }

        .footer input {
            width: 466px;
            height: 30px;
            margin-top: 3px;
        }

        .footer button {
            padding: 0 15px;
            background-color: #d54b4b;
            color: white;
            height: 34px;
        }

        /*服务区*/
        .service {
            background-color: #eaeaea;
            margin: 20px 0 auto;
            height: 300px;
            /*width: 14px;*/
        }

        .service-logo {
            /*background-color: #d54b4b;*/
            width: 1348px;
            /*height: 142px;*/
            margin: 0 auto;
            text-align: center;
            padding-top: 30px;
            padding-bottom: 10px;
            padding-left: 65px;
            border-bottom: 1px solid #e7e1e1;
        }

        .service ol li {
            /*float: left;*/
            margin-left: 10px;
        }

        /*help区域*/
        /*这个到高度式不确定的*/
        .service-help {
            /*background-color: #3ca208;*/
            width: 1348px;
            height: 100px;
            margin: 0 auto;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-left: 65px;
            color: #999;
            /*float: left;*/
        }

        .service-help ul {
            float: left;
            margin-right: 20px;
            padding-left: 20px;
        }

        .service-help ul li {
            cursor: pointer;
            margin-top: 10px;
            width: 200px;
        }

        /*页脚区域*/
        .footers {
            background-color: #eaeaea;
            border: 1px solid #e7e1e1;
            height: 167px;
            padding-bottom: 30px;
            text-align: center;
        }

        .footers ol {
            display: inline-block;
            width: 1370px;
            /*height: 100px;*/
            margin: 0 auto;
            padding-left: 180px;
            /*line-height: 100px;*/
            /*background-color: #d54b4b;*/
        }

        .footers ol li {
            padding-right: 10px;
            border-right: 1px solid #cbc5c5;
            margin-left: 10px;
            font-weight: 600;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .footer-second {
            width: 1390px;
            /*height: 100px;*/
            margin: 0 auto;
            padding-left: 190px;
            /*text-align: left;*/
        }

        .footer-second ul li {
            float: left;
            /*margin: 0 5px;*/
            padding: 0 5px;
        }

        .footer-second .ul1 {
            padding-top: 5px;
            padding-left: 200px;
        }


        .footer-second ul li a {
            border-right: 1px solid #cbc5c5;
            padding-right: 10px;
        }

        .footer-second .ul2 {
            padding-top: 5px;
            position: relative;
            left: -40px;
        }

        .footer-second .ul3 {
            padding-top: 5px;
            padding-left: 400px;
        }

        .footer-second .ul4 li a {
            padding-top: 10px;
            padding-left: 400px;
            border: 0;
            background-image: url(//misc.360buyimg.com/jdf/1.0.0/unit/global-footer/5.0.0/i/new_footer.png);
            background-repeat: no-repeat;
        }

        .mainContent li {
            float: left;
            width: 218px;
            height: 354px;
            /*padding-left: 10px;*/
            padding-right: 20px;
            margin-bottom: 20px;
            /*background-color: #005aa0;*/
        }

        .mainContent li:hover {
            border: 1px solid #dad7d7;
        }

        .mainContent li span {
            color: #e5423c;
            font-size: 20px;
            margin-top: 5px;
        }

        .mainContent li img {
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--大容器-->
<div class="container">
    <!--在这个大容器当中这个是一个使用粘性粘贴的一个元素当我的页面离开的时候这个就会粘连住-->
    <div class="static" id="showTime">
        <div class="leftfix clearfix">
            <a href="javascript:void(0)" class=""><&nbsp;热卖分类&nbsp;>
                <ul class="rightfix">
                    <li class="clearfix">
                        <button>家电/数字/电视</button>
                        <div class="dlDiv">
                            <dl style="font-size: 14px;color: red" class="clearfix leftfix">
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>


                            </dl>
                        </div>
                        <!--                        <div style="background-color: #232222;height: 100px"> </div>-->

                    </li>
                    <li class="clearfix">
                        <button>家电/数字/电视</button>
                        <div class="dlDiv">
                            <dl style="font-size: 14px;color: red" class="clearfix leftfix">
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视1</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视1</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视1</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视1</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视1</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>


                            </dl>
                        </div>
                        <!--                        <div style="background-color: #232222;height: 100px"> </div>-->

                    </li>
                    <li class="clearfix">
                        <button>家电/数字/电视</button>
                        <div class="dlDiv">
                            <dl style="font-size: 14px;color: red" class="clearfix leftfix">
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视2</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视2</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视2</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视2</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视2</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>


                            </dl>
                        </div>
                        <!--                        <div style="background-color: #232222;height: 100px"> </div>-->

                    </li>
                    <li class="clearfix">
                        <button>家电/数字/电视</button>
                        <div class="dlDiv">
                            <dl style="font-size: 14px;color: red" class="clearfix leftfix">
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视3</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视3</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视3</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视3</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视3</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>


                            </dl>
                        </div>
                        <!--                        <div style="background-color: #232222;height: 100px"> </div>-->

                    </li>
                    <li class="clearfix">
                        <button>家电/数字/电视</button>
                        <div class="dlDiv">
                            <dl style="font-size: 14px;color: red" class="clearfix leftfix">
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视4</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视4</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视4</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视4</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视4</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>
                                <dd>
                                    <span style="display:inline-block;">大家电</span>
                                    <ol class="clearfix">
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                        <li class="leftfix">
                                            <button href="#">平板电视</button>
                                        </li>
                                    </ol>
                                </dd>


                            </dl>
                        </div>
                        <!--                        <div style="background-color: #232222;height: 100px"> </div>-->

                    </li>

                </ul>
            </a>
            <span style="  font-size: 12px; padding-right: 15px;display: inline;border-right: 1px solid #e7e1e1">相关分类>&nbsp;&nbsp;京东</span>
        </div>
        <div class="rightfix div2">
            <input type="text" name="" value="京东">
            <button>搜索</button>
        </div>
    </div>
    <!--content-->
    <!--以上基本上都市需要使用这个版心来完成这个任务-->
    <div class="content-nav clearfix">
        <!--左边内容-->
        <ul class="clearfix leftfix">
            <li>
                <img src="img/小房子.png" style="width: 30px ;display: inline-block;position: relative ;top: 3px"/>
                <span style="display: inline">京东首页</span>
            </li>
            <li>
                <img src="./img/定位.png" alt="" style="width: 20px;position: relative;top: 2px">
                <span style="display:  inline">广东</span>
            </li>
        </ul>
        <!--右边内容-->
        <ul class="rightfix ul2">
            <li>
                <span style="display:  inline">你好,</span>
                <a href="#" style="color: red;text-decoration: none ;border: 0;padding: 0">请登录</a>
                <a href="#" style="text-decoration: none">免费注册</a>
            </li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">客户服务</a></li>
            <li><a href="#" style="border: 0">网页导航</a></li>
        </ul>
        <a></a>
    </div>
    <!--二-->
    <div class="logo clearfix" style="height: 130px;background-color: #fcf9f9">
        <div class="content-background" style="height: 40px;background-color: #fcf9f9">
        </div>
        <div class="logo1 leftfix"><img src="img/logo.png"></div>
        <div class="search-nav leftfix ">
            <input type="text" name="" id="" value="京东">
            <button style="cursor: pointer; background-color: red; color: white">搜索</button>
            <div class="search-truenav">
                <ul class="clearfix">
                    <li><a href="#">京东自营</a></li>
                    <li><a href="#" style="color: red">联想</a></li>
                    <li><a href="#">京东自营</a></li>
                    <li><a href="#">京东自营商品</a></li>
                    <li><a href="#">冰箱</a></li>
                    <li><a href="#">华为</a></li>
                    <li><a href="#" style="color: red">京东自营</a></li>
                    <li><a href="#">京东法拍</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">冰</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--result界面-->
    <div class="content-nav1" style="">
        <span><font size="2" color="gray">全部结果</font><i style="color: red;">&nbsp;>&nbsp;&nbsp;</i>"京东"</span>
    </div>

    <!--brand-->    <!--price-->    <!--choice-->
    <div class="clearfix nav2 brand ">
        <span class="leftfix span1">品牌&nbsp;:</span>
        <ul class="clearfix leftfix">
            <li><a href="#">京东E卡</a></li>
            <li><a href="#">京东E卡</a></li>
            <li><a href="#">华为(HUAWEI)</a></li>
            <li><a href="#">京东E卡</a></li>
            <li><a href="#">小米</a></li>
            <li><a href="#">京东E卡</a></li>
            <li><a href="#">荣耀(HONOR)</a></li>
            <li><a href="#">VIVO</a></li>
            <li><a href="#">OPOP</a></li>
            <li><a href="#">京东E卡</a></li>
            <li style="margin-left: 15px">
                <select style="padding:0; border: 0;position: relative;left: 100px">
                    <option style="padding: 0">更多</option>
                    <option style="padding: 0">1</option>
                    <option style="padding: 0">1</option>
                    <option style="padding: 0">1</option>
                    <option style="padding: 0">1</option>
                    <option style="padding: 0">1</option>
                    <option style="padding: 0">1</option>
                </select></li>
            <li>
                <div style=" color: black; position: relative ;left: 110px;top: 8px;background-color: #ffffff;width: 40px;height:  16px;line-height: 16px;">
                    <span style="font-size: 14px">+多选</span>
                </div>
            </li>
        </ul>
    </div>
    <div class=" nav2 price clearfix">
        <span class="leftfix">价格&nbsp;:</span>
        <ul class="clearfix leftfix">
            <li><a href="#">0-70</a></li>
            <li><a href="#">70-200</a></li>
            <li><a href="#">200-400</a></li>
            <li><a href="#">400-1200</a></li>
            <li><a href="#">1200-5300</a></li>
            <li><a href="#">5300-431400</a></li>
            <li><a href="#">3231232</a></li>
            <li><a href="#">1231334</a></li>
            <li><a href="#">121</a></li>
            <li><a href="#">12</a></li>
        </ul>
    </div>
    <div class="clearfix nav2 choice">
        <span class="leftfix span2">高级选择：</span>
        <ul class="leftfix">
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo1">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>
                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo2">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo3">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo4">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo5">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo6">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo7">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>

                    </ul>
                </div>
            </li>
            <li><span>存储条件<a href="#">^</a></span>
                <div class="box bo8">
                    <ul>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <li><a href="#">物品摆放问题</a></li>
                        <span style="display: inline ;font-size: 14px;color: black;">+多选</span>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

    <!--content内容界面-->
    <div class="content-main clearfix">
        <!--侧边栏-->
        <div class="side leftfix">
            <span style="color: red;font-size: 18px; position: relative;top: -3px">热卖产品</span>
            <ul>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
                <li><img src="img/product.png"/>
                    <span class="span1">￥1990.00</span>
                    <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                    <span class="span2">已有<p>50万+</p>人评价</span>
                </li>
            </ul>
            <li><img src="img/product.png"/>
                <span class="span1">￥1990.00</span>
                <span class="span3">泸州老窖泸州贡泊心浓香纯粮食白酒52度500ml*6瓶自饮送礼(含礼袋)</span>
                <span class="span2">已有<p>50万+</p>人评价</span>
            </li>
            </ul>
        </div>
        <!--右边区域-->
        <div class="right rightfix">
            <div class="box box1 mainContent">
                <ul class="clearfix">
                    <!--给每一个li一个高度-->
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                    <li><img src="img/苹果手机.png"/>
                        <span class="main-price">$1190</span>
                        <div class="price-banner"><a href="#"> Apple/苹果 iPhone 15 Plus (A3096) 256GB 粉色支持移动联通电信5G
                            双卡双待手机</a></div>
                        <span style="color: #999999 ;font-size: 12px">已经有<p style="display: inline">五十万</p>人评价</span>
                    </li>
                </ul>
            </div>
            <div class="box box2 page-content clearfix">
                <button><&nbsp;上一页</button>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span style="border: 0 ;font-size:30px;color: #999999">...</span>
                <button>下一页&nbsp;></button>
                <span style="border: 0">共<p style="display: inline-block;color: #005aa0;font-weight: bold">127</p>&nbsp;&nbsp;页到
<input type="text" style="height: 40px;width: 40px">页
</span>
                <button class="" style="background-color:#f5f1f1">确定</button>

            </div>
        </div>
        <!--下面的一个分页栏-->
    </div>

    <!--页脚区域一这个式搜索功能-->
    <div class="footer " style="background-color: white;height:90px">
        <span style="font-size: 14px;display: inline-block">重新搜索:</span>
        <input type="" value="京东"/>
        <button>搜索</button>
    </div>

    <!--service区-->
    <div class="service">
        <!--一-->
        <ol class="service-logo clearfix">
            <li><img src="img/logoFoter.png"/></li>
            <li><img src="img/logoFoter.png"/></li>
            <li><img src="img/logoFoter.png"/></li>
            <li><img src="img/logoFoter.png"/></li>
        </ol>
        <!--二-->
        <div class="service-help clearfix">
            <ul>
                <li style="font-size: 16px ;font-weight: 700;padding-bottom: 6px  ">财务指南</li>
                <li>购物流程</li>
                <li>会员介绍</li>
                <li>生活旅行/团购</li>
                <li>常见问题</li>
            </ul>
            <ul>
                <li style="font-size: 16px ;font-weight: 700;padding-bottom: 6px  ">财务指南</li>
                <li>上门自取</li>
                <li>211限时到达</li>
                <li>配送服务查旬</li>
                <li>配送费收取标准</li>
            </ul>
            <ul>
                <li style="font-size: 16px ;font-weight: 700;padding-bottom: 6px  ">财务指南</li>
                <li>货到付款</li>
                <li>在线支付</li>
                <li>分期支付</li>
                <li>公司转账</li>
            </ul>
            <ul>
                <li style="font-size: 16px ;font-weight: 700;padding-bottom: 6px  ">财务指南</li>
                <li>售后政策</li>
                <li>法律保护</li>
                <li>退款说明</li>
                <li>取消订单</li>
            </ul>
            <ul>
                <li style="font-size: 16px ;font-weight: 700;padding-bottom: 6px  ">财务指南</li>
                <li>延时服务</li>
                <li>京东通信</li>
                <li>DIY装机</li>
                <li>京东E卡</li>
            </ul>
        </div>
    </div>
    <!--页脚区域-->
    <div class="footers">
        <!--第一个区域-->
        <ol>
            <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>
        </ol>
        <!--第二个区域-->
        <div class="footer-second">
            <!--ul-->
            <ul class="clearfix">
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li>京公网安备</li>
            </ul>
            <ul class="clearfix ul1">
                <li><a href="#">互联网出版许可证编号新出网证(京)字150号</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li>京公网安备</li>
            </ul>
            <ul class="clearfix ul2">
                <li><a href="#">医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li><a href="#">京公网安备 11000002000088</a></li>
                <li>京公网安备</li>
            </ul>
            <ul class="clearfix ul3 ">
                <li><a href="#">京东旗下网站：</a></li>
                <li><a href="#">京公网安备 </a></li>
                <li><a href="#">京公网安备 </a></li>
                <li><a href="#">京公网安备 </a></li>
                <li>京公网安备</li>
            </ul>
            <ul class="clearfix ul4 ">
                <li><a href="#"></a></li>
                <!--                <li class="li1">京公网安备</li>-->
            </ul>
        </div>
    </div>


    <!--中心内容区域-->

</div>


<!--这个js我其实不太愿csss意写的因为这个毕竟是一个纯纯htm项目-->
<script src="jQuery.js"></script>
<script type="text/javascript">
    $("#showTime").scrollrow(function () {
        if (document.documentElement.scrollTop > 1000) {
            $("#showTime").element().style.display = 'block';
        }
        if (document.documentElement.scrollTop < 1000) {
            $("#showTime").element().style.display = 'none';
        }
    })

</script>
</body>
</html>

css模块

/*左浮动*/
.leftfix {
    float: left;
}

/*右边浮动*/
.rightfix {
    float: right;
}

/*清除浮动*/
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
body{
    margin: 0;
    padding: 0;
    background-color: #fff;
}
ol,ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
a{
    text-decoration: none;
    color:  #999;
}
button{
    margin: 0;
    padding: 0;
    border: 0;
}
input{
    color:#999 ;
    font-size: 16px;
    border: 1px solid #e7e1e1;
}
span{
    display: block;
}
p{
    display: block;
}
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}