【照虎画猫】京东首页商品菜单列表的实现

(11)照虎画猫深入理解响应式流规范——响应式Spring的道法术器 本系列其他文章见:《响应式Spring的道法术器》。 前情提要:响应式流 | Reactor3快速上手 2 响应式编程之法 上一章本着“快速上手”的原则,介绍了响应式流的概念,以及Reactor 3的使用。这一章,我们基于Reactor 3的实现原理,从《响应式流规范》入手,深入了解响应式流开发库。 2.1 响应式流规范 现代软件对近乎实时地处理数据的需求越来越强烈,... 阅读详情

之前做了一个类似于京东的电商网站项目,同时顺带也“临摹”了一下京东的页面:

登录页:
登录页

首页:
首页

有个词语叫做“照猫画虎”,这个词语太不谦虚,就像“抛玉引砖”一样的狂傲,在电脑屏幕前面对着数量庞大的代码,哪有心情出此豪言,只能说是照虎画猫。很明显,我临摹的页面确实做了许多精简。

进入正题。

京东首页的商品菜单列表,实现起来并不麻烦,只是当初自己在写相应的js代码时,费了很多“心机”,绕了不少弯路—-还是经验不足的问题—最终算是解决,所以在此分享给初学前端的朋友。

不多说,直接贴全部代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
            }

            body {
                font: 12px/150% Arial, Verdana, "\5b8b\4f53";
                color: #666;
                background: #fff;
                -webkit-font-smoothing: antialiased;
            }

            a:hover {
                color: #C81623;
            }

            a {
                color: #666;
                text-decoration: none;
            }

            ul {
                list-style: none;
            }
            /*导航栏 所有商品开始*/

            #nav {
                height: 44px;
                border-bottom: 2px solid #B1191A;
                _overflow: hidden
            }

            #nav .w {
                position: relative;
                z-index: 9;
                height: 44px
            }

            #nav .w .w-spacer {
                display: none
            }

            #nav .w-spacer {
                position: absolute;
                top: -1px;
                z-index: 1;
                width: 100%;
                height: 44px;
                border-top: 1px solid #DDD;
                border-bottom: 2px solid #B1191A
            }

            #categorys {
                float: left;
                position: relative;
                z-index: 10;
                width: 210px;
                height: 44px;
                overflow: visible;
                background: #B1191A
            }

            #categorys .dt a {
                display: block;
                width: 190px;
                height: 44px;
                padding: 0 10px;
                background: #B1191A;
                font: 400 15px/44px "microsoft yahei";
                color: #fff;
                text-decoration: none
            }

            #categorys .dt s {
                position: relative;
                top: -9px;
                text-decoration: none;
            }

            #categorys .dt .ci-right {
                top: 20px;
                right: 7px;
                height: 7px;
                overflow: hidden;
                font: 700 20px/16px simsun;
                color: #fff;
                transition: transform .1s ease-in 0s;
                -webkit-transition: -webkit-transform .1s ease-in 0s;
                display: block;
                position: absolute;
            }

            #categorys .dd {
                height: 156px;
                background: #c81623;
                margin-top: 2px;
            }

            #categorys .dd-inner .item {
                border-left: 1px solid #b61d1d;
                position: relative;
                z-index: 1;
                height: 31px;
                color: #fff;
            }

            #categorys .dd-inner .item a {
                color: #fff;
            }

            #categorys .dd-inner h3 {
                position: absolute;
                z-index: 2;
                height: 31px;
                padding: 0 10px;
                line-height: 31px;
                font-family: "microsoft yahei";
                font-size: 14px;
                font-weight: 400;
            }

            #categorys .dd-inner i {
                position: absolute;
                z-index: 1;
                top: 9px;
                right: 14px;
                width: 4px;
                height: 14px;
                font: 400 9px/14px consolas;
            }

            #categorys .dd-inner .hover {
                background: #f7f7f7;
                color: #B61D1D;
            }

            #categorys .dd-inner .hover a {
                color: #B61D1D;
            }

            #categorys .dd-inner .hover i {
                top: 0;
                left: 205px;
                width: 14px;
                height: 31px;
                background: #f7f7f7;
                overflow: hidden;
                line-height: 200px;
            }

            #categorys .dorpdown-layer {
                display: none;
                position: absolute;
                left: 209px;
                top: 45px;
                width: 779px;
                background: #f7f7f7;
                border: 1px solid #b61d1d;
                overflow: hidden;
            }

            #categorys .dd:hover .dorpdown-layer {
                display: block;
            }

            #categorys .item-sub {
                display: none;
                zoom: 1;
                overflow: hidden;
            }

            #categorys .item-sub:hover {
                display: block;
            }

            #categorys .item-sub:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
            }

            #categorys .item-channels {
                float: left;
                display: inline;
                width: 570px;
                height: 24px;
                padding: 20px 0 0 20px;
                background: #f7f7f7;
                overflow: hidden;
            }

            #categorys .item-channels a {
                float: left;
                display: inline;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                padding: 0 0 0 8px;
                margin-right: 10px;
                line-height: 24px;
                background: #7C7171;
                color: #fff;
                white-space: nowrap
            }

            #categorys .item-channels a:hover {
                background: #C81623
            }

            #categorys .item-channels a:hover i {
                background: #B1191A
            }

            #categorys .item-channels i {
                display: inline-block;
                *zoom: 1;
                _display: inline;
                margin-left: 8px;
                width: 23px;
                height: 24px;
                font: 400 9px/24px consolas;
                background: #5c5251;
                text-align: center;
                cursor: pointer
            }

            #categorys .item-channels .line {
                border-left: 1px solid #dbdbdb;
                display: inline;
                float: left;
                height: 24px;
                margin-right: 7px;
                width: 1px;
                overflow: hidden
            }

            #categorys .item-channels .img-link {
                background: 0 0;
                line-height: normal;
                padding: 0
            }

            #categorys .item-channels .img-link:hover {
                background: 0 0
            }

            #categorys .item-channels .style-red {
                background: #c81623
            }

            #categorys .item-channels .style-red i {
                background: #b1191a
            }

            #categorys .item-channels .style-red:hover {
                background: #961019
            }

            #categorys .item-channels .style-red:hover i {
                background: #851313
            }

            #categorys .subitems {
                float: left;
                width: 570px;
                padding: 6px 0 1006px 20px;
                margin-bottom: -1000px;
                background: #f7f7f7;
                min-height: 409px;
                _height: 409px;
                _overflow: visible
            }

            #categorys .subitems dl {
                width: 100%;
                overflow: hidden;
                line-height: 2em
            }

            #categorys .subitems dl.fore1 dd {
                border-top: none
            }

            #categorys .subitems dt {
                position: relative;
                float: left;
                width: 54px;
                padding: 8px 30px 0 0;
                text-align: right;
                font-weight: 700
            }

            #categorys .subitems dt i {
                position: absolute;
                top: 13px;
                right: 18px;
                width: 4px;
                height: 14px;
                font: 400 9px/14px consolas
            }

            #categorys .subitems dd {
                float: left;
                width: 480px;
                padding: 6px 0;
                border-top: 1px solid #eee
            }

            #categorys .subitems dd a {
                float: left;
                padding: 0 8px;
                margin: 4px 0;
                line-height: 16px;
                height: 16px;
                border-left: 1px solid #e0e0e0;
                white-space: nowrap
            }

            #categorys .subitems .style-red {
                color: #c81623
            }

            #categorys .subitems .style-red-border {
                float: left;
                margin: 4px 8px 4px 0;
                height: 16px;
                background: #f6f0f0;
                overflow: hidden
            }

            #categorys .subitems .style-red-border a {
                font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
                color: #c81623;
                line-height: 12px;
                line-height: 14px\9;
                line-height: 14px\0;
                line-height: 12px\9\0;
                height: 12px;
                padding: 1px;
                margin: 0;
                border: 1px dotted #db7078;
                border-left: none;
                border-right: none;
                display: inline-block
            }

            #categorys .subitems .style-red-border .left-b,
            #categorys .subitems .style-red-border .right-b {
                float: left;
                background: url(//img10.360buyimg.com/uba/jfs/t2986/155/1039328667/119/6d2a472a/57722598N82f09586.png) no-repeat 0 0;
                width: 5px;
                height: 16px
            }

            #categorys .subitems .style-red-border .right-b {
                background-position: -5px 0
            }

            #categorys .item-brands {
                float: right;
                display: inline;
                width: 168px;
                overflow: hidden;
                margin: 19px 20px 10px 0
            }

            #categorys .item-brands a {
                float: left;
                display: inline;
                margin: 1px 0 0 1px
            }

            #categorys .item-promotions {
                float: right;
                display: inline;
                width: 168px;
                margin-right: 20px
            }

            #categorys .item-promotions a {
                display: block;
                margin-bottom: 1px
            }

            #nav .hover .dt .ci-right {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                _top: 17px
            }

            #navitems {
                float: left;
                position: relative;
                z-index: 2
            }

            #navitems .spacer,
            #navitems a,
            #navitems li,
            #navitems ul {
                float: left
            }

            #navitems .spacer {
                display: none
            }

            #navitems a {
                height: 44px;
                padding: 0 20px;
                text-align: center;
                text-decoration: none;
                font: 400 15px/44px "microsoft yahei";
                color: #333
            }

            #navitems a:hover {
                color: #C81623
            }

            #navitems .spacer {
                width: 1px;
                height: 24px;
                margin: 10px 0 0;
                background: #DDD;
                overflow: hidden
            }

            #treasure {
                float: right
            }

            #categorys .item-channels {
                width: 790px
            }

            #categorys .dorpdown-layer {
                width: 999px
            }

            #categorys .subitems {
                width: 790px
            }

            #categorys .subitems dd {
                width: 620px
            }

            #categorys .subitems-main1,
            #categorys .subitems-main2 {
                float: left;
                width: 365px;
                padding-right: 10px;
                margin-right: 10px;
                border-right: 1px solid #eee;
                margin-top: 8px
            }

            #categorys .subitems-main1 dd,
            #categorys .subitems-main2 dd {
                width: 275px
            }

            #categorys .subitems-main1 .fore1,
            #categorys .subitems-main1 .fore8,
            #categorys .subitems-main2 .fore1,
            #categorys .subitems-main2 .fore8 {
                margin-top: -5px
            }

            #categorys .subitems-main1 .fore1 dd,
            #categorys .subitems-main1 .fore8 dd,
            #categorys .subitems-main2 .fore1 dd,
            #categorys .subitems-main2 .fore8 dd {
                border-top: 0
            }

            #categorys .subitems-main2 {
                border-right: 0
            }

            #navitems li a {
                font-size: 16px
            }
            /*导航栏结束*/
        </style>
    </head>

    <body>
        <div id="nav">
            <div class="w">
                <div class="w-spacer"></div>

                <div id="categorys" class="dorpdown">
                    <div class="dt">
                        <a target="_blank" href="">全部商品分类</a>
                    </div>
                    <div class="dd">
                        <div class="dd-inner" id="categorys-dd-inner">

                            <div class="item fore1" data-index="1">
                                <h3><a target="_blank" href="">家用电器</a></h3>
                                <i>&gt;</i>
                            </div>
                            <div class="item fore2" data-index="2">
                                <h3><a target="_blank" href="">手机</a>
                                    <a target="_blank" href="">数码</a>、
                                    <a target="_blank" href="">京东通信</a>
                                </h3>
                                <i>&gt;</i>
                            </div>
                            <div class="item fore3" data-index="3">
                                <h3><a target="_blank" href="">电脑、办公</a></h3>
                                <i>&gt;</i>
                            </div>
                            <div class="item fore4" data-index="4">
                                <h3><a target="_blank" href="">家居</a>、
                                    <a target="_blank" href="">家具</a>、
                                    <a target="_blank" href="">家装</a>、
                                    <a target="_blank" href="">厨具</a></h3>
                                <i>&gt;</i>
                            </div>
                            <div class="item fore5" data-index="5">
                                <h3><a target="_blank" href="">男装</a>、
                                    <a target="_blank" href="">女装</a>、
                                    <a target="_blank" href="">童装</a>、
                                    <a target="_blank" href="">内衣</a></h3>
                                <i>&gt;</i>
                            </div>

                        </div>
                        <div class="dorpdown-layer" id="category-dorpdown-layer">
                            <div class="item-sub" id="category-item-1" data-id="1">
                                <div class="item-brands">
                                    <div class="brands-inner">
                                        <a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a>
                                    </div>
                                </div>
                                <div class="item-channels">
                                    <div class="channels">
                                        <a href="" target="_blank">品牌日<i>&gt;</i></a>
                                        <a href="" target="_blank">家电城<i>&gt;</i></a>
                                        <a href="" target="_blank">智能生活馆<i>&gt;</i></a>
                                        <a href="" target="_blank">京东净化馆<i>&gt;</i></a>
                                        <a href="" target="_blank">京东帮服务店<i>&gt;</i></a>
                                        <a href="" target="_blank">家电众筹馆<i>&gt;</i></a>
                                    </div>
                                </div>
                                <div class="subitems">
                                    <dl class="fore1"><dt><a href="" target="_blank">大家电<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">平板电视</a>
                                            <a href="" target="_blank">空调</a>
                                            <a href="" target="_blank">冰箱</a>
                                            <a href="" target="_blank">洗衣机</a>
                                            <a href="" target="_blank">家庭影院</a>
                                            <a href="" target="_blank">DVD</a>
                                            <a href="" target="_blank">迷你音响</a>
                                            <a href="" target="_blank">冷柜/冰吧</a>
                                            <a href="" target="_blank">酒柜</a>
                                            <a href="" target="_blank">家电配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore2"><dt><a href="" target="_blank">厨卫大电<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">油烟机</a>
                                            <a href="" target="_blank">燃气灶</a>
                                            <a href="" target="_blank">烟灶套装</a>
                                            <a href="" target="_blank">消毒柜</a>
                                            <a href="" target="_blank">洗碗机</a>
                                            <a href="" target="_blank">电热水器</a>
                                            <a href="" target="_blank">燃气热水器</a>
                                            <a href="" target="_blank">嵌入式厨电</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore3"><dt><a href="" target="_blank">厨房小电<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">电饭煲</a>
                                            <a href="" target="_blank">微波炉</a>
                                            <a href="" target="_blank">电烤箱</a>
                                            <a href="" target="_blank">电磁炉</a>
                                            <a href="" target="_blank">电压力锅</a>
                                            <a href="" target="_blank">豆浆机</a>
                                            <a href="" target="_blank">咖啡机</a>
                                            <a href="" target="_blank">面包机</a>
                                            <a href="" target="_blank">榨汁机</a>
                                            <a href="" target="_blank">料理机</a>
                                            <a href="" target="_blank">电饼铛</a>
                                            <a href="" target="_blank">养生壶/煎药壶</a>
                                            <a href="" target="_blank">酸奶机</a>
                                            <a href="" target="_blank">煮蛋器</a>
                                            <a href="" target="_blank">电水壶/热水瓶</a>
                                            <a href="" target="_blank">电炖锅</a>
                                            <a href="" target="_blank">多用途锅</a>
                                            <a href="" target="_blank">电烧烤炉</a>
                                            <a href="" target="_blank">电热饭盒</a>
                                            <a href="" target="_blank">其它厨房电器</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore4"><dt><a href="" target="_blank">生活电器<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">电风扇</a>
                                            <a href="" target="_blank">冷风扇</a>
                                            <a href="" target="_blank">吸尘器</a>
                                            <a href="" target="_blank">净化器</a>
                                            <a href="" target="_blank">扫地机器人</a>
                                            <a href="" target="_blank">加湿器</a>
                                            <a href="" target="_blank">挂烫机/熨斗</a>
                                            <a href="" target="_blank">取暖电器</a>
                                            <a href="" target="_blank">插座</a>
                                            <a href="" target="_blank">电话机</a>
                                            <a href="" target="_blank">净水器</a>
                                            <a href="" target="_blank">饮水机</a>
                                            <a href="" target="_blank">除湿机</a>
                                            <a href="" target="_blank">干衣机</a>
                                            <a href="" target="_blank">清洁机</a>
                                            <a href="" target="_blank">收录/音机</a>
                                            <a href="" target="_blank">其它生活电器</a>
                                            <a href="" target="_blank">生活电器配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore5"><dt><a href="" target="_blank">个护健康<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">剃须刀</a>
                                            <a href="" target="_blank">口腔护理</a>
                                            <a href="" target="_blank">电吹风</a>
                                            <a href="" target="_blank">美容器</a>
                                            <a href="" target="_blank">卷/直发器</a>
                                            <a href="" target="_blank">理发器</a>
                                            <a href="" target="_blank">剃/脱毛器</a>
                                            <a href="" target="_blank">足浴盆</a>
                                            <a href="" target="_blank">健康秤/厨房秤</a>
                                            <a href="" target="_blank">按摩器</a>
                                            <a href="" target="_blank">按摩椅</a>
                                            <a href="" target="_blank">血压计</a>
                                            <a href="" target="_blank">血糖仪</a>
                                            <a href="" target="_blank">体温计</a>
                                            <a href="" target="_blank">计步器/脂肪检测仪</a>
                                            <a href="" target="_blank">其它健康电器</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore6"><dt><a href="" target="_blank">五金家装<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">电动工具</a>
                                            <a href="" target="_blank">手动工具</a>
                                            <a href="" target="_blank">仪器仪表</a>
                                            <a href="" target="_blank">浴霸/排气扇</a>
                                            <a href="" target="_blank">灯具</a>
                                            <a href="" target="_blank">LED灯</a>
                                            <a href="" target="_blank">洁身器</a>
                                            <a href="" target="_blank">水槽</a>
                                            <a href="" target="_blank">龙头</a>
                                            <a href="" target="_blank">淋浴花洒</a>
                                            <a href="" target="_blank">厨卫五金</a>
                                            <a href="" target="_blank">家具五金</a>
                                            <a href="" target="_blank">门铃</a>
                                            <a href="" target="_blank">电气开关</a>
                                            <a href="" target="_blank">插座</a>
                                            <a href="" target="_blank">电工电料</a>
                                            <a href="" target="_blank">监控安防</a>
                                            <a href="" target="_blank">电线/线缆</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="item-promotions">
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a>
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a>
                                </div>
                            </div>
                            <div class="item-sub" id="category-item-2" data-id="2">
                                <div class="item-brands">
                                    <div class="brands-inner">
                                        <a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a>
                                    </div>
                                </div>
                                <div class="item-channels">
                                    <div class="channels">
                                        <a href="" target="_blank">玩3C<i>&gt;</i></a>
                                        <a href="" target="_blank">手机频道<i>&gt;</i></a>
                                        <a href="" target="_blank">网上营业厅<i>&gt;</i></a>
                                        <a href="" target="_blank">配件城<i>&gt;</i></a>
                                        <a href="" target="_blank">影像Club<i>&gt;</i></a>
                                        <a href="" target="_blank">以旧换新<i>&gt;</i></a>
                                    </div>
                                </div>
                                <div class="subitems">
                                    <dl class="fore1"><dt><a href="" target="_blank">手机通讯<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">手机</a>
                                            <a href="" target="_blank">对讲机</a>
                                            <a href="" target="_blank">以旧换新</a>
                                            <a href="" target="_blank">手机维修</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore2"><dt><a href="" target="_blank">京东通信<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">选号中心</a>
                                            <a href="" target="_blank">自助服务</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore3"><dt><a href="" target="_blank">运营商<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">合约机</a>
                                            <a href="" target="_blank">办套餐</a>
                                            <a href="" target="_blank">选号码</a>
                                            <a href="" target="_blank">装宽带</a>
                                            <a href="" target="_blank">中国移动</a>
                                            <a href="" target="_blank">中国联通</a>
                                            <a href="" target="_blank">中国电信</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore4"><dt><a href="" target="_blank">手机配件<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">手机电池</a>
                                            <a href="" target="_blank">移动电源</a>
                                            <a href="" target="_blank">蓝牙耳机</a>
                                            <a href="" target="_blank">充电器</a>
                                            <a href="" target="_blank">数据线</a>
                                            <a href="" target="_blank">手机耳机</a>
                                            <a href="" target="_blank">手机支架</a>
                                            <a href="" target="_blank">贴膜</a>
                                            <a href="" target="_blank">手机存储卡</a>
                                            <a href="" target="_blank">保护套</a>
                                            <a href="" target="_blank">车载配件</a>
                                            <a href="" target="_blank">苹果周边</a>
                                            <a href="" target="_blank">创意配件</a>
                                            <a href="" target="_blank">手机饰品</a>
                                            <a href="" target="_blank">拍照配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore5"><dt><a href="" target="_blank">摄影摄像<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">数码相机</a>
                                            <a href="" target="_blank">单电/微单相机</a>
                                            <a href="" target="_blank">单反相机</a>
                                            <a href="" target="_blank">拍立得</a>
                                            <a href="" target="_blank">运动相机</a>
                                            <a href="" target="_blank">摄像机</a>
                                            <a href="" target="_blank">镜头</a>
                                            <a href="" target="_blank">户外器材</a>
                                            <a href="" target="_blank">影棚器材</a>
                                            <a href="" target="_blank">冲印服务</a>
                                            <a href="" target="_blank">数码相框</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore6"><dt><a href="" target="_blank">数码配件<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">存储卡</a>
                                            <a href="" target="_blank">读卡器</a>
                                            <a href="" target="_blank">支架</a>
                                            <a href="" target="_blank">滤镜</a>
                                            <a href="" target="_blank">闪光灯/手柄</a>
                                            <a href="" target="_blank">相机包</a>
                                            <a href="" target="_blank">三脚架/云台</a>
                                            <a href="" target="_blank">相机清洁/贴膜</a>
                                            <a href="" target="_blank">机身附件</a>
                                            <a href="" target="_blank">镜头附件</a>
                                            <a href="" target="_blank">电池/充电器</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore7"><dt><a href="" target="_blank">影音娱乐<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">耳机/耳麦</a>
                                            <a href="" target="_blank">音箱/音响</a>
                                            <a href="" target="_blank">便携/无线音箱</a>
                                            <a href="" target="_blank">收音机</a>
                                            <a href="" target="_blank">麦克风</a>
                                            <a href="" target="_blank">MP3/MP4</a>
                                            <a href="" target="_blank">专业音频</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore8"><dt><a href="" target="_blank">智能设备<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">智能手环</a>
                                            <a href="" target="_blank">智能手表</a>
                                            <a href="" target="_blank">智能眼镜</a>
                                            <a href="" target="_blank">智能机器人</a>
                                            <a href="" target="_blank">运动跟踪器</a>
                                            <a href="" target="_blank">健康监测</a>
                                            <a href="" target="_blank">智能配饰</a>
                                            <a href="" target="_blank">智能家居</a>
                                            <a href="" target="_blank">体感车</a>
                                            <a href="" target="_blank">无人机</a>
                                            <a href="" target="_blank">其他配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore9"><dt><a href="" target="_blank">电子教育<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">学生平板</a>
                                            <a href="" target="_blank">点读机/笔</a>
                                            <a href="" target="_blank">早教益智</a>
                                            <a href="" target="_blank">录音笔</a>
                                            <a href="" target="_blank">电纸书</a>
                                            <a href="" target="_blank">电子词典</a>
                                            <a href="" target="_blank">复读机</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="item-promotions">
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a>
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a>
                                </div>
                            </div>
                            <div class="item-sub" id="category-item-3" data-id="3">
                                <div class="item-brands">
                                    <div class="brands-inner">
                                        <a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a>
                                    </div>
                                </div>
                                <div class="item-channels">
                                    <div class="channels">
                                        <a href="" target="_blank">玩3C<i>&gt;</i></a>
                                        <a href="" target="_blank">本周热卖<i>&gt;</i></a>
                                        <a href="" target="_blank">游戏部落<i>&gt;</i></a>
                                        <a href="" target="_blank">GAME+<i>&gt;</i></a>
                                        <a href="" target="_blank">装机大师<i>&gt;</i></a>
                                        <a href="" target="_blank">办公生活馆<i>&gt;</i></a>
                                    </div>
                                </div>
                                <div class="subitems">
                                    <dl class="fore1"><dt><a href="" target="_blank">电脑整机<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">笔记本</a>
                                            <a href="" target="_blank">游戏本</a>
                                            <a href="" target="_blank">平板电脑</a>
                                            <a href="" target="_blank">平板电脑配件</a>
                                            <a href="" target="_blank">台式机</a>
                                            <a href="" target="_blank">一体机</a>
                                            <a href="" target="_blank">服务器/工作站</a>
                                            <a href="" target="_blank">笔记本配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore2"><dt><a href="" target="_blank">电脑配件<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">CPU</a>
                                            <a href="" target="_blank">主板</a>
                                            <a href="" target="_blank">显卡</a>
                                            <a href="" target="_blank">硬盘</a>
                                            <a href="" target="_blank">SSD固态硬盘</a>
                                            <a href="" target="_blank">内存</a>
                                            <a href="" target="_blank">机箱</a>
                                            <a href="" target="_blank">电源</a>
                                            <a href="" target="_blank">显示器</a>
                                            <a href="" target="_blank">刻录机/光驱</a>
                                            <a href="" target="_blank">声卡/扩展卡</a>
                                            <a href="" target="_blank">散热器</a>
                                            <a href="" target="_blank">装机配件</a>
                                            <a href="" target="_blank">组装电脑</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore3"><dt><a href="" target="_blank">外设产品<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">鼠标</a>
                                            <a href="" target="_blank">键盘</a>
                                            <a href="" target="_blank">键鼠套装</a>
                                            <a href="" target="_blank">网络仪表仪器</a>
                                            <a href="" target="_blank">U盘</a>
                                            <a href="" target="_blank">移动硬盘</a>
                                            <a href="" target="_blank">鼠标垫</a>
                                            <a href="" target="_blank">摄像头</a>
                                            <a href="" target="_blank">线缆</a>
                                            <a href="" target="_blank">手写板</a>
                                            <a href="" target="_blank">硬盘盒</a>
                                            <a href="" target="_blank">电脑工具</a>
                                            <a href="" target="_blank">电脑清洁</a>
                                            <a href="" target="_blank">UPS电源</a>
                                            <a href="" target="_blank">插座</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore4"><dt><a href="" target="_blank">游戏设备<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">游戏机</a>
                                            <a href="" target="_blank">游戏耳机</a>
                                            <a href="" target="_blank">手柄/方向盘</a>
                                            <a href="" target="_blank">游戏软件</a>
                                            <a href="" target="_blank">游戏周边</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore5"><dt><a href="" target="_blank">网络产品<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">路由器</a>
                                            <a href="" target="_blank">网卡</a>
                                            <a href="" target="_blank">交换机</a>
                                            <a href="" target="_blank">网络存储</a>
                                            <a href="" target="_blank">4G/3G上网</a>
                                            <a href="" target="_blank">网络盒子</a>
                                            <a href="" target="_blank">网络配件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore6"><dt><a href="" target="_blank">办公设备<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">投影机</a>
                                            <a href="" target="_blank">投影配件</a>
                                            <a href="" target="_blank">多功能一体机</a>
                                            <a href="" target="_blank">打印机</a>
                                            <a href="" target="_blank">传真设备</a>
                                            <a href="" target="_blank">验钞/点钞机</a>
                                            <a href="" target="_blank">扫描设备</a>
                                            <a href="" target="_blank">复合机</a>
                                            <a href="" target="_blank">碎纸机</a>
                                            <a href="" target="_blank">考勤机</a>
                                            <a href="" target="_blank">收款/POS机</a>
                                            <a href="" target="_blank">会议音频视频</a>
                                            <a href="" target="_blank">保险柜</a>
                                            <a href="" target="_blank">装订/封装机</a>
                                            <a href="" target="_blank">安防监控</a>
                                            <a href="" target="_blank">办公家具</a>
                                            <a href="" target="_blank">白板</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore7"><dt><a href="" target="_blank">文具耗材<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">硒鼓/墨粉</a>
                                            <a href="" target="_blank">墨盒</a>
                                            <a href="" target="_blank">色带</a>
                                            <a href="" target="_blank">纸类</a>
                                            <a href="" target="_blank">办公文具</a>
                                            <a href="" target="_blank">学生文具</a>
                                            <a href="" target="_blank">文件管理</a>
                                            <a href="" target="_blank">本册/便签</a>
                                            <a href="" target="_blank">计算器</a>
                                            <a href="" target="_blank">笔类</a>
                                            <a href="" target="_blank">画具画材</a>
                                            <a href="" target="_blank">财会用品</a>
                                            <a href="" target="_blank">刻录碟片/附件</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore8"><dt><a href="" target="_blank">服务产品<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">延保服务</a>
                                            <a href="" target="_blank">上门安装</a>
                                            <a href="" target="_blank">维修保养</a>
                                            <a href="" target="_blank">电脑软件</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="item-promotions">
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a>
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a>
                                </div>
                            </div>
                            <div class="item-sub" id="category-item-4" data-id="4">
                                <div class="item-brands">
                                    <div class="brands-inner">
                                        <a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a>
                                    </div>
                                </div>
                                <div class="item-channels">
                                    <div class="channels">
                                        <a href="" target="_blank">家装城<i>&gt;</i></a>
                                        <a href="" target="_blank">居家日用<i>&gt;</i></a>
                                        <a href="" target="_blank">精品家具<i>&gt;</i></a>
                                        <a href="" target="_blank">家装建材<i>&gt;</i></a>
                                        <a href="" target="_blank">厨房达人<i>&gt;</i></a>
                                        <a href="" target="_blank">装修服务<i>&gt;</i></a>
                                    </div>
                                </div>
                                <div class="subitems">
                                    <dl class="fore1"><dt><a href="" target="_blank">厨具<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">烹饪锅具</a>
                                            <a href="" target="_blank">刀剪菜板</a>
                                            <a href="" target="_blank">厨房配件</a>
                                            <a href="" target="_blank">水具酒具</a>
                                            <a href="" target="_blank">餐具</a>
                                            <a href="" target="_blank">茶具/咖啡具</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore2"><dt><a href="" target="_blank">家装建材<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">灯饰照明</a>
                                            <a href="" target="_blank">厨房卫浴</a>
                                            <a href="" target="_blank">五金工具</a>
                                            <a href="" target="_blank">电工电料</a>
                                            <a href="" target="_blank">墙地面材料</a>
                                            <a href="" target="_blank">装饰材料</a>
                                            <a href="" target="_blank">装修服务</a>
                                            <a href="" target="_blank">吸顶灯</a>
                                            <a href="" target="_blank">淋浴花洒</a>
                                            <a href="" target="_blank">开关插座</a>
                                            <a href="" target="_blank">油漆涂料</a>
                                            <a href="" target="_blank">龙头</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore3"><dt><a href="" target="_blank">家纺<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">床品套件</a>
                                            <a href="" target="_blank">被子</a>
                                            <a href="" target="_blank">枕芯</a>
                                            <a href="" target="_blank">蚊帐</a>
                                            <a href="" target="_blank">凉席</a>
                                            <a href="" target="_blank">毛巾浴巾</a>
                                            <a href="" target="_blank">床单被罩</a>
                                            <a href="" target="_blank">床垫/床褥</a>
                                            <a href="" target="_blank">毯子</a>
                                            <a href="" target="_blank">抱枕靠垫</a>
                                            <a href="" target="_blank">窗帘/窗纱</a>
                                            <a href="" target="_blank">电热毯</a>
                                            <a href="" target="_blank">布艺软饰</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore4"><dt><a href="" target="_blank">家具<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">卧室家具</a>
                                            <a href="" target="_blank">客厅家具</a>
                                            <a href="" target="_blank">餐厅家具</a>
                                            <a href="" target="_blank">书房家具</a>
                                            <a href="" target="_blank">儿童家具</a>
                                            <a href="" target="_blank">储物家具</a>
                                            <a href="" target="_blank">阳台/户外</a>
                                            <a href="" target="_blank">商业办公</a>
                                            <a href="" target="_blank">床</a>
                                            <a href="" target="_blank">床垫</a>
                                            <a href="" target="_blank">沙发</a>
                                            <a href="" target="_blank">电脑椅</a>
                                            <a href="" target="_blank">衣柜</a>
                                            <a href="" target="_blank">茶几</a>
                                            <a href="" target="_blank">电视柜</a>
                                            <a href="" target="_blank">餐桌</a>
                                            <a href="" target="_blank">电脑桌</a>
                                            <a href="" target="_blank">鞋架/衣帽架</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore5"><dt><a href="" target="_blank">灯具<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">台灯</a>
                                            <a href="" target="_blank">吸顶灯</a>
                                            <a href="" target="_blank">筒灯射灯</a>
                                            <a href="" target="_blank">LED灯</a>
                                            <a href="" target="_blank">节能灯</a>
                                            <a href="" target="_blank">落地灯</a>
                                            <a href="" target="_blank">五金电器</a>
                                            <a href="" target="_blank">应急灯/手电</a>
                                            <a href="" target="_blank">装饰灯</a>
                                            <a href="" target="_blank">吊灯</a>
                                            <a href="" target="_blank">氛围照明</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore6"><dt><a href="" target="_blank">生活日用<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">收纳用品</a>
                                            <a href="" target="_blank">雨伞雨具</a>
                                            <a href="" target="_blank">净化除味</a>
                                            <a href="" target="_blank">浴室用品</a>
                                            <a href="" target="_blank">洗晒/熨烫</a>
                                            <a href="" target="_blank">缝纫/针织用品</a>
                                            <a href="" target="_blank">清洁工具</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore7"><dt><a href="" target="_blank">家装软饰<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">桌布/罩件</a>
                                            <a href="" target="_blank">地毯地垫</a>
                                            <a href="" target="_blank">沙发垫套/椅垫</a>
                                            <a href="" target="_blank">装饰字画</a>
                                            <a href="" target="_blank">装饰摆件</a>
                                            <a href="" target="_blank">手工/十字绣</a>
                                            <a href="" target="_blank">相框/照片墙</a>
                                            <a href="" target="_blank">墙贴/装饰贴</a>
                                            <a href="" target="_blank">花瓶花艺</a>
                                            <a href="" target="_blank">香薰蜡烛</a>
                                            <a href="" target="_blank">节庆饰品</a>
                                            <a href="" target="_blank">钟饰</a>
                                            <a href="" target="_blank">帘艺隔断</a>
                                            <a href="" target="_blank">创意家居</a>
                                            <a href="" target="_blank">保暖防护</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="item-promotions">
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a>
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a>
                                </div>
                            </div>
                            <div class="item-sub" id="category-item-5" data-id="5">
                                <div class="item-brands">
                                    <div class="brands-inner">
                                        <a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a>
                                        <a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a>
                                    </div>
                                </div>
                                <div class="item-channels">
                                    <div class="channels">
                                        <a href="" target="_blank">男装<i>&gt;</i></a>
                                        <a href="" target="_blank">女装<i>&gt;</i></a>
                                        <a href="" target="_blank">内衣<i>&gt;</i></a>
                                        <a href="" target="_blank">童装童鞋<i>&gt;</i></a>
                                        <a href="" target="_blank">国际品牌<i>&gt;</i></a>
                                        <a href="" target="_blank">自营服装<i>&gt;</i></a>
                                    </div>
                                </div>
                                <div class="subitems">
                                    <dl class="fore1"><dt><a href="" target="_blank">女装<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">连衣裙</a>
                                            <a href="" target="_blank">T恤</a>
                                            <a href="" target="_blank">雪纺衫</a>
                                            <a href="" target="_blank">衬衫</a>
                                            <a href="" target="_blank">休闲裤</a>
                                            <a href="" target="_blank">牛仔裤</a>
                                            <a href="" target="_blank">针织衫</a>
                                            <a href="" target="_blank">短外套</a>
                                            <a href="" target="_blank">卫衣</a>
                                            <a href="" target="_blank">小西装</a>
                                            <a href="" target="_blank">风衣</a>
                                            <a href="" target="_blank">毛呢大衣</a>
                                            <a href="" target="_blank">半身裙</a>
                                            <a href="" target="_blank">短裤</a>
                                            <a href="" target="_blank">吊带/背心</a>
                                            <a href="" target="_blank">打底衫</a>
                                            <a href="" target="_blank">打底裤</a>
                                            <a href="" target="_blank">正装裤</a>
                                            <a href="" target="_blank">马甲</a>
                                            <a href="" target="_blank">大码女装</a>
                                            <a href="" target="_blank">中老年女装</a>
                                            <a href="" target="_blank">真皮皮衣</a>
                                            <a href="" target="_blank">皮草</a>
                                            <a href="" target="_blank">羊毛衫</a>
                                            <a href="" target="_blank">羊绒衫</a>
                                            <a href="" target="_blank">棉服</a>
                                            <a href="" target="_blank">羽绒服</a>
                                            <a href="" target="_blank">仿皮皮衣</a>
                                            <a href="" target="_blank">加绒裤</a>
                                            <a href="" target="_blank">婚纱</a>
                                            <a href="" target="_blank">旗袍/唐装</a>
                                            <a href="" target="_blank">礼服</a>
                                            <a href="" target="_blank">设计师/潮牌</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore2"><dt><a href="" target="_blank">男装<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">衬衫</a>
                                            <a href="" target="_blank">T恤</a>
                                            <a href="" target="_blank">牛仔裤</a>
                                            <a href="" target="_blank">休闲裤</a>
                                            <a href="" target="_blank">卫衣</a>
                                            <a href="" target="_blank">针织衫</a>
                                            <a href="" target="_blank">西服</a>
                                            <a href="" target="_blank">西裤</a>
                                            <a href="" target="_blank">POLO衫</a>
                                            <a href="" target="_blank">羽绒服</a>
                                            <a href="" target="_blank">西服套装</a>
                                            <a href="" target="_blank">真皮皮衣</a>
                                            <a href="" target="_blank">夹克</a>
                                            <a href="" target="_blank">风衣</a>
                                            <a href="" target="_blank">卫裤/运动裤</a>
                                            <a href="" target="_blank">短裤</a>
                                            <a href="" target="_blank">仿皮皮衣</a>
                                            <a href="" target="_blank">棉服</a>
                                            <a href="" target="_blank">马甲/背心</a>
                                            <a href="" target="_blank">毛呢大衣</a>
                                            <a href="" target="_blank">羊毛衫</a>
                                            <a href="" target="_blank">羊绒衫</a>
                                            <a href="" target="_blank">大码男装</a>
                                            <a href="" target="_blank">中老年男装</a>
                                            <a href="" target="_blank">工装</a>
                                            <a href="" target="_blank">设计师/潮牌</a>
                                            <a href="" target="_blank">唐装/中山装</a>
                                            <a href="" target="_blank">加绒裤</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore3"><dt><a href="" target="_blank">内衣<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">文胸</a>
                                            <a href="" target="_blank">睡衣/家居服</a>
                                            <a href="" target="_blank">男式内裤</a>
                                            <a href="" target="_blank">女式内裤</a>
                                            <a href="" target="_blank">塑身美体</a>
                                            <a href="" target="_blank">文胸套装</a>
                                            <a href="" target="_blank">情侣睡衣</a>
                                            <a href="" target="_blank">吊带/背心</a>
                                            <a href="" target="_blank">少女文胸</a>
                                            <a href="" target="_blank">休闲棉袜</a>
                                            <a href="" target="_blank">商务男袜</a>
                                            <a href="" target="_blank">连裤袜/丝袜</a>
                                            <a href="" target="_blank">美腿袜</a>
                                            <a href="" target="_blank">打底裤袜</a>
                                            <a href="" target="_blank">抹胸</a>
                                            <a href="" target="_blank">内衣配件</a>
                                            <a href="" target="_blank">大码内衣</a>
                                            <a href="" target="_blank">打底衫</a>
                                            <a href="" target="_blank">泳衣</a>
                                            <a href="" target="_blank">秋衣秋裤</a>
                                            <a href="" target="_blank">保暖内衣</a>
                                            <a href="" target="_blank">情趣内衣</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore4"><dt><a href="" target="_blank">配饰<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">太阳镜</a>
                                            <a href="" target="_blank">光学镜架/镜片</a>
                                            <a href="" target="_blank">男士腰带/礼盒</a>
                                            <a href="" target="_blank">防辐射眼镜</a>
                                            <a href="" target="_blank">老花镜</a>
                                            <a href="" target="_blank">女士丝巾/围巾/披肩</a>
                                            <a href="" target="_blank">男士丝巾/围巾</a>
                                            <a href="" target="_blank">棒球帽</a>
                                            <a href="" target="_blank">遮阳帽</a>
                                            <a href="" target="_blank">鸭舌帽</a>
                                            <a href="" target="_blank">贝雷帽</a>
                                            <a href="" target="_blank">礼帽</a>
                                            <a href="" target="_blank">毛线帽</a>
                                            <a href="" target="_blank">防晒手套</a>
                                            <a href="" target="_blank">真皮手套</a>
                                            <a href="" target="_blank">围巾/手套/帽子套装</a>
                                            <a href="" target="_blank">遮阳伞/雨伞</a>
                                            <a href="" target="_blank">女士腰带/礼盒</a>
                                            <a href="" target="_blank">口罩</a>
                                            <a href="" target="_blank">假领</a>
                                            <a href="" target="_blank">毛线/布面料</a>
                                            <a href="" target="_blank">领带/领结/领带夹</a>
                                            <a href="" target="_blank">耳罩/耳包</a>
                                            <a href="" target="_blank">袖扣</a>
                                            <a href="" target="_blank">钥匙扣</a>
                                        </dd>
                                    </dl>
                                    <dl class="fore5"><dt><a href="" target="_blank">童装童鞋<i>&gt;</i></a></dt>
                                        <dd>
                                            <a href="" target="_blank">套装</a>
                                            <a href="" target="_blank">上衣</a>
                                            <a href="" target="_blank">运动鞋</a>
                                            <a href="" target="_blank">裤子</a>
                                            <a href="" target="_blank">内衣</a>
                                            <a href="" target="_blank">皮鞋/帆布鞋</a>
                                            <a href="" target="_blank">亲子装</a>
                                            <a href="" target="_blank">羽绒服/棉服</a>
                                            <a href="" target="_blank">运动服</a>
                                            <a href="" target="_blank">靴子</a>
                                            <a href="" target="_blank">演出服</a>
                                            <a href="" target="_blank">裙子</a>
                                            <a href="" target="_blank">功能鞋</a>
                                            <a href="" target="_blank">凉鞋</a>
                                            <a href="" target="_blank">配饰</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="item-promotions">
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a>
                                    <a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div id="navitems">
                    <ul id="navitems-group1">
                        <li class="fore1">
                            <a target="_blank" href="">服装城</a>
                        </li>
                        <li class="fore2">
                            <a target="_blank" href="">美妆馆</a>
                        </li>
                        <li class="fore3">
                            <a target="_blank" href="">京东超市</a>
                        </li>
                        <li class="fore4">
                            <a target="_blank" href="">生鲜</a>
                        </li>
                    </ul>
                    <div class="spacer"></div>
                    <ul id="navitems-group2">
                        <li class="fore1">
                            <a target="_blank" href="">全球购</a>
                        </li>
                        <li class="fore2">
                            <a target="_blank" href="">闪购</a>
                        </li>
                        <li class="fore3">
                            <a target="_blank" href="">团购</a>
                        </li>
                        <li class="fore4">
                            <a target="_blank" href="">拍卖</a>
                        </li>
                        <li class="fore5">
                            <a target="_blank" href="">金融</a>
                        </li>
                    </ul>
                </div>
                <!--index_ok-->

                <div id="treasure"></div>
                <span class="clr"></span>
            </div>
        </div>

        <script src="js/jquery-2.1.4.js"></script>
        <script src="js/bootstrap.js"></script>

        <script type="text/javascript">
            (function() {
                var $ddi = $("#categorys-dd-inner"),
                    $ddid = $ddi.find("div"),
                    $ddr = $("#category-dorpdown-layer"),
                    $ddri = $ddr.find(".item-sub"),
                    index = 0,
                    $ddrr = $ddr.find("#category-item-" + index),
                    id = 0;

                //鼠标进入左侧栏的一项
                $ddid.mouseenter(function() {
                    $ddrr.css("display", "none"),
                        $ddrr.removeClass("hover"),
                        $(this).addClass("hover"),
                        index = $(this).data("index"),
                        $ddrr = $ddr.find("#category-item-" + index),
                        $ddrr.css("display", "block"),
                        $ddrr.addClass("hover");
                });

                //鼠标离开左侧栏的一项
                $ddid.mouseleave(function() {
                    index = $(this).data("index");
                    $(this).removeClass("hover");
                });

                //鼠标进入右侧
                $ddri.mouseenter(function() {
                    id = $(this).data("id"),
                        $ddi.find(".fore" + id).addClass("hover");
                });

                //鼠标离开右侧
                $ddri.mouseleave(function() {
                    $ddi.find(".hover").removeClass("hover");
                });

            })();
        </script>
    </body>

