移动端JD首页H5页面

1：理解View ：<meta name="viewport" content="width=device-width,initial-scale=1.0">

2. 自适应宽度：100%,max-640px,min-320px

3. 单位：我们可以用px也可以rem。

4.图片自适应：display：block max-width：100%

5. 样式统一：normal.css 

ok 开始：

轮播图和导航栏的搭建

思路分析：

1、导航栏实现：导航栏使用css的position=fixed和z-index=1000，使它固定在顶部并在网页的最上层，左边的icon和右边登陆按钮使用绝对位置来调整距离左边右边上边的距离，而中间的form表单只要Padding-Left和Padding-Right就可以随屏幕伸缩。

2、自动轮播效果实现：这里使用了jQuery的一个js开源库unslider。

3、十个选项按钮实现：使用一个列表，设置每一个li为块元素，宽度为20%，并且让10个选项左浮动，就可以自动排好两行。

 步骤一：编写html文件，将导航栏做成一个盒子，并放置需要的组件，并为它们取好类名，方便css的编写

<!--搜索头部-->  
<header class="nav_header">  
    <div class="nav">  
        <a href="#" class="nav_logo"></a>  
        <!-- 小键盘  enter 改变成  搜索 按钮 -->  
        <form action="#">  
            <span class="nav_search_icon"></span>  
            <input type="search" placeholder="搜索关键字"/>  
        </form>  
        <a href="#" class="nav_login">登录</a>  
    </div>  
</header> 

　　步骤二：编写css文件，将放置的东西设置好宽高，宽用百分比可以自适应，高度则是自己测量

/*nav*/  
.nav_header{  
    position: fixed;  
    height: 40px;  
     100%;  
    top: 0;  
    left: 0;  
    z-index: 1000;  
}  
.nav_header> .nav{  
     100%;  
    height: 40px;  
    max- 640px;  
    min- 320px;  
    margin: 0 auto;  
    background:rgba(201,21,35,0.00);  
    position: relative;  
}  
.nav_header> .nav> .nav_logo{  
     80px;  
    height: 30px;  
    position: absolute;  
    background: url("../img/top_logo.png") no-repeat;  
    background-size: 80px 20px;  
    top: 10px;  
    left: 0;  
}  
.nav_header> .nav> .nav_login{  
     50px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    position: absolute;  
    right: 0;  
    top: 0;  
    color: white;  
    font-size: 15px;  
}  
.nav_header> .nav> form{  
     100%;  
    padding-left: 85px;  
    padding-right: 50px;  
    height: 40px;  
}  
.nav_header> .nav> form> input{  
     100%;  
    height: 30px;  
    border-radius: 15px;  
    margin-top: 5px;  
    padding-left: 30px;  
}  
.nav_header> .nav >form >.nav_search_icon{  
    height: 20px;  
     20px;  
    background:url("../img/top_search.png");  
    background-size: 20px 20px;  
    position: absolute;  
    left: 90px;  
    top: 10px;  
}  

　　自动轮播实现

步骤一：根据官网编写自动轮播html文件

<!--轮播图-->  
<div class="banner">  
    <div>  
        <ul>  
            <li><a><img src="img/banner_01.jpg"></a></li>  
            <li><a><img src="img/banner_02.jpg"></a></li>  
            <li><a><img src="img/banner_03.jpg"></a></li>  
            <li><a><img src="img/banner_04.jpg"></a></li>  
            <li><a><img src="img/banner_05.jpg"></a></li>  
        </ul>  
    </div>  
</div>  

步骤二：根据官网导入js文件，需要下载unslider.js，它是基于JQuery.js的，所以需要下载2个，导入到项目中

       <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>  
<script type="text/javascript" src="js/unslider.js"></script>  
<script>  
$(function() {  
    $('.banner').unslider({  
        speed : 500,  
           delay : 3000,  
           nav : true,//是否启动导航图标  
           dots: true,//是否出先圆点点  
           arrows : false,  
           autoplay : true //自动轮播             
    });  
})  
</script>

　　步骤三：为了使图片能让我们手动滑动，还需要导入2个JQuery的库，导入之后就能手动滑动了

<script type="text/javascript" src="js/jquery.event.move.js"></script>  
<script type="text/javascript" src="js/jquery.event.swipe.js"></script>  

　　步骤四：为了让图片能刚好100%显示出来，并且实现自动轮播导航圆点，需要在css中加入实现

