初试京东页

只做到了智能先锋的上面。尝试了绝对定位和相对定位,还有一些css5的样式,包括圆角,阴影等等。下面是所做的京东的前台样式,下一篇文章是css样式文件,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东</title>
<link rel="stylesheet" type="text/css" href="Jd.css" />
<style type="text/css">
* {
    overflow: -Scroll;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0 0;
    text-decoration: none;
    list-style: none;
}
div_Zong{
width:100%;
}
div {
    overflow: -Scroll;
    overflow-y: hidden;
}

body {
    background-color: #f1f3ef;
    width:100%;
}
</style>
</head>
<body>
    <div class="Header_Zong">
    <div class="header">
        <div class="header_1">
            <img class="header_618" alt="正在加载"
                src="../images/WX20180526-180434@2x.png">
            
        </div>
        
        <img class="header_bg" alt="正在加载"
            src="../images/5b03b5b6N3bb3f5fd.jpg">
    </div>
    </div>
    <!-- -------------------- -->
    <div class="Czx">
    <div class="Czx_1">
    <div class="logo"><img src="../images/LOGO.gif" alt=""></div>
    
    <!-- ------------------------------------------------------------------------------ -->
    <div class="Right_Zong">
                <!-- <div class="Nav_Zong"> -->
                <div class="nav_zong">
                    <div class="nav">
                        <ul>
                            <li><a href="#">手机京东</a></li>
                            <li><a href="#">网站导航<img src="../icon/list.png" alt=""><span
                                    class="Shu">|</span></a></li>
                            <li><a href="#">客户服务<img src="../icon/list.png" alt=""><span
                                    class="Shu">|</span></a></li>
                            <li><a href="#">企业采购<span class="Shu">|</span></a></li>
                            <li><a href="#">京东会员<span class="Shu">|</span></a></li>
                            <li><a href="#">我的京东<img src="../icon/list.png" alt=""><span
                                    class="Shu">|</span></a></li>
                            <li><a href="#">我的订单<span class="Shu">|</span></a></li>
                            <li><a href="#" style="color: #de3029">免费注册</a></li>
                            <li><a href="#">你好,请登录</a></li>
                            <li></li>
                            <li></li>
                            <li class="DingWei"><img alt="" src="../icon/DingWei.png">&nbsp;<a
                                href="#">北京</a></li>
                        </ul>
                    </div>
                </div>
                <!-- </div> -->
                
                <div class="search_Zong">
                    <div class="search_Kong"></div>
                    <div class="search">
                        <img class="search_camera" src="../icon/camera.png" alt="">
                        <div class="search_search">
                            <img alt="" src="../icon/search.png">
                        </div>
                    </div>
                    <div class="search_Kong_1"></div>
                    <div class="search_Shooping">
                        <img class="search_Shooping_icon" src="../icon/shopping.png" alt="">&nbsp;我的购物车
                    </div>
                    <div class="search_Kong_1"></div>
                    <div>
                        <img class="search_QRcode" src="../images/mobile_qrcode.png" alt="">
                    </div>
                    <div class="search_nav">
                        <ul>
                            <li><a href="#" style="color: #de3029">新品享好礼</a></li>
                            <li style="text-align: center;"><a href="#">榴莲</a></li>
                            <li><a href="#">京东电器</a></li>
                            <li><a href="#">游戏手机</a></li>
                            <li><a href="#">爆款预约</a></li>
                            <li><a href="#">华为P20</a></li>
                            <li><a href="#">超市越洋</a></li>
                            <li><a href="#">影音681</a></li>
                            <li><a href="#">魅族15</a></li>
                        </ul>
                    </div>
                </div>
                <div class="Black_Zong">
                <div class="black_zong">
                    <ul>
                        <li><a href="#">秒杀</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">PLUS会员</a></li>
                        <li><a href="#">闪购</a><span class="Shu_1">|</span></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">京东服饰</a></li>
                        <li><a href="#">京东超市</a></li>
                        <li><a href="#">生鲜</a><span class="Shu_1">|</span></li>
                        <li><a href="#">全球购</a></li>
                        <li><a href="#">京东金融</a></li>
                        <li style="width: 190px"><a href="#"><img
                                src="../images/5b028b72Nc30ec366.gif" alt=""></a></li>
                    </ul>
                </div>
                </div>
    
    </div>
    </div>
    </div>
    <!-- --------------------------------------- -->
    <!--  右侧固定 -->
    <a href="#"><img class="Right_618" src="../images/5b052525N3aab8fde.png" alt=""></a>
        <div class="Head_Shu"></div>
    <div class="Right_button_Zong">
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/My.png"></a></div>
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/Shopping1.png"></a></div>
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/heart.png"></a></div>
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/time.png"></a></div>
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/LiaoTian.png"></a></div>
    <div class="Right_button_Zong_1"><a href="#"><img src="../icon/animal.png"></a></div>
    </div>
    <div class="Right_button_Zong1">
    <div class="Right_button_Zong1_1"><a href="#"><img src="../icon/Up_Jiantou.png"></a></div>
    <div class="Right_button_Zong1_1"><a href="#"><img src="../icon/Work.png"></a></div>
    </div>
    <!-- --------------------------------------- -->
    
    <div class="middle_Zong">
        <div class="middle">
            <div class="middle_left">
                <ul>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">家用电器</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">手机</a> /<a href="#">运营商</a>/<a
                        href="#">数码</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">电脑</a> /<a href="#">办公</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">家居</a> /<a href="#">家具</a>/<a
                        href="#">家装</a>/ <a href="#">厨具</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">男装</a> / <a href="#">女装</a>/<a
                        href="#">童装</a>/<a href="#">内衣</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">美妆</a> / <a href="#">个护清洁</a>/<a
                        href="#">宠物</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">女鞋</a> / <a href="#">箱包</a>
                        /<a href="#">钟表</a>/<a href="#">珠宝</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">男鞋</a> / <a href="#">运动</a>/<a
                        href="#">户外</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">房产</a> / <a href="#">汽车</a>/<a
                        href="#">汽车用品</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">母婴</a> / <a href="#">玩具乐器</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">食品</a> / <a href="#">酒类</a>/<a
                        href="#">生鲜</a>/<a href="#">特产</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">艺术</a> / <a href="#">礼品鲜花</a>
                        /<a href="#">农资绿植</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">医药保健</a> / <a href="#">计生情趣</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">图书</a> / <a href="#">音像</a>/<a
                        href="#">电子书</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">机票</a> / <a href="#">酒店</a>/<a
                        href="#">旅游</a>/<a href="#">生活</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">理财</a> / <a href="#">众筹</a>/<a
                        href="#">白条</a>/<a href="#">保险</a></li>
                    <li>&nbsp;&nbsp;&nbsp;<a href="#">安装</a> / <a href="#">维修</a>/<a
                        href="#">清洗保养</a></li>
                </ul>
            </div>
            <div class="middle_middle">
                <img src="../images/add.jpg" alt="">
            </div>
            <div class="middle_height">
                <div class="middle_height_img">
                    <img alt="" src="../images/5b065d44N2fe99f7c.jpg">
                </div>
                <div class="middle_height_img">
                    <img alt="" src="../images/5afe3edcNc3a7fc77.jpg">
                </div>
                <div>
                    <img alt="" src="../images/5aed5037Nb622cda1.jpg">
                </div>

            </div>
            <div class="TouXiang">
                <img alt="" src="../images/no_login.jpg">
            </div>
            <div class="middle_right">

                <div class="middle_right_top">

                    <div class="hello">
                        <span>Hi~欢迎来到京东!</span><br> <a href="#">登录</a>&nbsp;&nbsp;<a
                            href="#">注册</a>
                    </div>
                    <div class="Huiyuan">
                        <a href="#">PLUS 会员</a>
                    </div>
                    <div class="Xinrenfuli">
                        <a href="#">新人福利</a>
                    </div>
                </div>
                <div class="middle_right_middle">
                    <ul>
                        <li class="li_1">&nbsp;&nbsp;<a href="#">促销</a><span
                            class="Shu_1">|</span></li>
                        <li>&nbsp;&nbsp;<a href="#">公告</a></li>
                        <li></li>
                        <li style="float: right; margin-left: 10px;">&nbsp;&nbsp;<a
                            href="#">更多</a></li>
                    </ul>
                </div>
                <div class="middle_right_middle_note">
                    <ul>
                        <li><a href="#">畅游无界,1亿京豆发不停</a></li>
                        <li><a href="#">购家电储值卡至高返500</a></li>
                        <li><a href="#">京东超市尽享2件8折</a></li>
                        <li><a href="#">海外直采领券159减30</a></li>
                    </ul>
                </div>

                <div class="middle_right_bottom">
                    <ul>
                        <li class="li_1">&nbsp;&nbsp;<a href="#"
                            style="color: #FF0000;">话费</a></li>
                        <li>&nbsp;&nbsp;<a href="#">机票</a></li>
                        <li>&nbsp;&nbsp;<a href="#">酒店</a></li>
                        <li>&nbsp;&nbsp;<a href="#">游戏</a></li>
                    </ul>
                </div>
                <div class="middle_right_bottom_1">
                    <ul>
                        <li>&nbsp;&nbsp;<a href="#" style="color: #FF0000;">话费充值</a></li>
                        <li>&nbsp;&nbsp;<a href="#">流量充值</a></li>
                        <li>&nbsp;&nbsp;<a href="#">套餐变更</a></li>
                    </ul>
                    <div class="za">
                        <p>号码</p>
                        <input type="text" value="移动/联通/电信"><br> <br>
                        面值&nbsp;<select style="width: 125px;"><option>100元</option>
                            <option>10元</option>
                            <option>20元</option>
                            <option>30元</option>
                            <option>50元</option>
                            <option>200元</option>
                            <option>500元</option>
                        </select><br> <span style="color: #FF0000;">¥98.0-¥100.0</span><br>
                        <div class="Kuansucongzhi">
                            <a href="#">快速充值</a>
                        </div>
                        <a href="#" style="color: #0000FF; font-size: 14px;">抢90减50元话费券</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="MiaoSha_ZongDiv">
    <div class="MiaoSha_Zong">
        <div class="MiaoSha_1">

            <div style="margin-top: 40px;"></div>
            <h1>京东秒杀</h1>
            <h3>FLASH DEALS</h3>
            <img src="../icon/lightning.png" alt="">
            <h4>本场距离结束还剩</h4>
            <div style="widt: 100%; margin-left: 25px; margin-top: 30px;position: relative;">
                <div class="Mb_1">0</div>
                <div class="Mb_2">0</div>
                <div class="Mb_3">0</div>
                <div class="Mb_4">0</div>
                <div class="Mb_5">0</div>
                <div class="Mb_6">0</div>
                <div class="MiaoSha_block_Zong">
                    <div class="MiaoSha_block"></div>
                    <div class="MiaoSha_block"></div>
                </div>
                <div class="MiaoSha_block_Zong">
                    <div class="MiaoSha_block"></div>
                    <div class="MiaoSha_block"></div>
                </div>
                <div class="MiaoSha_block_Zong">
                    <div class="MiaoSha_block"></div>
                    <div class="MiaoSha_block"></div>
                </div>
            </div>
        </div>
        <div class="MiaoSha_2">
            <div class="left_Jt">
                <a href="#"><img alt="" src="../icon/left_Jt.png"></a>
            </div>
            <div style="margin-top: -40px;">
                <a href="#"><img alt="" src="../images/59b8d20fN76efcbe6.jpg"><br>
                    <span>Apple Watch Series 3智能手…</span></a>
                <div
                    style="margin-top: 6px; border: 1px solid #FF0000; width: 160px; height: 20px;">
                    <div class="MiaoSha_2_red">¥3388.00</div>
                    <div class="MiaoSha_2_writ">¥3458.00</div>
                </div>
            </div>
        </div>
        <div class="MiaoSha_2">
            <a href="#"><img alt="" src="../images/5b062f12Nfc822d69.jpg"><br>
                <span>心相印纸抽 面巾纸 茶语系…</span></a>
            <div
                style="margin-top: 6px; border: 1px solid #FF0000; width: 160px; height: 20px;">
                <div class="MiaoSha_2_red">¥68.90</div>
                <div class="MiaoSha_2_writ">¥175.00</div>
            </div>
        </div>
        <div class="MiaoSha_2">
            <a href="#"><img alt="" src="../images/5ad473b6N0bd91510.jpg"><br>
                <span>联想(Lenovo)小新潮7000 20…</span></a>
            <div
                style="margin-top: 6px; border: 1px solid #FF0000; width: 160px; height: 20px;">
                <div class="MiaoSha_2_red">¥5498.00</div>
                <div class="MiaoSha_2_writ">¥5799.00</div>
            </div>
        </div>
        <div class="MiaoSha_2">
            <div class="right_Jt">
                <a href="#"><img alt="" src="../icon/right_Jt.png"></a>
            </div>
            <div style="margin-top: -40px;">
                <a href="#"><img alt="" src="../images/5acdb289N279e1d28.jpg"><br>
                    <span>诺优能儿童配方调制乳粉(…</span></a>
                <div
                    style="margin-top: 6px; border: 1px solid #FF0000; width: 160px; height: 20px;">
                    <div class="MiaoSha_2_red">¥144.90</div>
                    <div class="MiaoSha_2_writ">¥188.00</div>
                </div>
            </div>
        </div>
        <div style="padding: 10px; background-color: #FFFFFF;">
            <a href="#"><img style="width: 180px; height: 256px;"
                src="../images/5b07669bN6068cb78.jpg" alt=""></a>
        </div>
    </div>
    </div>
    <div class="meeting-place">
        <div class="meeting-place_note_Zong">
            <div class="meeting-place_note_margin">
                <a href="#"><img src="../images/5b03eb84Ndbcc79b7.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note">
                <a href="#"><img src="../images/5b037593N192d887b.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note">
                <a href="#"><img src="../images/5b07bfe2N66269e2f.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note">
                <a href="#"><img src="../images/5b03c90fN13ba57cf.png" alt=""></a>
            </div>
            <div class="meeting-place_note">
                <a href="#"><img src="../images/5afd6b2dN7712edaa.jpg" alt=""></a>
            </div>
        </div>
        <div class="meeting-place_note_Zong">
            <div class="meeting-place_note_margin_1">
                <a href="#"><img src="../images/5afba3caN4287fd1a.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note_1">
                <a href="#"><img src="../images/5b067fe4N8824b875.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note_1">
                <a href="#"><img src="../images/5b03e34aN479d0a23.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note_1">
                <a href="#"><img src="../images/5afea9c7Nc2a5b7c1.png" alt=""></a>
            </div>
            <div class="meeting-place_note_1">
                <a href="#"><img src="../images/5afbdec3Naf03e66b.jpg" alt=""></a>
            </div>
        </div>
        <div class="meeting-place_note_Zong">
            <div class="meeting-place_note_margin_2">
                <a href="#"><img src="../images/5b027a4aN6cfc3a98.png" alt=""></a>
            </div>
            <div class="meeting-place_note_2">
                <a href="#"><img src="../images/5afbecaeN4c195319.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note_2">
                <a href="#"><img src="../images/5afd9b79Nb6f41ee9.jpg" alt=""></a>
            </div>
            <div class="meeting-place_note_2">
                <a href="#"><img src="../images/5b052a64N8f9cec2e.png" alt=""></a>
            </div>
            <div class="meeting-place_note_2">
                <a href="#"><img src="../images/5b052620Nbb999b2d.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <div style="width: 100%; height: 40px;"></div>
    <div class="grid_c1">
        <div class="box_top">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">排行榜</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">专属你的购物指南</span>
                </a>
            </div>
            <div class="tab_item">
                <ul>
                    <li><a href="#" style="color: #ff0000;">大&nbsp;家&nbsp;电</a></li>
                    <li><a href="#">手机通讯</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房小电</a></li>
                    <li><a href="#">饮料冲调</a></li>
                </ul>
            </div>
            <div class="tab_body">
                <div class="tab_body_1">
                    <a href="#"><img src="../images/5ac9f865Nbad6fef8.jpg" alt="">
                        <span class="tab_Number">1</span> <span class="top_item_name">创维(Skyworth)32X3
                            32英寸 窄边蓝光高清节能平板液晶电视机(黑色)</span></a>
                </div>

                <div class="tab_body_1">
                    <a href="#"><img src="../images/5ad86c33N80b050b2.jpg" alt="">
                        <span class="tab_Number">2</span> <span class="top_item_name">海尔模卡(MOOKA)
                            43A6 43英寸 智能网络窄边框全高清LED液晶电视(黑色)</span></a>
                </div>
                <div class="tab_body_1">
                    <a href="#"><img src="../images/593a2ce2Nb6558b94.jpg" alt="">
                        <span class="tab_Number">3</span> <span class="top_item_name">康佳(KONKA)LED24E330C
                            24英寸高清窄边液晶平板电视 支持显示器(黑色)</span></a>
                </div>
            </div>
            <div class="tab_hr"></div>
            <div class="tab_circle">
                <div class="tab_circle_1"></div>
                <div class="tab_circle_border"></div>
            </div>
        </div>
        <div class="box_top m_1">
        <div class="box_left_Jt">
                <a href="#"><img alt="" src="../icon/left_Jt.png"></a>
            </div>
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">会买专辑</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">甄选优质好物</span>
                </a>
            </div>
            <div class="middle_box">
                <a class="BianDan" href="#"><img class="middle_box_img"
                    src="../images/59ed6bdaN7e1c1533.png" alt=""></a>
            </div>
            <div class="middle_box_img_1">
                <a class="BianDan" href="#"><img src="../images/59ed54d8Ne4160b7c.jpg" alt=""></a>
                <a class="BianDan" href="#"><img src="../images/5996ac2bN63d73b17.jpg" alt=""></a>
                <a class="BianDan" href="#"><img src="../images/58070a9cNe603d24c.jpg" alt=""></a>
            </div>
            <div class="middle_box_sp">
                <a href="#">精美加湿器,缓解皮肤干燥好帮手</a>
            </div>
            <div class="middle_box_note">
                <a href="#">转眼秋天已过将半,人们面临的皮肤干燥问题越来越明显,特别是对于在家或是坐在办公室的人来说,会造成一</a>
            </div>
            <div class="tab_hr"></div>
            <div class="tab_circle">
                <div class="tab_circle_1"></div>
                <div class="tab_circle_border"></div>
                <div class="tab_circle_border"></div>
            </div>
                <div class="box_right_Jt">
                <a href="#"><img alt="" src="../icon/right_Jt.png"></a>
            </div>
        </div>
        <div class="box_top m_1">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">领券中心</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">前往领券中心</span>
                </a>
            </div>
            <div class="tab_circle_2"></div>
            <div class="coupon_item">
                <div style="float: left;">
                    <div class="coupon_img">
                        <a class="BianDan" href="#"><img style="width: 80px; height: 80px;"
                            src="../images/5adee373Nf9d52792.jpg" alt=""></a>
                    </div>
                    <div class="coupon_price">
                        <a href="#"><span>¥&nbsp;7折</span></a>
                    </div>
                    <div class="coupon_limit">
                        <a href="#">满满100元可用</a>
                    </div>
                    <div class="coupon_desc">
                        <a href="#">鲜品类专享券</a>
                    </div>
                </div>
                <div class="coupon_more">
                    <div class="coupon_more_inner">
                        <a href="#">更多精选好券</a>
                    </div>
                </div>
                
            </div>
            <div class="tab_circle_2"></div>
            <div class="coupon_item" style="background-color: #eeefed;">
                <div style="float: left;">
                    <div class="coupon_img">
                        <a class="BianDan" href="#"><img style="width: 80px; height: 80px;"
                            src="../images/5b0e6b28N8052e55d.jpg" alt=""></a>
                    </div>
                    <div class="coupon_price">
                        <a href="#"><span>¥&nbsp;150</span></a>
                    </div>
                    <div class="coupon_limit">
                        <a href="#">满满2980元可用</a>
                    </div>
                    <div class="coupon_desc">
                        <a href="#">部分自营手机/配件</a>
                    </div>
                </div>
                <div class="coupon_more">
                    <div class="coupon_more_inner">
                        <a href="#">更多精选好券</a>
                    </div>
                </div>
            </div>
            <div class="tab_circle_2"></div>
            <div class="coupon_item">
                <div style="float: left;">
                    <div class="coupon_img">
                        <a class="BianDan" href="#"><img style="width: 80px; height: 80px;"
                            src="../images/5aa77e11Na27afa82.jpg" alt=""></a>
                    </div>
                    <div class="coupon_price">
                        <a href="#"><span>¥&nbsp;5</span></a>
                    </div>
                    <div class="coupon_limit">
                        <a href="#">满满110元可用</a>
                    </div>
                    <div class="coupon_desc">
                        <a href="#">自营牛奶部分商品</a>
                    </div>
                </div>
                <div class="coupon_more">
                    <div class="coupon_more_inner">
                        <a href="#">更多精选好券</a>
                    </div>
                </div>
            </div>
            <div class="tab_circle_1"></div>
            <div class="tab_circle_border"></div>
            <div class="tab_circle_border"></div>
        </div>
    </div>
    <!--  ______________________________________________________________________________--->
    <div class="grid_c1">
        <div class="box_top">
        <div class="box_left_Jt">
                <a href="#"><img alt="" src="../icon/left_Jt.png"></a>
            </div>
            <div class="box_top_hd">
                <a href="#"><span class="box_tit">觅me</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">探索生活</span>
                </a>
            </div>
            <div class="sunning">
            <a href="#" class="BianDan"><img src="../images/5b091904N71f4b0cf.jpg" class="sunning_img" alt=""></a>
            </div>
        <div class="middle_box_sp">
                <a href="#">热炸的夏天,幸好空调可以免费装</a>
            </div>
            <div class="middle_box_note_1">
                <a href="#">套装内有50只限量版白管口红,五十只口红五十种不同的颜色可以单独使用也可以叠加使用,有了它你的化妆柜每个色系的口红都齐全</a>
            </div>
            
            <div class="tab_hr"></div>
            <div class="tab_circle">
                <div class="tab_circle_1"></div>
                <div class="tab_circle_border"></div>
            </div>
        <div class="box_right_Jt">
                <a href="#"><img alt="" src="../icon/right_Jt.png"></a>
            </div>
        </div>

        <div class="box_top m_1">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">发现好货</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">发现品质生活</span>
                </a>
            </div>
            <div  class="ForImg_zong">
            
            
            <div class="ForImg_zong_img"><a class="BianDan" href="#"><img src="../images/5aa8a8f3N341e4b0d.jpg" alt=""></a>
            <a href="#" class="ForImg_zong_img_a1">锤子人工智能手机</a>                
            </div>
            
            <div class="ForImg_zong_img">
            <a class="BianDan" href="#"><img src="../images/573ec769Nfa8af95d.jpg" alt=""></a>
            <a href="#" class="ForImg_zong_img_a2">TF限量迷你口红套装</a>
            </div>
            
            
            </div>

            <div class="ForImg_zong">
            
            <div class="ForImg_zong_img"><a class="BianDan" href="#"><img src="../images/59af5ad1N5430fcdf.png" alt=""></a>
            <a href="#" class="ForImg_zong_img_a2">原力手环</a></div>
            <div class="ForImg_zong_img"><a class="BianDan" href="#"><img src="../images/58cf9a34N0b58819a.jpg" alt=""></a>
            <a href="#" class="ForImg_zong_img_a2">驾考模拟器</a></div>
            
            </div>
    
        </div>

        <div class="box_top m_1">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">会逛</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">你想逛的都在这里</span>
                </a>
            </div>
            <div  class="box_right"><a class="BianDan" href="#"><img src="../images/5b06de10N798800eb.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/5b06de3cN1a3e6bbb.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/5b06de5cN34722f4a.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/5b06de49N41516544.jpg" alt=""></a></div>
            
        
        </div>

    </div>
    <!-- ------------------------------------------------------------------------ -->
    <div class="floorhd">
    <div class="floorhd_looer">
    <div class="floorhd_looer_tit"><h1>— 时尚达人 —</h1></div>
    </div>
    </div>
    <!-- -------------------------------------------------------------------- -->
    <div class="grid_c1">
        <div class="box_top">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">运动户外</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">玩所谓未玩</span>
                </a>
            </div>
            <div class="sp_tit">
            <a class="BianDan" href="#"><img src="../images/5af843adN2667e5a8.jpg"></a>
            </div>
            <div class="sp_tit">
            <div class="sp_bottom" style="margin-right:10px;"><a class="BianDan" href="#"><img src="../images/5af843c8N949c555f.jpg"></a></div>
            <div class="sp_bottom"><a class="BianDan" href="#"><img src="../images/5af843dbNfbc44b3c.jpg"></a></div>
            </div>
        
        </div>

        <div class="box_top m_1">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">魅力装扮</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">精致生活</span>
                </a>
            </div>
                <div class="sp_tit">
            <a class="BianDan" href="#"><img src="../images/5ae9617eN40168ca3.jpg"></a>
            </div>
            <div class="sp_tit">
            <div class="sp_bottom" style="margin-right:10px;"><a class="BianDan" href="#"><img src="../images/5aaf6b8cN194ad58e.jpg"></a></div>
            <div class="sp_bottom"><a class="BianDan" href="#"><img src="../images/5b0283a3N9a4b2ff2.png"></a></div>
            </div>
        </div>
                <div class="box_bg">                
                        <div class="box_border_img"><a class="BianDan" href="#"><img src="../images/5b0559d8N2baad6a5.jpg"></a></div>
                        <div class="box_border"></div>
                </div>
    </div>
    <!-- -------------------------------------------------------------------------------------- -->
    <div class="grid_c1">
    
        <div class="Box_middle box_bg">
        
            <div class="Box_border_img"><a href="#" class="BianDan"><img src="../images/5b0e12c0Nb69341a8.jpg"></a></div>
                        <div class="Box_border"></div>
        
        </div>

        <div class=" m_1">
            <div class="Four_St">
                <div class="Four_St_bottom" style="margin-right:10px;">
                <a class="BianDan" href="#"><img src="../images/587881b5N4c161654.jpg"></a>
                <div style="margin-top:16px;">
                <p class="Four_St_bottom_p1"><a href="#">TH/唐后欧美时尚手链…</a></p><br>
                <p class="Four_St_bottom_p2"><a href="#">¥564.00</a></p>
                </div>
                </div>
                <div class="Four_St_bottom">
                <a class="BianDan" href="#"><img src="../images/5a150250N04225c46.jpg"></a>
                <div style="margin-top:16px;">
                <p class="Four_St_bottom_p1"><a href="#">硕黄 韩版钛钢情侣项…</a></p><br>
                <p class="Four_St_bottom_p2"><a href="#">¥10.00</a></p>
                </div>
                </div>
            </div>
            <div class="Four_St">
                <div class="Four_St_bottom" style="margin-right:10px;">
                <a class="BianDan" href="#"><img src="../images/5b0b5d84N43660923.jpg"></a>
                <div style="margin-top:16px;">
                <p class="Four_St_bottom_p1"><a href="#">尚雨茜自有品牌伊润…</a></p><br>
                <p class="Four_St_bottom_p2"><a href="#">¥99.00</a></p>
                </div>
                </div>
                <div class="Four_St_bottom">
                <a class="BianDan" href="#"><img src="../images/59d21670N7aec11e3.jpg"></a>
                <div style="margin-top:16px;">
                <p class="Four_St_bottom_p1"><a href="#">双开门手抛速开自动…</a></p><br>
                <p class="Four_St_bottom_p2"><a href="#">¥228.00</a></p>
                </div>
                </div>
            </div>
        </div>
        
        <div class="box_top m_1">
                <div class="Box_top_hd">
                <a href="#">  <img src="../images/5a475ff2Nb88ab0e8.jpg"> <span>SADI海外旗舰店</span>
                </a>
            </div>
            <div class="sp_tit">
            <a class="BianDan" href="#"><img src="../images/5acb108cN75395032.jpg"></a>
            </div>
            <div class="Sp_tit">
            <div class="Sp_bottom" style="margin-right:10px;"><a class="BianDan" href="#"><img src="../images/5b03d62dN0127b0b9.jpg"></a></div>
            <div class="Sp_bottom" style="margin-right:10px;"><a class="BianDan" href="#"><img src="../images/5b03d628N4b4a74d8.jpg"></a></div>
            <div class="Sp_bottom"><a class="BianDan" href="#"><img src="../images/5b03d631N5a0018ae.jpg"></a></div>
            </div>
        </div>
            
    </div>
        <!-- -------------------------------------------------------------------------------------- -->
    <div class="grid_c1">
        <div class="box_top">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">京东服饰</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">尽享时尚生活</span>
                </a>
            </div>
    
            <div  class="box_right"><a class="BianDan" href="#"><img src="../images/5adf2259N40db6ba1.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/5a9e4591Na6a06f55.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/599ea4c0Na458525b.jpg" alt=""></a></div>
            <div class="box_right_img"><a class="BianDan" href="#"><img src="../images/5a7aac18Nbf24e551.jpg" alt=""></a></div>
            
        </div>

        <div class="box_top m_1">
            <div class="box_top_hd">
                <a href="#"> <span class="box_tit">我行我素</span> <img
                    src="../icon/XiangYou.png" alt=""> <span class="box_subtit">时尚有我 品质生活</span>
                </a>
            </div>
                <div class="sp_tit">
            <a class="BianDan" href="#"><img src="../images/5af84229N029a1092.jpg"></a>
            </div>
            <div class="sp_tit">
            <div class="sp_bottom" style="margin-right:10px;"><a class="BianDan" href="#"><img src="../images/5af8423aN68120fe7.jpg"></a></div>
            <div class="sp_bottom"><a class="BianDan" href="#"><img src="../images/5af841a3N85351862.jpg"></a></div>
            </div>
        </div>
                <div class="box_bg">                
                        <div class="box_border_img" style="background-color:#f1f3ef;">
                        <div class="HuanJi_img"><a class="BianDan" href="#"><img src="../images/5a531613N0f56e968.jpg"></a></div>
                        <div class="HuanJi_img"><a class="BianDan" href="#"><img src="../images/5a2f8f79Ndc3104c2.jpg"></a></div>
                        </div>
                        <div class="box_border"></div>
                </div>
    </div>
    <!-- ------------------------------------------------------------------------------------------------ -->
    <div class="floorhd">
    <div class="floorhd_looer">
    <div class="floorhd_looer_tit"><h1>— 智能先锋 —</h1></div>
    </div>
    </div>
    <!-- ------------------------------------------------------------------------------------------------ -->
    
</body>
</html>

转载于:https://my.oschina.net/ZxArvin/blog/1826476

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值