flex布局仿京东移动端案例

最新推荐文章于 2022-09-10 18:18:39 发布

安静宅男爱蓝猫

最新推荐文章于 2022-09-10 18:18:39 发布

阅读量1.5k

点赞数 3

分类专栏： HTML以及移动端布局文章标签： html5 前端

@By-蓝猫

本文链接：https://blog.csdn.net/qq_43355930/article/details/104905250

版权

HTML以及移动端布局专栏收录该内容

4 篇文章 1 订阅

订阅专栏

flex布局仿京东案例

首先在说一下flex布局特点

它是一个一维系统，用来为盒状模型提供最大的灵活性。

使用：任何容器（行内元素可设置为display:inline-block）;

特点：空间分布在行中进行，而非整体

flex就是沿着一条线铺下去，这个线可能水平，也可能垂直，这个平铺的方向用flex-direction来控制。

注意:该案例请将css js 图片保存到各自的文件中，在此需要引入swiper的css文件和js文件，在此就不一一列出来了，自己下载就行

css的初始化文件base.css

/*公共样式*/

/*1.样式重置*/
html,body,ul,li,img,a,p,div,form,input{
    padding: 0;
    margin: 0;
    /*设置盒模型*/
    box-sizing: border-box;
    /*去除移动端特有的点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
}
body{
    font-family: "微软雅黑",sans-serif;
    font-size: 13px;
}
a,
a:hover{
    color: #666;
    text-decoration: none;
}
ul{
    list-style: none;
}
input{
    /*1.清除文本框获取焦点时默认的边框阴影*/
    outline: none;
    /*2.去除边框*/
    border: none;
    /*3.添加边框*/
    border: 1px solid #ccc;
}

/*2.添加新的样式*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.m_left10{
    margin-left: 10px;
}
.m_right10{
    margin-right: 10px;
}
.m_top10{
    margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}

首页的css文件

body{
    /*width: 100%;*/
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;


}
div{
    box-sizing: border-box;
}
.header{
    display: flex;
    position: fixed;
    max-width: 640px;
    min-width: 320px;
    width: 100%;
    height: 40px;
    background-color:transparent;
    justify-content: space-between;
    z-index: 99;
}
.logo{
    width:56px;
    height: 40px;
    background: url("../images/jd-sprites.png") no-repeat 0 -108px;
    background-size: 199px;
    margin-top:8px;
    margin-left: 5px;
}
.dl{

    width: 10%;
    line-height: 44px;
    font-size: 14px;
    padding-right: 5px;
    color: #f0f0f0;
}
.search-header{
    display: flex;
    position: relative;
    width: 75%;
}
.search-header::before{
    z-index: 1;
    content: "";
    width: 27px;
    height: 23px;
    position: absolute;
    background: url("../images/jd-sprites.png") no-repeat -56px -108px;
    background-size: 200px 200px;
    margin-top: 10px;
    margin-left: 5px;
}
.search{
    position: absolute;
    display: flex;
    right: 0;
    top: 0;
    height: 40px;
    line-height: 40px;
    width: 100%;
    /*border: 1px solid red;*/

}
.search-input{
   flex: 1;
    margin: 5px;
    border-radius:15px;
    padding-left: 25px;
    padding-right: 15px;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.slider{

    border-radius: 10px 10px 0 0;
}

.slider img{
    width: 100%;
    /*border-radius: 15px;*/
}

.main-content{
    background-color: white;
    height: 1000px;
}
/*nav*/
nav{

    padding-top: 5px;

}
nav a{
    display: flex;
    float: left;
    width: 25%;
    margin: 10px 0;
    flex-direction: column;
    align-items: center;
}
nav a img {
    width: 100%;
}
.jd_nav{
    width: 50px;
    height: 50px;
    /*border:1px solid red;*/
}

.clear{
    clear: both;
}
/*jd_timer*/
.jd_timer{
    position: relative;
    display: flex;
    height: 30px;
    margin-top: 5px;
    /*background-color: pink;*/
}
.jb-icon{
    width: 16px;
    height: 20px;
    background: url("../images/seckill-icon.png") no-repeat;
    background-size: 16px 20px;
    margin-top: 4px;
    margin-left: 5px;
}
.miao{
    line-height: 30px;
    margin-left: 3px;
    color: red;
    font-size: 14px;
}


.jd_timer a{
    position: absolute;
    top: 0;
    right: 0;
    line-height: 30px;
}
.jb_timer-i{
    margin-left: 4px;

}
.jb_timer-i span{

}
.time{
    width: 20px;
    height: 18px;
    background-color: black;
    color: white;
    line-height: 30px;
    margin: 1px;
    text-align: center;
}
.show{
    display: flex;
    height: 130px;

    border-bottom: 2px solid #ccc;
    border-right: 2px solid #ccc;
  /*flex-direction: column;*/

}
.show a{
    display: flex;
    float: left;
    width: 33.333%;
    margin: 10px 0;
    flex-direction: column;
    align-items: center;
}
.jb-show{
    width: 68px;
    height: 68px;
    /*background-color: pink;*/
}
.jb-show img{
    width: 100%;
}
.jd_product{
    width: 100%;
}
.jd_productBox{
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    /*添加边框阴影*/
    box-shadow: 1px 1px 1px #ccc;
}
.jd_productBox  > .jd_pTip{
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    color: #666;
}
.jd_productBox  > .jd_pTip > h3{
    position: relative;
    padding-left: 30px;
}
.jd_productBox  > .jd_pTip > h3::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 12px;
    background-color: #e92322;
    left: -8px;
    top: 9px;
}

