移动端JD⾸页H5页⾯
1：理解View ：<meta name="viewport" content="width=device-width,initial-scale=1.0">
2. ⾃适应宽度：width:100%,max-width:640px,min-width: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、⾃动轮播效果实现：这⾥使⽤了的⼀个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;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}
.nav_header> .nav{
width: 100%;
height: 40px;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
background:rgba(201,21,35,0.00);
position: relative;
}
.nav_header> .nav> .nav_logo{
width: 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{
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 15px;
}
.
nav_header> .nav> form{
width: 100%;
padding-left: 85px;
padding-right: 50px;
height: 40px;
}
.nav_header> .nav> form> input{
width: 100%;
height: 30px;
border-radius: 15px;
margin-top: 5px;
padding-left: 30px;
}
.nav_header> .nav >form >.nav_search_icon{
height: 20px;
width: 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/ve.js"></script>
<script type="text/javascript" src="js/jquery.event.swipe.js"></script>
步骤四：为了让图⽚能刚好100%显⽰出来，并且实现⾃动轮播导航圆点，需要在css中加⼊实现
/*banner*/
.
banner ul li a img{
width: 100%;
}
.unslider {
overflow: auto;
margin: 0;
padding: 0;
/*Added*/
position: relative;
}
.unslider-nav{
position: absolute;
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{
width: 100%;
height: 180px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.item> ul{
width: 100%;
}
.item> ul> li{
width: 20%;
float: left;
}
.item> ul> li> a{
width: 100%;
display: block;
padding-top: 20px;
}
.item> ul> li> a> img{
width: 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{
borderboxborder-right: 1px solid #e0e0e0;
}
.b_b1{
border-bottom: 1px solid #e0e0e0;
}
.w_50{
width: 50%;
display: block;
}
.w_50 >img{
width: 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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论