移动端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、自动轮播效果实现:这里使用了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;
    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/jquery.event.move.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;
    width: 100%;
    bottom: 2%;
}

  

十个选项按钮实现

步骤一:编写html文件

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

  步骤二:编写css文件

/*item*/
.item{
    width: 100%;
    height: 180px;
    background: #fff;
    margin-top: -4px;
    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{
    border-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" /></a>
                    <p>¥10.00</p>
                    <p>¥100.00</p>
                </li>
                <li>
                    <a href="#"><img src="img/detail02.jpg" /></a>
                    <p>¥10.00</p>
                    <p>¥100.00</p>
                </li>
                <li>
                    <a href="#"><img src="img/detail01.jpg" /></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" /></a>
            <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" /></a>
            <a href="#" class="fr w_50 "><img src="img/cp3.jpg" /></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" /></a>
            <a href="#" class="fl w_50 b_b1"><img src="img/cp5.jpg" /></a>
            <a href="#" class="fl w_50"><img src="img/cp6.jpg" /></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" /></a>
            <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" /></a>
            <a href="#" class="fr w_50 "><img src="img/cp3.jpg" /></a>
        </div>
    </section>

  

/*shopItem*/
.shopItem{
    padding: 0 5px;
}
.shopItem> .shop_box{
    width: 100%;
    margin-top: 10px;
    background: #fff;
    box-shadow: 0 0 1px #e0e0e0;
}
.shopItem> .shop_box> .shop_box_tit{
    width: 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: "";
    width: 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;
    width: 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;
    width: 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;
    width: 5px;
}
.sk_con> ul{
    width: 100%;
    margin: 8px 0;
}
.sk_con> ul> li{
    width: 33.33%;
    float: left;
}
.sk_con> ul> li> a{
    display: block;
    width: 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{
    width: 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;
}

  

时间: 2024-10-06 14:17:09

移动端JD首页H5页面的相关文章

移动端与H5页面像素的差异与关系

最近工作任务主要是移动端内嵌H5页面,一次与原生进行像素交互下,发现了这个天坑,再次做个记录?? 天坑如下: H5页面中的“像素”与移动端设备的“像素”系统不一致,对于刚接触这块的我,曾经几时在还没有遇到过这样的情况下,去看相关的文章一点体会也没有,这次碰上了,然后又重新看了一遍,对这块的理解也能比较有感受了 先上总结:如果有不到位的,请告知修正:-P 理清几个概念 注意文中的英文表达,可以帮助我们更好的理解,因为同样的英文表达可以被翻译成不同的汉文,这会妨碍我们再查阅资料的时候混淆名词概念 物

移动端h5页面常见问题总结

从去年开始在公司一直做嵌入式的h5页面,遇见了很多问题,做一个小小的总结~ 1.IOS设备链接.按钮等点击产生灰色背景 在傲娇的iOS中可点击元素被点击时候会出现覆盖显示的高亮颜色,也就是一个灰色的阴影,特别难看,尤其是在元素占地面积还比较大的时候.这个可以通过 -webkit-tab-highlight-color 这个css属性来设置,你可以改成任何你想要的颜色,也可以去掉. -webkit-tab-highlight-color:rgba(0,0,0,0);//去掉背景高亮 -webkit

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

h5页面在移动端需要注意的一些事情

H5页面在移动端无法满屏自适应窗口,怎么办? <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> H5页面在移动端字体应该怎么设置? 1.iOS 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微

移动端h5页面的设计稿尺寸

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9536126.html

移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta

H5 页面在微信端的分享

微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 一.获取基本信息 找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp.noncestr和signature. 二.实现 1.页面引入JS-SDK文件 通过scri