/*产品块图片超链接*/
.a_50{
    width: 50%;
    display: block;
}
.a_50 > img{
    width: 100%;
    display: block;
}
.b_left{
    border-left: 1px solid #ccc;
}
.b_bottom{
    border-bottom: 1px solid #ccc;
}
.b_right{
    border-right:1px solid #ccc;
}
/*设置一个样式标记：秒杀块样式开始*/
.jd_sk{}
.jd_sk > .jd_pTip{
    border-bottom: none;
}
.jd_sk > .jd_pTip .jd_sk_icon{
    width: 16px;
    height: 20px;
    background: url("../images/seckill-icon.png");
    background-size: 16px 20px;
    margin-top:3px;
}
.jd_sk > .jd_pTip .jd_sk_text{
    color: #e92322;
}
.jd_sk > .jd_pTip .jd_sk_time > span{
    width: 13px;
    height: 18px;
    display: inline-block;
    line-height: 18px;
    color: #fff;
    background-color: #000;
    text-align: center;
}
.jd_sk > .jd_pTip .jd_sk_time > span:nth-last-of-type(3n){
    color: #000;
    background-color: transparent;
    width: 8px;
}
.jd_sk .jd_pContent{
    padding:20px;
}
.jd_sk .jd_pContent > ul{
    width: 100%;
}
.jd_sk .jd_pContent > ul > li{
    width: 33.33%;
    float: left;
    text-align: center;
}
.jd_sk .jd_pContent > ul > li img{
    width: 60%;
    display: inline-block;
}
    .leave{
        position: fixed;
        display:none;
        right: 15px;
        bottom: 15px;
        width: 38px;
        height: 38px;
        /*background-color: pink;*/
        background: url("../images/back.png");
        background-size: 38px;
    }
/*.jd_pTip{*/
    /*position: relative;*/
    /*height: 30px;*/
    /*margin-top: 5px;*/
    /*!*margin-top: 10px;*!*/
    /*!*background-color: pink;*!*/

/*}*/
/*.jd_pTip>div{*/
    /*position: absolute;*/
    /*top:2px;*/
    /*height: 25px;*/
    /*width: 6px;*/
    /*background-color: red;*/

/*}*/

/*.jd_pTip h3{*/
    /*margin: 0;*/
    /*position: absolute;*/
    /*left: 20px;*/
    /*top:6px;*/
/*}*/
/*.jb-mark{*/
    /*display: flex;*/
    /*height: 218px;*/
    /*!*background-color: pink;*!*/
    /*border-top: 1px solid #ccc;*/
    /*border-bottom: 1px solid #ccc;*/
    /*margin-bottom: 5px;*/
    /*background-color: #009dfd;*/
/*}*/
/*.jb-mark-r{*/

    /*width: 100%;*/
    /*height: 218px;*/
    /*!*background-color: #ccc;*!*/
    /*border-right: 1px solid #ccc;*/
/*}*/
/*.jb-mark-r a{*/

/*}*/
/*.jb-mark-r a img {*/
    /*width: 100%;*/
/*}*/
/*.jb-mark-l{*/
    /*display: flex;*/
    /*width:100%;*/

    /*!*background-color: #b1191a;*!*/

    /*flex-direction: column;*/
/*}*/
/*.b-mark-l-t{*/
    /*flex: 1;*/
    /*!*height: 50%;*!*/
    /*width: 100%;*/
    /*!*background-color: #009dfd;*!*/
    /*!*overflow: hidden;*!*/
    /*border-bottom: 1px solid #ccc ;*/

/*}*/
/*.b-mark-l-t img{*/
    /*width: 100%;*/
/*}*/
/*.b-mark-l-b{*/
    /*flex: 1;*/
   /*width: 100%;*/
    /*!*height: 50%;*!*/
    /*!*background-color: #ffffff;*!*/

/*}*/
/*.b-mark-l-b img {*/
    /*width: 100%;*/
/*}*/