</html>

左侧菜单
弹出菜单
实际上,原网站的子菜单是动态创建出来的,这里我们为了方便,把代码“写死”,并且只保留了前五项,如果需要更多的菜单项,复制相应div(左菜单项:#categorys .dd .dd-inner .item 右弹出菜单:#categorys .dd .dorpdown-layer .item-sub)就可以了,同时要修改#categorys .dd 的height属性值(在第99行)。

京东商城向右伸出的多级菜单.rar 京东商城购物网站向右伸出的多级菜单,基于jquery实现。商品下拉弹出框,仿照京东商城左侧商品分类弹出详细分类。界面样式可以自己修改。注意以下两项:   1.js/new.js 实现弹出框   2.css/css.css样式文件,随心所欲,修改成自己喜欢的样式。 立即下载

相关推荐

京东首页+京东二级菜单(原版效果)

京东二级菜单效果,绝对的原版。从京东主站扣取,欢迎大家使用

C#遮罩层

首先写一个遮罩层DIV,如下  (放在body标签里) &lt;div class="loagMask" id="loading" runat="server"&gt;         &lt;div class="sn-mask-loading fixedLoading"&gt;&lt;/div&gt; &lt;/div&gt;   在css里面写好css在

渺渺飒飒的博客 2019

jQuery京东首页左侧菜单导航

jQuery京东首页左侧菜单导航

京东顶部二级菜单的写法举例

第一篇文章,简单分享一下我最近在练习的京东顶部二级菜单 类似这种: 先说一下个人简单理解的布局,拿“客户服务”这个二级菜单来说,创建一个新div,设置好固定的宽高,这个div有两个子元素,一个是a标签,a标签放的是客户服务这个超链接,另一个子元素是div,这个div放的是下面菜单的 客户 商户 帮助中心等二级菜单,可以用ul ,或者 dl 都可以,但是要注意的是父元素div的宽度和高度都要和a...

keep hungry , keep active 3035

京东首页目录菜单原型axure源文件 含交互设计

产品经理用axure画原型是必修课。 这个是我用axure做的,看起来很简单的一个交互,其实需要很费劲的表达。 希望大家看看哦

Axure做的京东首页.zip

学习AXURE的时候仿照京东首页做的页面交互。里面附赠一分交互说明

Bootstrap简单认识之Dropdown组件

Dropdown(下拉框)组件一、简介 此组件可以不指定 data-target 属性,不指定的话,必须按.dropdown-toggle 按钮和 dropdown-menu 列表放在同一个父元素下 注意,如果想要指定 data-target 属性,那么不是指向 .drop-menu 元素,而是指向包含 .dropdown-toggle 按钮和 dropdown-menu 列表的父元素 .dropd

博客 1万+

jd-h5:使用原生js写的京东首页

仿京东商城首页 访问地址 扫码查看 使用原生js实现轮播 使用jQuery H5,CSS3等 请点个星星鼓励,支持更多开源

java--html(6)框架

框架标签:< frameset>        < frameset rows=”10%,*”>               < frame src=”1.html” name=”top” />               < frameset cols=”30%,*”>                      < frame src=”2.html” name=”left

谙绿Acm 1086

TC8测试TCP-UNACCEPTABLE-04/006

TC8测试TCP-UNACCEPTABLE-04/006

Jetson-nano 编译实时内核并烧录

前言 之前一篇文章介绍了正常的烧录过程,使用的是默认内核,实际工作中需要对内核打补丁升级为实时内核,并对其重编译。 一、准备内容 官网大法好 官方内核下载链接 官方交叉编译器下载链接 官方文档 ubuntu主机一台 根据官网选择下载对应的文件, 1、L4TDriver Package (BSP) source jetson内核文件。 2、官方交叉编译器 因为我们不是在jetson上直接编译,而jetson是arm平台,所以要进行交叉编译。 二、使用步骤 1.解压 内核 tar -xjf public_s

ldl371122的博客 3286

Android高级UI之京东淘宝首页二级联动怎么实现

1、事件的种类和手势 1.1 单点触摸 根据面向对象思想,事件被封装成 MotionEvent 对象 1.2 多点触摸 多点触控 ( Multitouch,也称 Multi-touch ),即同时接受屏幕上多个点的人机交互操作,多点触 控是从 Android 2.0 开始引入的功能 1.3 手势 1.4 多点手势手指操作流程 2、View的体系结构和事件分发的框架 2.1 View和ViewGroup的关系 2.2 Android页面View的体系结构 2.3 事件的处理函数 2.4 事件的处

yzpbright的博客 1028

GD32F303开发实战(一):从零搭建MDK工程与时钟配置详解

本文详细介绍了如何从零开始为GD32F303微控制器搭建一个清晰、可维护的MDK工程模板。内容涵盖开发环境准备、工程目录结构规划、文件分组管理、关键工程配置,并重点解析了时钟树原理,手把手指导配置108MHz系统时钟。通过实战步骤与常见问题排查,帮助开发者构建一个稳定可靠的开发基础,便于后续功能扩展。

weixin_29174141的博客 269

iOS仿京东分类菜单实例实现

在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓词一些知识,结合Masonry进行布局;实现的效果如下:     涉及的知识点: 1:UITableView的运用,包含选中与非选中行不同展示,默认行分隔线的色...

weixin_33735077的博客 284

GPU八卡A100使用INT4-W4A16量化大模型实验

本实验旨在探索在环境下,对大语言模型进行权重量化的可行性、效率与性能影响。通过采用工具集成 GPTQ 算法,实现对所有线性层的权重量化(W4A16 方案最终通过lm-eval工具在GSM8K任务上对压缩模型进行评估。

goodgood_UP的博客 1905

诊断数据库ODX标准协议ISO22901定义组成部分

综上所述,简略描述了ODX数据库中UML/XML/Text/Check rules具体功能以及详细内容。

Soly_kun的博客 907

类似京东和易迅的菜单-可以折叠隐藏的导航菜单

很流行的菜单,很多购物网站在使用,包括京东,新蛋中国,易迅都是类似的 演示地址可以存源码 演示     XML/HTML Code &lt;div id="mallNav"&gt;       &lt;div class="mallNav-con"&gt;           &lt;div id="mallTextNav" class="clearfix&quo

freejs 412

一、C++反作弊对抗实战 (基础篇 —— 2.注册表注入DLL)

在Windows NT/XP操作系统中,当需要加载user32.dll的程序启动时,user32.dll会加载注册表键HLM\Software\Microsoft\WindowsNT\CurrentVersion\Windows\AppInit_dlls下面列出的所有模块。

Koma的主页 1098

CSS实战项目之商品列表

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品列表</title> <link rel="stylesheet" type="text/css" href="css/post4.css"> </head> <body> <!--第一行--> &l.

qq_42915159的博客 1357

ANSYS WORKBENCH——参数化建模以及参数优化(结果导出为Excel)

目录 1、打开软件workbench 2、找到static structure,双击打开 3、选择材料 4、参数化建模 ​ 注:印记面的创建 5、模型属性设置 注:设置优化目标 6、回主界面,选择direct optimization模块 1、打开软件workbench 2、找到static structure,双击打开 3、选择材料 4、参数化建模 至此参数化建模就已经完成啦 注:印记面的创建 印记面一般是一个虚拟的区域,参与实际的网格划分,但是只是由于载.

python_AI_fans的博客 1万+

通过轻量级图像增强Transformer (IAT) 提升YOLOv8在低光环境下的检测性能

随着深度学习和计算机视觉的快速发展,目标检测模型在各个领域中的应用不断扩展,特别是在低照度环境下的视觉任务。YOLOv8作为当前最先进的目标检测模型之一,在高亮度和良好照明条件下表现出色,但在低照度环境下的性能存在一定的不足。为了解决这一问题,我们提出了一种轻量级的低照度图像增强网络(IAT)来改进YOLOv8的暗光检测能力。本篇文章将深入探讨这一创新改进,并附带代码实现,帮助大家更好地理解这一技术的应用和效果。

博客 1214

Axure8.0制作选择左边菜单栏,右边显示相关内容案例

Axure8.0制作选择左边菜单栏,右边显示相关内容案例 最近项目在开发新功能,为了先确定客户的需求,就用Axure设计了一些界面原型,对于程序猿的我们,对这事可真是焦头烂额啊,但是木有办法了,工作还是得继续。因为之前也没用过Axure,所以做起界面来也是磕磕碰碰,因此做好成品后,拿出来分享给大家,希望能对Axure的小白能有所帮助,大牛请绕道。 效果图如下: 一、制作左边菜

ffacffac的博客 2万+

Qwen-Image(阿里通义千问)技术浅析(一)

Qwen-Image(阿里通义千问多模态模型)是阿里巴巴推出的视觉-语言多模态大模型,能够理解图像内容并完成复杂的跨模态任务。

m0_75253143的博客 675

模仿京东页面——首页、商品列表页、购物车页,实现添加购物车功能

模仿京东页面首页分类页商品详情页购物车 首页 分类页 商品详情页 购物车 详情页面图 代码压缩包可以在资源里自取或者百度网盘(提取码:sqxp)!

ningsheng的博客 824

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

上一篇: 【我的代码】java初级练手小项目--局域网聊天室
下一篇: 【学习笔记】Bootstrap常用组件整理
AndrewJoe
博客等级 码龄11年 13粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值