CSS实战flex布局仿京东app - 前端开发

首页 > 博客列表 > CSS实战flex布局仿京东app

博主信息

博文 16

粉丝 0

访问量 18809

专题推荐

更多>

京东实战app

运用弹性盒子布局京东app首页

css代码

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;    
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none;
}
input{
    color: #232326;
}
@media (min-width:360px){
    html{
        font-size: 12px;
    }
}
/* 页眉 start */
.header{
    background: #b2151b;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3rem;
    z-index: 999;
}
.header .icon-menu{
    background: url(../images/icon-menu.png)50% no-repeat;     
    background-size: 40%; 
    height: 3rem;
}
.header{
    display: flex;
    align-items: center;
}
/* 页眉中的三个部分比例 1:6:1 */
.header .login{
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
    flex: 1;    
}
.header .menu{    
    text-align: center;
    flex: 1;
    font-size: 2.5rem;
}
.header .search{
    flex: 6;
    background: #ffffff;
    border-radius: 3rem;
    padding: 0.5rem;    
    display: flex;
}
.header .search .logo{
    background: url(../images/jd-sprites.png)-13% 0% no-repeat;
    background-size: 14rem;
    flex: 1;
    height: 1rem;
}
.header .search .icon-search{
    background: url(../images/icon-search.png) 50% 0% no-repeat;
    background-size: 1.3rem;
    flex: 1;
    height: 1rem;
    border-left: 1px solid #bdbdbd;
}
.header .search .words{
    flex: 6;
    border: none;
    height: 1rem;
}
/* 页眉 end */
/* 主体 start */
.main{
    background: #f6f6f6;
    padding-top: 3rem;
    padding-bottom: 6rem;
    font-size: 1.4rem;
}
.main .nav{
    padding: 1rem;
    background: #ffffff;
    border-radius: 1rem;
    margin: 0.5rem;
    display: flex;
    /* 运行换行 */
    flex-flow: row wrap;
    justify-content: space-between;
}
.main .nav img{
    height: 3rem;
    width: 3rem;
}
.main .nav a{
    font-size: 1rem;
}
.main .nav li{
    flex: 1 5 20%;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    height: 6rem;
}
.main .nav li p{
    color: #666;
    font-size: 0.8rem;
}
.main .ms{
    background: #ffffff;
    border-radius: 1rem;
    margin: 0.5rem;
    padding: 0.5rem;
}
.main .ms .ms-top{
    font-size: 1.3rem;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    background: url(../images/ms-bg.png) no-repeat;
    background-size: 100%;
}
.main .ms .ms-top .left{
    display: flex;
    flex: 4;
}
.main .ms .ms-top .left .title{
    font-weight: bold;
    flex: 1;    
}
.main .ms .ms-top .left .notice{
    display: flex;
    flex: 3;
}
.main .ms .ms-top .left .notice .tips{
    font-size: 1.2rem;
    color: #ff2727;
    line-height: 2;
    font-weight: bold;
    flex: 1;
}
.main .ms .ms-top .left .notice .tips::after{
    content: '';
    background: url(../images/seckill-time-to_1de70c91.png)10% no-repeat;
    padding: 1rem;
    background-size: 99%;
}
.main .ms .ms-top .left .notice .time{
    font-size: 1.2rem;
    flex: 3;
    line-height: 2;
}
.main .ms .ms-top .left .notice .time span{
    background: #fa2c19;
    color: #ffffff;
    border-radius: 4px;
    padding: 0.2rem;
}
.main .ms .ms-top .right{
    flex: 1;
    font-size: 1.1rem;
    color: #f23030;
    line-height: 2;
}
.main .ms .ms-top .right::after{
    content: '';
    background: url(../images/arrow_rt_2ccb8cd5.png)10% no-repeat;
    padding: 1rem;
    background-size: 40%;
    margin-left: 0.1rem;
}
.main .ms .ms-body{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.main .ms .ms-body img{
    width: 4rem;
    height: 4rem;
}
.main .ms .ms-body li{
    text-align: center;
}
.main .ms .ms-body li .price{
    color: #f2270c;
    font-size: 1.1rem;
    font-weight: bold;
}
.main .ms .ms-body li .seckill-original-price{
    font-size: 1.1rem;
    color: #999;
    text-decoration:line-through
}
.main .main-body{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0.5rem;
}
.main .main-body li{
    flex: 1 1 calc(50% - 1rem);
    align-items: center;
    background: #ffffff;
    display: flex;
    flex-flow: row wrap;
    margin: 0.5rem;
    border-radius: 3px;
    border-radius: 10px;
}
.main .main-body li img{
    width: 100%;
    height: 100%;
}
.main .main-body li .info{
    margin: 0.3rem;
    height: 7rem;
}
.main .main-body li .info p{
    font-size: 1rem;
    margin-bottom: 0.5rem;
    height: 3rem;
    overflow: hidden;
}
.main .main-body li .info .desc-price {
    display: flex;
    justify-content: space-between;
}
.main .main-body li .info .desc-price .left{
    color: #fa2c19;
    font-size: 0.8rem;
}
.main .main-body li .info .desc-price .left .price{
    font-weight: bold;
}
.main .main-body li .info .desc-price .left .price span{
    font-size: 1.3rem;
    margin-left: 0.2rem;
}
.main .main-body li .info .desc-price .left .price .sg{
    border: 1px solid #fa2c19;
    font-size: 0.5em;
    font-weight: normal;
    padding: 0 0.1rem 0;
    border-radius: 3px;
}
.main .main-body li .info .desc-price .right{
    color: grey;
    font-size: 0.8rem;
    background: #f0f2f5;
    height: 2rem;
    line-height: 2;
    padding: 0 0.5rem;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    right: -0.5rem;
}
/* 主体 end */
.footer{
    background: #ffffff;
    position: fixed;
    height: 6em;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
.footer .nav{
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.footer .nav li{
    flex: 1 1 20%;
}
.footer .nav li img{
    width: 100%;
    height: 100%;
    padding: 0.3rem 0.2rem 0;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多快好省，购物上京东！</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
    <!-- 页眉 -->
    <div class="header">
        <!-- 字体图标菜单 -->
        <div class="menu iconfont icon-menu"></div>
        <!-- 搜索框 -->
        <div class="search">
            <div class="logo"></div>
            <div class="zoom iconfont icon-search"></div>
            <input type="text" class="words" placeholder="联想一体机电脑">
        </div>
        <!-- 登录按钮 -->
        <a href="" class="login">登录</a>
    </div>
    <!-- 主体 -->
    <div class="main">
        <ul class="nav">
            <li>
                <a href="#">
                    <img src="images/e2bcc411170524f0.png"/>
                  <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/ed9861b4ddfb9f30.png"/>
                  <p>数码电器</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/0db99d859ab16ce9.png"/>
                  <p>京东服饰</p>
                </a>
            </li>           
            <li>
                <a href="#">
                    <img src="images/59712d986b10bb0a.png"/>
                  <p>京东生鲜</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/f07cc166f368fa05.png"/>
                  <p>京东到家</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/300071558a9ab078.png"/>
                  <p>充值缴费</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/b2aa7d67e675baf8.png"/>
                  <p>9.9元拼</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/e5c12d5e943266b9.png"/>
                  <p>领券</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/af4b57d2383e605d.png"/>
                  <p>领金贴</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/d04df7c74c87cf68.png"/>
                  <p>PLUS会员</p>
                </a>
            </li>
        </ul>
        <!-- 秒杀区 -->
        <div class="ms">
            <div class="ms-top">
                <div class="left">
                    <div class="title">京东秒杀</div>
                    <div class="notice">
                        <div class="tips">
                            16
                        </div>
                        <div class="time"><span>00</span>:<span>35</span>:<span>14</span></div>
                    </div>
                </div>
                <div class="right">更多秒杀</div>
            </div>
            <ul class="ms-body">
                <li>
                    <a href="#">
                        <img src="images/9594607c2e8b36db.jpg" />
                        <p class="price">￥20.9</p>
                        <p class="seckill-original-price">￥23.7</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/6a2ff1fc52fe892c.jpg" />
                        <p class="price">￥1000</p>
                        <p class="seckill-original-price">￥1500</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/bff7dd4facbc18d6.jpg" />
                        <p class="price">￥19.9</p>
                        <p class="seckill-original-price">￥29.9</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/cc5a53e672c9d90f.jpg" />
                        <p class="price">￥22.9</p>
                        <p class="seckill-original-price">￥35.9</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/c40339852983406f.jpg" />
                        <p class="price">￥1959</p>
                        <p class="seckill-original-price">￥2248</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/48b02e4c05f5ccb9.jpg" />
                        <p class="price">￥29.9</p>
                        <p class="seckill-original-price">￥45</p>
                    </a>
                </li>
            </ul>
        </div>     
        <!-- 商品主体   -->
        <ul class="main-body">            
            <li>
                <a href="#">
                    <img src="images/c0ab1871dbc3a78c.jpg" />
                </a>                
                <div class="info">
                    <p>忆丝芸头发营养液保湿护发喷雾200ml（免洗护发素防毛躁烫发护理柔顺精华液） 水润平衡喷雾</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>52</span>
                                <span class="sg">减免</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>          
            <li>
                <a href="#">
                    <img src="images/8a6a08fd86671626.jpg" />
                </a>                
                <div class="info">
                    <p>安睡宝(SOMERELLE) 水洗棉四件套 ins全棉色织纯棉学生宿舍三件套素色简约床单被套 雾霾兰 1.8米双人床四件套 220*240cm</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>379</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>     
            <li>
                <a href="#">
                    <img src="images/4a490f0a31564308.jpg" />
                </a>                
                <div class="info">
                    <p>汰渍 Tide 洁净除菌洗衣液（洁雅百合香）超值套装10斤（2KG*1瓶+500G*6袋装</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>59.9</span>
                                <span class="sg">满减</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>       
            <li>
                <a href="#">
                    <img src="images/2d80e586f7acd3aa.jpg" />
                </a>                
                <div class="info">
                    <p>佳洁士(Crest) 3D钻亮炫白系列美白漱口水500ML</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>38.8</span>
                                <span class="sg">满减</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>           
            <li>
                <a href="#">
                    <img src="images/06296d41299f6765.jpg" />
                </a>                
                <div class="info">
                    <p>亚缇克兰 Urtekram 玻尿酸原液水光面膜10片 （补水保湿男女士护肤化妆品）</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>98.8</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>       
            <li>
                <a href="#">
                    <img src="images/b6ce1ff083180055.png" />
                </a>                
                <div class="info">
                    <p>北极绒 秋冬裸睡全新科技臻肤棉四件套 刺绣加厚保暖床单被套床上单人双人宿舍三件套</p>
                    <div class="desc-price">
                        <div class="left">
                            <div class="price">
                                ￥<span>89</span>
                            </div>
                        </div>                    
                        <div class="right">
                            <p>看相似</p>
                        </div>
                    </div>                    
                </div>
            </li>           
        </ul>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <ul class="nav">
            <li>
                <a href="#">
                    <img src="images/81328b0609c60a3c.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/4af32f42575509d8.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/a161ad4f4d2bb5ea.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/f2fe0a88bf344736.png" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/876c40f17d91ce44.png" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

首页展现效果图

京东app首页

动图效果如下

动态图

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端入门基础标签

2020-12-12 20:29:35