/*banner*/  
.banner ul li a img{  
     100%;  
}  
.unslider {  
    overflow: auto;  
    margin: 0;  
    padding: 0;  
    /*Added*/  
    position: relative;  
}  
.unslider-nav{  
    position: absolute;  
     100%;  
    bottom: 2%;  
} 

　　

十个选项按钮实现

步骤一：编写html文件

<!--导航栏-->  
<nav class="item">  
    <ul class="clearfix">  
        <li>  
            <a href="#">  
                <img src="img/nav_01.png" alt=""/>  
                <p>京东超市</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_02.png" alt=""/>  
                <p>全球购</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_03.png" alt=""/>  
                <p>服装城</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_04.png" alt=""/>  
                <p>京东生鲜</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_05.png" alt=""/>  
                <p>京东到家</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_06.png" alt=""/>  
                <p>充值中心</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_07.png" alt=""/>  
                <p>京东金融</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_08.png" alt=""/>  
                <p>领券</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_09.png" alt=""/>  
                <p>物流查询</p>  
            </a>  
        </li>  
        <li>  
            <a href="#">  
                <img src="img/nav_10.png" alt=""/>  
                <p>我的关注</p>  
            </a>  
        </li>  
    </ul>  
</nav>  

　　步骤二：编写css文件

/*item*/  
.item{  
     100%;  
    height: 180px;  
    background: #fff;  
    margin-top: -4px;  
    border-bottom: 1px solid #e0e0e0;  
}  
.item> ul{  
     100%;  
}  
.item> ul> li{  
     20%;  
    float: left;  
}  
.item> ul> li> a{  
     100%;  
    display: block;  
    padding-top: 20px;  
}  
.item> ul> li> a> img{  
     40px;  
    height: 40px;  
    display: block;  
    margin: 0 auto;  
}  
.item> ul> li> a> p{  
    text-align: center;  
    color: #666;  
}  

　　

商品区块的搭建

思路分析：

1、秒杀模块：可以分为头部的倒计时和内容部分三个li存放三个图，并且右边界为1px。

2、左一大图、右两小图：这里使用模块化开发，在css写好width=50%、左右两边1px的border和左浮动右浮动的类，直接在html创建好后使用即可。左大图采用左浮动，右小图采用右浮动，大小都为50%。

3、左两小图、右一大图：左小图采用左浮动，右大图采用有浮动。

准备工作

编写common.css，用于模块化开发，只要在class里面放置需要的类名即可：

.fl{  
    float: left;  
}  
.fr{  
    float: right;  
}  
.m_l10{  
    margin-left: 10px;  
}  
.m_r10{  
    margin-right: 10px;  
}  
.m_b10{  
    margin-bottom: 10px;  
}  
.m_t10{  
    margin-top: 10px;  
}  
.b_l1{  
    border-left: 1px solid #e0e0e0;  
}  
.b_r1{  
    border-right: 1px solid #e0e0e0;  
}  
.b_b1{  
    border-bottom: 1px solid #e0e0e0;  
}  
.w_50{  
     50%;  
    display: block;  
}  
.w_50 >img{  
     100%;  
    display: block;  
}  
.clearfix::before,  
.clearfix::after{  
    content: "";  
    height: 0;  
    line-height: 0;  
    display: block;  
    visibility: hidden;  
    clear: both;  
}  

　　秒杀区块、左大图右小图、左小图右大图

