当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 京东m.jd站点静态页实现（首页）H5

京东m.jd站点静态页实现（首页）H5

2017年12月21日  | 移动技术网IT编程  | 我要评论

jdM文件结构图

\

1:创建两个css样式文件。base.css/index.css

base.css 

/*重置样式css*/
*,
::before,
::after{
    /* 选择所有的标签 padding:内边距*/
    margin: 0;
    padding: 0;

    /*清楚移动端默认的点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
    /* 设置所有的都是以边框开始计算宽度  百分比*/
    -webkit-box-sizing: border-box;/*兼容*/
    box-sizing: border-box;

}
body
{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;/*微软雅黑，设备默认字体*/
    color: #333;
}
a
{
    color: #333;
    text-decoration: none;/*不要下划线*/
}
a:hover
{
    text-decoration: none;/*不要下划线*/
}
ul,ol
{
    list-style: none;
}
input
{
    border: none;
    outline: none;
    /*清除移动端默认的表单样式*/
    -webkit-appearance: none;
}
.f_left
{
    float: left;
}
.f_right
{
    float: right;
}
.clearfix:before,
.clearfix:after
{
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
[class^="jd_"]
{

}
.m_l10
{
    margin-left: 10px;
}
.m_r10
{
    margin-right: 10px;
}
.m_t10
{
    margin-top: 10px;
}
.m_b10
{
    margin-bottom: 10px;
}

index.css 
body
{
    background: #f5f5f5;
}
/*主体盒子*/
.jd_layout{
    width: 100%;
    max-width: 640px;/*设计图的原因， 不让他放大*/
    min-width: 300px;/*为了更好的布局显示*/
    margin: 0 auto;/*居中*/
    position: relative;
}

/*头部*/
.jd_header
{
    /*position: fixed;浮动定位  以 window 最外层容器计算的*/
    left: 0;
    top: 0;
    height: 40px;
    width: 100%;

}
.jd_header > .jd_header_box
{
    width: 100%;
    max-width: 640px;/*设计图的原因， 不让他放大*/
    min-width: 300px;/*为了更好的布局显示*/
    margin: 0 auto;/*居中*/
    height: 40px;
    background: rgba(201,21,35,0.85);
    position: relative;
}
.jd_header > .jd_header_box > .icon_logo
{
    width: 60px;
    height: 36px;
    position: absolute;
    background: url("../images/jd_logo.png") no-repeat;
    background-size: 50px 20px;
    background-position: 0px 0px;
    top: 10px;
    left: 10px;
}
.jd_header > .jd_header_box > .login
{
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 15px;
}
.jd_header > .jd_header_box > form
{
    width: 100%;
    padding-left: 75px;
    padding-right: 50px;
    height: 40px;
    position: relative;
}
.jd_header > .jd_header_box > form > input
{
    width: 100%;
    height: 30px;
    border-radius: 15px;
    margin-top: 3px;
    padding-left: 30px;
}
.jd_header > .jd_header_box > form > .icon_search
{
    background: url("../images/jd_search.png") no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    position: absolute;
    background-position: 0px 0px;
    top: 10px;
    left: 85px;
}
/*轮播图*/
.jd_banner
{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.jd_banner > ul:first-child
{
    width: 1000%;
    /*尽可能做webkit内核的兼容*/
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%);
}
.jd_banner > ul:first-child > li
{
    width: 10%;
    float: left;
}
.jd_banner > ul:first-child > li > a
{
    width: 100%;
    display: block;
    font-size: 0;
}
.jd_banner > ul:first-child > li > a > img
{
    width: 100%;
    /*
    font-size 0
    display: block;
    vertical-align: middle;

    */
    display: block;/*清除图片下面的间隙*/

}
.jd_banner > ul:last-child
{
    width: 118px;
    height: 6px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -59px;

}
.jd_banner > ul:last-child > li
{
    width: 6px;
    height: 6px;
    float: left;
    border-radius: 3px;
    border: 1px solid #ffffff;
    margin-left: 10px;
}
.jd_banner > ul:last-child > li.now
{
    background: #ffffff;
}
.jd_banner > ul:last-child > li:nth-child(1)
{
    margin-left: 0px;

}
/*导航栏模块*/
.jd_nav
{
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;/*底部边框1px，颜色灰色*/
}
.jd_nav > ul
{
    width: 100%;
    padding: 10px 0;/*上下10px。左右0px*/
}
.jd_nav > ul > li
{
    width: 25%;
    float: left;
}
.jd_nav > ul > li > a
{
    display: block;/*块级元素*/
}
.jd_nav > ul > li > a > img
{
    width: 35px;
    height: 35px;
    display: block;/*没有间隙*/
    margin: 0 auto;/*左右居中*/
}
.jd_nav > ul > li > a > p
{
    text-align: center;
    color: #666;
    font-size: 12px;
    padding: 6px 0;/*上下间隔6px。左右0px*/
}
/*商品主盒子*/
.jd_product
{
    padding: 0 5px;
}
.jd_product > .product_box
{
    width: 100%;
    background: #ffffff;
    margin-top: 10px;/*向上间距*/
    box-shadow: 0 0 1px #e0e0e0;/*阴影*/
}
.jd_product > .product_box > .product_box_tit
{
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #e0e0e0;
}
.jd_product > .product_box > .product_box_tit.no_border
{
    border-bottom: none;
}
.jd_product > .product_box > .product_box_tit > h3
{
    font-weight: normal;
    font-size: 15px;
    padding-left: 15px;

    position: relative;
    color: #666666;
}
.jd_product > .product_box > .product_box_tit > h3:before
{
    /*伪类转块
    display block
    position absoult
    float left
    */
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 3px;
    height: 12px;
    background: #d8505c;
}
/*掌上秒杀 second kill*/
.jd_sk
{

}
.jd_sk .sk_icon
{
    background: url("../images/sk_icon.png") no-repeat;
    background-size: 16px 20px;
    width: 16px;
    height: 20px;
    float: left;
    margin-top: 4px;
}
.jd_sk .sk_name
{
    color: #d8505c;
    font-size: 15px;
    float: left;
    margin-left: 10px;
}
.jd_sk .sk_time
{
    float: left;
    margin-top: 8px;
}
.jd_sk .sk_time > span
{
    float: left;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #333333;
    color: #ffffff;
    margin-left: 3px;
}
.jd_sk .sk_time > span:nth-child(3n)
{
    background: #ffffff;
    color: #333333;
    width: 5px;
}
.jd_sk > .product_box_con > ul
{
    width: 100%;
    font-size: 12px;
    padding: 10px 0;
}

.jd_sk > .product_box_con > ul > li
{
    width: 33.3333%;
    float: left;
    text-align: center;
}
.jd_sk > .product_box_con > ul > li > a
{
    display: block;
    width: 100%;
    border-right: 1px solid #e0e0e0;
}
.jd_sk > .product_box_con > ul > li:last-child > a
{
    border-right: 0;
}
.jd_sk > .product_box_con > ul > li > a > img
{
    width: 64%;
    display: block;
    margin: 0 auto;
}
/*
选择器
E：first-of-type:选择E同类型的同级 第一个元素
E：last-of-type:选择E同类型的同级 最后一个元素
E：nth-of-type(n):选择E同类型的同级 第n个元素
*/
.jd_sk > .product_box_con > ul > li > p:first-of-type
{
    color: #d8505c;
    padding-top: 5px;
}
.jd_sk > .product_box_con > ul > li > p:last-of-type
{
    text-decoration: line-through;/*删除线*/
    color: #666666;
    padding-top: 5px;
}

/*组合样式*/
.w_50
{
    width: 50%;
    display: block;
}
.w_50 > img
{
    display: block;
    width: 100%;
}
.b_left
{
    border-left: 1px solid #e0e0e0;
}
.b_right
{
    border-right: 1px solid #e0e0e0;
}
.b_bottom
{
    border-bottom: 1px solid #e0e0e0;
}

2:创建文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- m vp-->
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0"
            />
    <title>首页</title>
    <link rel="stylesheet" href="css/base.css" />
    <!-- 引用css文件，html rel：relationship的英文缩写·
REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，
的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式
而REL="Alternate StyleSheet"定义一个交互样式。-->
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<p class="jd_layout">
    <!--搜索头部-->
    <header class="jd_header">
        <p class="jd_header_box">
            <a href="#" class="icon_logo"></a>

            <!--把调用出来的小键盘按钮enter 改变成 搜索 按钮-->
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="提示占位" />
            </form>
            <a href="#" class="login">登录</a>
        </p>
    </header>
    <!-- 轮播图-->
    <p class="jd_banner">
        <!--clearfix清除浮动-->
        <ul class="clearfix">
            <li><a href="#"><img src="images/l8.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l1.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l2.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l3.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l4.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l5.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l6.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l7.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l8.png" alt="" /></a></li>
            <li><a href="#"><img src="images/l1.png" alt="" /></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
    <!--导航栏-->
    <p class="jd_nav">
        <ul class="clearfix">
            <li>
                <a href="#">
                    <img src="images/nav1.png" alt="" />
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav2.png" alt="" />
                    <p>全球购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav3.png" alt="" />
                    <p>充值中心</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav4.png" alt="" />
                    <p>服装城</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav5.png" alt="" />
                    <p>京东金融</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav6.png" alt="" />
                    <p>领券</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav7.png" alt="" />
                    <p>分类查询</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav8.png" alt="" />
                    <p>物流查询</p>
                </a>
            </li>

        </ul>
    </p>
    <!--商品-->
    <main class="jd_product">
        <!--商品盒子的子类-->
        <section class="product_box jd_sk">
            <!--头部-->
            <p class="product_box_tit no_border">
                <p class="f_left m_l10">
                    <span class="sk_icon"></span>
                    <span class="sk_name">掌上秒杀</span>
                    <p class="sk_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>
                    </p>
                </p>
                <p class="f_right m_r10"><a href="#">更多></a></p>
            </p>
            <!--内容-->
            <p class="product_box_con">
                <ul class="clearfix">
                    <li>
                        <a href="#"><img src="images/detail01.png" alt="" /></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail03.png" alt="" /></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                    <li>
                        <a href="#"><img src="images/detail02.png" alt="" /></a>
                        <p>¥10.00</p>
                        <p>¥100.00</p>
                    </li>
                </ul>
            </p>
        </section><!--块-->

        <!--商品盒子的子类-->
        <section class="product_box">
            <!--头部-->
            <p class="product_box_tit"><h3>京东超市</h3></p>
            <!--内容-->
            <p class="product_box_con clearfix">
                <a href="#" class="f_left w_50 b_right"><img src="images/cp1.png" alt="" /></a>
                <a href="#" class="f_right w_50 b_bottom"><img src="images/cp2.png" alt="" /></a>
                <a href="#" class="f_right w_50"><img src="images/cp3.png" alt="" /></a>
            </p>
        </section><!--块-->

        <!--商品盒子的子类-->
        <section class="product_box">
            <!--头部-->
            <p class="product_box_tit"><h3>京东超市</h3></p>
            <!--内容-->
            <p class="product_box_con clearfix">
                <a href="#" class="f_right w_50 b_left"><img src="images/cp4.png" alt="" /></a>
                <a href="#" class="f_left w_50 b_bottom"><img src="images/cp5.png" alt="" /></a>
                <a href="#" class="f_left w_50"><img src="images/cp6.png" alt="" /></a>
            </p>
        </section><!--块-->

        <!--商品盒子的子类-->
        <section class="product_box">
            <!--头部-->
            <p class="product_box_tit"><h3>京东超市</h3></p>
            <!--内容-->
            <p class="product_box_con clearfix">
                <a href="#" class="f_left w_50 b_right"><img src="images/cp7.png" alt="" /></a>
                <a href="#" class="f_right w_50 b_bottom"><img src="images/cp8.png" alt="" /></a>
                <a href="#" class="f_right w_50"><img src="images/cp9.png" alt="" /></a>
            </p>
        </section><!--块-->

    </main>
</p>
</body>
</html>

3：图片资源在images文件夹下 图片资源点击打开链接

工程文件点击下载https://pan.baidu.com/s/1i5bfVvB

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网