index的js文件(包含swiper的js调用）

window.addEventListener("load", function () {
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    var goback = document.querySelector('.leave');
    var hear = document.querySelector('.header');
    window.addEventListener("scroll",function () {
        if(window.pageYOffset>0){

            hear.style.backgroundColor ='red';
        }else {

            hear.style.backgroundColor ='transparent';
        }

        if(window.pageYOffset>110){
            goback.style.display ='block';
            hear.style.backgroundColor ='red';
        }else {
            goback.style.display = 'none';
            hear.style.backgroundColor ='transparent';
        }
        goback.addEventListener("click",function () {
            window.scroll(0,0);
        });
    });
});

HTML的页面代码

<!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">
    <link rel="stylesheet" href="css/base.css">
    <!--引入页面css-->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/index.js"></script>
    <title>京东</title>
</head>
<body>

<!--返回顶部-->
<div class="leave"></div>
<!--顶部搜素模块-->

<header class="header">
    <a href="#" class="logo"></a>
        <div class="search-header">

            <form action="javasript:;" class="search">
            <input type="search" class="search-input">
        </form>
    </div>
    <a href="#" class="dl">登陆</a>
</header>

<!--导航栏-->
<!--滑动图-->
<div class="main-content">
    <div class="slider">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="uploads/l1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l6.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l7.jpg" alt=""></div>
                <div class="swiper-slide"><img src="uploads/l8.jpg" alt=""></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <!--导航块-->

    <nav>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_1.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_2.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_3.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_4.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_5.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_6.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_7.png" alt=""></div>
            <span>商品分类</span>
        </a>
        <a href="#">
            <div class="jd_nav"><img src="images/nav_8.png" alt=""></div>
            <span>商品分类</span>
        </a>

    </nav>

    <div class="clear"> </div>

    <!--限时特价-->
    <div class="jd_timer">
        <div class="jb-icon"></div>
        <div class="miao">掌上秒杀</div>
        <div class="jb_timer-i">
            <span class="time">0</span>
            <span  class="time">1</span>
            <span>:</span>
            <span  class="time">1</span>
            <span  class="time">0</span>
            <span>:</span>
            <span class="time">4</span>
            <span class="time">1</span>
        </div>
        <a href="#">更多秒杀...</a>
    </div>

    <div class="show">
        <a href="#">
            <div class="jb-show">
                <img src="uploads/detail01.jpg" alt="">
            </div>
            <del>$10.0</del>
            <span>$8.0</span>
        </a>
        <a href="#">
            <div class="jb-show">
                <img src="uploads/detail02.jpg" alt="">
            </div>
            <del>$10.0</del>
            <span>$8.0</span>
        </a>
        <a href="#">
            <div class="jb-show">
                <img src="uploads/detail02.jpg" alt="">
            </div>
            <del>$10.0</del>
            <span>$8.0</span>
        </a>
    </div>

    <!--商品-->
    <div class="jd_productBox">
        <div class="jd_pTip">
            <h3>京东超市</h3>
        </div>
        <div class="jd_pContent clearfix">
            <a href="javascript:;" class="a_50 f_left">
                <img src="./uploads/cp1.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_bottom b_left">
                <img src="./uploads/cp2.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_left">
                <img src="./uploads/cp3.jpg" alt="">
            </a>
        </div>
    </div>
    <div class="jd_productBox">
        <div class="jd_pTip">
            <h3>京东超市</h3>
        </div>
        <div class="jd_pContent clearfix">
            <a href="javascript:;" class="a_50 f_right">
                <img src="./uploads/cp4.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_bottom b_left">
                <img src="./uploads/cp5.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_left">
                <img src="./uploads/cp6.jpg" alt="">
            </a>
        </div>
    </div>
    <div class="jd_productBox">
        <div class="jd_pTip">
            <h3>京东超市</h3>
        </div>
        <div class="jd_pContent clearfix">
            <a href="javascript:;" class="a_50 f_left">
                <img src="./uploads/cp1.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_bottom b_left">
                <img src="./uploads/cp2.jpg" alt="">
            </a>
            <a href="javascript:;" class="a_50 f_left b_left">
                <img src="./uploads/cp3.jpg" alt="">
            </a>
        </div>
    </div>
</div>
    <!--<div class="jd_pTip">-->
        <!--<div></div>-->
        <!--<h3>-->
            <!--京东超市-->
        <!--</h3>-->
    <!--</div>-->
    <!--<div class="jb-mark">-->
        <!--<a class="jb-mark-r">-->
            <!--<img src="uploads/cp1.jpg" alt="">-->
        <!--</a>-->
        <!--<div class="jb-mark-l">-->
            <!--<a class="b-mark-l-t">-->
                <!--<img src="uploads/cp2.jpg" alt="">-->
            <!--</a>-->

            <!--<a class="b-mark-l-b">-->
                <!--<img src="uploads/cp3.jpg" alt="">-->
            <!--</a>-->
        <!--</div>-->
    <!--</div>-->




</div>



</body>
</html>

图片资源

链接：https://pan.baidu.com/s/1YrgYKH0OUtNWO_XNrWN3IQ
提取码：syge

存在问题:

下面的列表，由于前期没有实现响应式的，在多个手机尺寸模拟中出现不正常现象，时间关系就采取正常的设计方法。

安静宅男爱蓝猫

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
flex布局仿京东移动端案例

flex布局仿京东案例首先在说一下flex布局特点它是一个一维系统，用来为盒状模型提供最大的灵活性。使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 flex就是沿着一条线铺下去，这个线可能水平，也可...
复制链接

扫一扫