<!--商品-->  
<main class="shopItem">  
    <!--秒杀区块-->  
    <section class="shop_box">  
        <!--头部-->  
        <div class="shop_box_tit no_border">  
            <div class="fl m_l10 sk_l">  
                <span class="sk_l_icon"></span>  
                <span class="sk_l_name m_l10">掌上秒杀</span>  
                <div class="sk_l_time m_l10">  
                    <span>0</span>  
                    <span>0</span>  
                    <span>:</span>  
                    <span>0</span>  
                    <span>0</span>  
                    <span>:</span>  
                    <span>0</span>  
                    <span>0</span>  
                </div>  
            </div>  
            <div class="fr m_r10"><a href="#">更多></a></div>  
        </div>  
        <!--内容-->  
        <div class="sk_con">  
            <ul class="clearfix">  
                <li>  
                    <a href="#"><img src="img/detail01.jpg" alt=""/></a>  
                    <p>¥10.00</p>  
                    <p>¥100.00</p>  
                </li>  
                <li>  
                    <a href="#"><img src="img/detail02.jpg" alt=""/></a>  
                    <p>¥10.00</p>  
                    <p>¥100.00</p>  
                </li>  
                <li>  
                    <a href="#"><img src="img/detail01.jpg" alt=""/></a>  
                    <p>¥10.00</p>  
                    <p>¥100.00</p>  
                </li>  
            </ul>  
        </div>  
    </section>  
    <!--左大图、右小图-->  
    <section class="shop_box">  
        <!--头部-->  
        <div class="shop_box_tit"><h3>京东超市</h3></div>  
        <!--内容-->  
        <div class="clearfix">  
            <a href="#" class="fl w_50 b_r1"><img src="img/cp1.jpg" alt=""/></a>  
            <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" alt=""/></a>  
            <a href="#" class="fr w_50 "><img src="img/cp3.jpg" alt=""/></a>  
        </div>  
    </section>  
    <!--左小图、右大图-->  
    <section class="shop_box">  
        <!--头部-->  
        <div class="shop_box_tit"><h3>京东超市</h3></div>  
        <!--内容-->  
        <div class="clearfix">  
            <a href="#" class="fr w_50 b_l1"><img src="img/cp4.jpg" alt=""/></a>  
            <a href="#" class="fl w_50 b_b1"><img src="img/cp5.jpg" alt=""/></a>  
            <a href="#" class="fl w_50"><img src="img/cp6.jpg" alt=""/></a>  
        </div>  
    </section>  
    <!--左大图、右小图-->  
    <section class="shop_box">  
        <!--头部-->  
        <div class="shop_box_tit"><h3>京东超市</h3></div>  
        <!--内容-->  
        <!--内容-->  
        <div class="clearfix">  
            <a href="#" class="fl w_50 b_r1"><img src="img/cp1.jpg" alt=""/></a>  
            <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" alt=""/></a>  
            <a href="#" class="fr w_50 "><img src="img/cp3.jpg" alt=""/></a>  
        </div>  
    </section>  

　　

/*shopItem*/  
.shopItem{  
    padding: 0 5px;  
}  
.shopItem> .shop_box{  
     100%;  
    margin-top: 10px;  
    background: #fff;  
    box-shadow: 0 0 1px #e0e0e0;  
}  
.shopItem> .shop_box> .shop_box_tit{  
     100%;  
    height: 32px;  
    line-height: 32px;  
    border-bottom: 1px solid #e0e0e0;  
}  
.shopItem> .shop_box> .shop_box_tit.no_border{  
    border-bottom: none;  
}  
.shopItem> .shop_box> .shop_box_tit> h3{  
    padding-left: 18px;  
    font-size: 15px;  
    color: #666;  
    font-weight: normal;  
    position: relative;  
}  
.shopItem> .shop_box> .shop_box_tit> h3::before{  
    content: "";  
     3px;  
    position: absolute;  
    top: 10px;  
    left: 10px;  
    height: 12px;  
    background: #d8505c;  
}  
.shop_box_sk{  
      
}  
/*秒殺*/  
.sk_l> .sk_l_icon{  
    background: url("../img/sk_icon.png") no-repeat;  
    background-size: 16px 20px;  
    float: left;  
     16px;  
    height: 20px;  
    margin-top: 6px;  
}  
.sk_l> .sk_l_name{  
    font-size: 15px;  
    color: #d8505c;  
    float: left;  
}  
.sk_l> .sk_l_time{  
    margin-top: 10px;  
    float: left;  
}  
.sk_l> .sk_l_time> span{  
    float: left;  
     15px;  
    line-height: 15px;  
    height: 15px;  
    text-align: center;  
    background: #333;  
    color: #fff;  
    margin-left: 3px;  
}  
.sk_l> .sk_l_time> span:nth-child(3n){  
    color: #333;  
    background: #fff;  
     5px;  
}  
.sk_con> ul{  
     100%;  
    margin: 8px 0;  
}  
.sk_con> ul> li{  
     33.33%;  
    float: left;  
}  
.sk_con> ul> li> a{  
    display: block;  
     100%;  
    margin: 0 auto;  
    border-right: 1px solid #e0e0e0;  
}  
.sk_con> ul> li:last-child> a{  
    border-right:0;  
}  
.sk_con> ul> li> a> img{  
     67%;  
    margin: 0 auto;  
    display: block;  
}  
.sk_con> ul> li> p{  
    text-align: center;  
}  
.sk_con> ul> li> p:first-of-type{  
    color: #d8505c;  
}  
.sk_con> ul> li> p:last-of-type{  
    font-size: 12px;  
    color: #666;  
    text-decoration:line-through;  
}