exercise
/
index.html

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-04 17:32:56
 * @LastEditTime: 2019-09-05 14:07:12
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description"
        content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <title>京东-前端练习</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- normalize -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 基础样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 首页css -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 京东顶部开始 -->
    <div class="J_event">
        <a href="#" class="w">
            <!-- <i> ×</i> -->
            <i>×</i>
        </a>
    </div>
    <!-- 京东顶部结束 -->
    <!-- 快捷导航栏开始 -->
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li>
                    <i class="pos"></i>
                    北京
                </li>
            </ul>
            <ul class="fr">
                <li><a href="#">你好,请登录&nbsp;&nbsp;</a>
                    <a href="#" class="style-red">免费注册</a></li>
                <li class="spacer"></li>
                <li><a href="#">我的订单</a></li>
                <li class="spacer"></li>
                <li class="dropdown"><a href="#">我的京东</a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li><a href="#">京东会员</a></li>
                <li class="spacer"></li>
                <li><a href="#">企业采购</a></li>
                <li class="spacer"></li>
                <li class="dropdown"><a href="#">客户服务</a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li class="dropdown"><a href="#">网站导航</a>
                    <i></i>
                </li>
                <li class="spacer"></li>
                <li style="position: relative;z-index: 1;"><a href="#">手机京东</a>
                    <div class="erweima">
                        <img src="images/erweima.webp" width="60" height="60" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航栏结束 -->
    <!-- headerB部分开始 start -->
    <div class="header">
        <div class="w inner">
            <!-- logo 开始 -->
            <div class="logo">
                <h1>
                    <a href="#" title="京东网">京东</a>
                </h1>
            </div>
            <!-- logo 结束 -->
            <!-- 搜索部分开始 -->
            <div class="search">
                <input type="text" value="单反相机"><button>
                    <i></i>
                </button>
                <em>📷</em>
            </div>
            <!-- 搜索部分结束 -->
            <!-- 热词部分 -->
            <div class="hotWords">
                <a href="#" class="style-red">喝可口可乐</a>
                <a href="#">时尚盛宴</a>
                <a href="#">手机热卖</a>
                <a href="#"> 特惠家电</a>
                <a href="#">无抗养殖</a>
                <a href="#"> 家居服</a>
                <a href="#">家装节礼盒5折</a>
            </div>

            <!-- 购物车开始 -->
            <div class="myCar">
                <i></i>
                <a href="#">我的购物车</a>
                <s>0</s>
            </div>

            <!-- 导航信息 -->
            <div class="navItems">
                <ul>
                    <li><a href="#">秒杀</a></li>
                    <li><a href="#">优惠券</a></li>
                    <li><a href="#">PLUS会员</a></li>
                    <li><a href="#">品牌闪购</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">京东时尚</a></li>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">京东生鲜</a></li>
                </ul>
                <div class="spacer"></div>
                <ul>
                    <li><a href="#">海囤全球</a></li>
                    <li><a href="#">京东金融</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- headerB部分结束 end -->

    <!-- main 部分开始 start -->
    <div class="jd">
        <div class="w jd-inner">
            <div class="jd-col1">
                <!-- 家用电器模块 -->
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <span>/</span>
                        <a href="#">运营商</a>
                        <span>/</span>
                        <a href="#">数码</a>
                    </li>

                </ul>
            </div>
            <div class="jd-col2">
                <!-- 轮播图 -->
                <div class="jd-col2-hd">

                    <div class="arr-l"></div>
                    <div class="arr-r"></div>

                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>

                    <ul>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                    </ul>

                </div>
                <div class="jd-col2-bd">
                    <div class="jd-col2-bd-first">
                        <img src="images/pic1.jpg" alt="">
                    </div>
                    <div>
                        <img src="images/pic2.jpg" alt="">
                    </div>
                    <div></div>
                </div>
            </div>
            <div class="jd-col3">
                <!-- 右侧信息开始 -->
                <div class="user">
                    <div class="user-info">
                        hi,欢迎来到京东!
                        <br>
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                        <a href="#" class="info-img">
                            <img src="images/no_login.jpg" alt="">
                        </a>
                    </div>
                    <div class="user-profit">
                        <a href="#">新人福利</a>
                        <a href="#">PLUS会员</a>
                    </div>

                </div>
                <div class="news">
                    <div class="tab-hd">
                        <a href="javacript:;" class="live cuxiao">促销</a>
                        <a href="javacript:;" class="live">公告</a>
                        <a href="#" class="more">更多</a>
                        <div class="line"></div>
                    </div>
                    <div class="tab-bd">
                        <ul>
                            <li><a href="#">消息1111111</a></li>
                            <li><a href="#">消息2222222</a></li>
                            <li><a href="#">消息3333333</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jd-service">
                    <ul>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                        <li><a href="#"><i></i><p>机票</p></a></li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- 广告部分 -->
        <div class="ad">
            <a href="#"></a>
        </div>
    </div>
    <!-- main 部分结束 end -->

    <!-- 底部开始 start -->
    <div class="footer">
        <!-- 我们的服务 -->
        <div class="footer-service">
            <div class="w footer-service-inner">
                <ul class="clearfix">
                    <li>
                        <div class="service-unit">
                            <h5 class="pin">多</h5>
                            <p>品类齐全，轻松购物</p>
                        </div>
                    </li>
                    <li>
                        <div class="service-unit">
                            <h5 class="duo">多</h5>
                            <p>多仓直发，极速配送</p>
                        </div>
                    </li>
                    <li>
                        <div class="service-unit">
                            <h5 class="zheng">多</h5>
                            <p>正品行货，精致服务</p>
                        </div>
                    </li>
                    <li>
                        <div class="service-unit">
                            <h5 class="tian">多</h5>
                            <p>天天低价，畅选无忧</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 帮助模块 -->
        <div class="w help">
            <dl>
                <dt>购物指南</dt>

                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>

                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>

                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>

                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>

                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl class="cover">
                <dt>京东自营覆盖区县</dt>
                <dd class="info">京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</dd>
                <dd class="more"><a href="#">查看详情 ></a></dd>
            </dl>
        </div>

        <!-- 版权模块 -->
        <div class="w copyright">
            <div class="links">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">Media & IR</a>
                <span>|</span>
                <a href="#">English Site</a>
            </div>
        </div>

        <div class="c-info">
            <p>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零&nbsp字第大120007号</p>
            <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</p>
            <p>Copyright © 2004 - 2019 京东JD.com 版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字(2018)第00003号|营业执照</p>
            <p>京东旗下网站：京东钱包|京东云</p>
        </div>

        <div class="picList w">
            <a href="#"></a>
            <a href="#" class="chengxin"></a>
            <a href="#" class="wangluo"></a>
            <a href="#" class="kexin"></a>
            <a href="#" class="jingyin"></a>

        </div>
    </div>
    <!-- 底部结束 end -->

</body>

</html>