【前端从入门到精通：第十课：移动端布局实战(伸缩盒)】

伸缩盒实战移动端商城

项目参考网址:shopvue.eduwork.cn

目录结构

/bookBrothers/
    |- index.html 首页
    |- css/ CSS目录
        |- base.css 清楚默认样式 设置通用原子类
        |- bookBrothers.css 全局样式
        |- index.css index.html文件样式
    |- img/ 图像资源目录
    |- font/字体图标目录

base.css

body,p,div,a,ul,li,ol,input{
    padding:0px;
    margin:0px;
}

html{
    /*font-size:16px;*/
    /*1rem = 1 * 16 = 16px = 1rem*/
    font-size:62.5%;
    /*10 / 16 * 100% = 62.5% 也就是默认10px的字号   1rem = 10px*/
}
body{
    font-size:1.2rem;
}

li{
    list-style:none
}
a{
    text-decoration: none;
}

:root{
    --font-white:white;
    --font-666:#666;
    --font-ffa666:#ffa666;
    --font-2c3e50:#2c3e50;
    --border-eee:#eee;
    --box-shadow-e9:#e9e9e9;
    --bgcolor-ffa666:#ffa666;
    --bgcolor-f6f6f6:#f6f6f6;
    --font-red:#f00;
}

bookBrothers.css

.mt-1{
    margin-top:0.5rem
}
.mt-2{
    margin-top:1rem;
}
.mt-3{
    margin-top: 1.5rem;
}
.mt-4{
    margin-top: 2rem;
}
.m-auto{
    margin-left: auto;
    margin-right: auto;
}
.w-100{
    width: 100%;
}
.w-390px{
    width: 39rem;
}
.d-flex{
    display: flex;
}
.flex-direction-column{
    flex-direction: column;
}

.justify-content-center{
    justify-content: center;
}
.justify-content-between{
    justify-content: space-between;
}
.justify-content-around{
    justify-content: space-around;
}
.align-items-center{
    align-items: center;
}
.flex-grow-1{
    flex-grow:1
}
.border{
    border:1px solid var(--border-eee)
}
.border-bottom{
    border-bottom:8px solid var(--border-eee)
}
.bg-color-f6f6f6{
    background: var(--bgcolor-f6f6f6);
}
.bg-color-ffa666{
    background: var(--bgcolor-ffa666);
}
.font-14{
    font-size:1.4rem;
}
.font-16{
    font-size:1.6rem;
}
.font-color-white{
    color:var(--font-white)
}
.font-color-2c3e50{
    color: var(--font-2c3e50);
}
.font-color-666{
    color: var(--font-666);
}
.font-color-ffa666{
    color:var(--font-ffa666)
}
.font-color-red{
    color: var(--font-red);
}
.h-100{
    height: 100%;
}
.position-absolute{
    position: absolute;
}
.position-relative{
    position: relative;
}
.position-fixed{
    position: fixed;
}
.visibility-hidden{
    visibility: hidden;
}
.text-center{
    text-align: center;
}

/*
    vw  100vw 等于当前设备的宽度
    vh  100vh 等于当前设备的高度

*/

index.css

header{
    height: 4.5rem;
    z-index: 1;
    top:0rem;
}
header>div:first-child>i::before,header>div:last-child>i::before{
    font-size:5rem;
}
header>div{
    /*border:1px solid red;*/
}
header>div:first-child{
    flex-grow: 1;
}
header>div:nth-child(2){
    flex-grow: 10;
}
header>div:nth-child(3){
    flex-grow: 1;
}
/*banner style*/
.banner{
    /*height: 1000px;*/
    background: tan;
    /*position: absolute;*/
    width: 39rem;
    margin:0px auto;
    margin-top:4.5rem;
    /*border:1px solid red;*/
    overflow: hidden;
}
.banner>div{
    width: calc(39rem * 3);
    display: flex;
    animation: animat 10s infinite;
}
.banner>div>img{
    width: 39rem;
}
@keyframes animat {
    35%{
        margin-left: -39rem
    }
    70%{
        margin-left: calc(-39rem * 2);
    }
    100%{
        margin-left: calc(-39rem * 3);
    }
}
/* recomment style */
.recomment{
    width: 39rem;
    /*border:1px solid red;*/
    margin:10px auto;
    padding: 1.5rem 0.5rem 2rem;
}
.recomment>div>a>img{
    width: 7rem;
    margin-bottom: 1rem;
}

/*首页商品分类导航*/
.nav>div{
        /*padding: .6rem 0rem;*/
    width: 13rem;
    height: 4rem;
}
.nav>div:first-child>span{
    padding-bottom: 0.6rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border-bottom: 0.3rem solid var(--bgcolor-ffa666);
}
/*商品区域*/
.goods{
    margin-bottom: 6rem;
    flex-wrap: wrap;
}
.goods>div{
    width: calc(38rem / 2);
    box-sizing: border-box;
    margin-bottom: 1rem;
    box-shadow: .2rem .3rem .3rem var(--box-shadow-e9);
    padding-bottom: 1rem;
}
.goods>div>a>img{
    width: 100%;
}
.goods>div>a>div>span:last-child>i:before{
    font-size:1rem;
    margin-left: .8rem;
    margin-right: .3rem;
}
/*返回顶部*/
.top{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: url('../img/5.png') no-repeat center;
    position: fixed;
    right:3rem;
    bottom:8rem;
    box-shadow: .3rem .3rem .3rem #999;
}
/*nav style*/
nav{
    width: 100%;
    height: 5rem;
    bottom:0px;
}
nav>div{
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav>div:nth-child(2)>a>i:before{
    font-size:1.2rem;
}
nav>div:nth-child(3)>a>i:before{
    font-size:1.2rem;
}
nav>div:nth-child(3)>a{
    position: relative;
}
nav>div:nth-child(3)>a>span:first-child{
    position: absolute;
    padding: 0rem 0.3rem;
    background: red;
    color:#fff;
    border-radius: 50%;
    top:-1.3rem;
    right:.8rem;
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图书兄弟</title>
        <link rel="stylesheet" href="./css/base.css" />
        <link rel="stylesheet" href="./css/bookBrothers.css" />
        <link rel="stylesheet" href="./css/iconfont.css" />
        <link rel="stylesheet" href="./css/index.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    </head>
    <body>
        <header class="w-100 position-fixed bg-color-ffa666 d-flex justify-content-between align-items-center">
            <div><i class="iconfont font-color-white icon-jiantou_liebiaoxiangzuo_o font-16"></i></div>
            <div class="font-16 font-color-white text-center">图书兄弟</div>
            <div><i class="iconfont visibility-hidden font-color-white icon-jiantou_liebiaoxiangzuo_o  font-16"></i></div>
        </header>
        <!--轮播图-->
        <section class="banner">
            <div>
                <img src="./img/a.png" alt="">
                <img src="./img/c.png" alt="">
                <img src="./img/b.png" alt="">
                <img src="./img/c.png" alt="">
            </div>
        </section>
        <!--首页商品推荐-->
        <section class="recomment d-flex justify-content-between align-items-center border-bottom">
            <div>
                <a href="" class="d-flex flex-direction-column align-items-center justify-content-center">
                    <img src="./img/1.png" alt="">
                    <span  class="font-color-666">《区块链》</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex flex-direction-column align-items-center justify-content-center">
                    <img src="./img/2.png" alt="">
                    <span class="font-color-666">《区块链》</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex flex-direction-column align-items-center justify-content-center">
                    <img src="./img/3.png" alt="">
                    <span class="font-color-666">《区块链》</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex flex-direction-column align-items-center justify-content-center">
                    <img src="./img/4.png" alt="">
                    <span class="font-color-666">《区块链》</span>
                </a>
            </div>
        </section>
        <!--首页商品导航-->
        <section class="nav w-390px m-auto d-flex justify-content-between align-items-center">
            <div class="d-flex justify-content-center align-items-center flex-grow-1">
                <span class="font-14 font-color-ffa666">畅销</span>
            </div>
            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
                <span class="font-14 font-color-2c3e50">新书</span>
            </div>
            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
                <span class="font-14 font-color-2c3e50">精选</span>
            </div>
        </section>
        <!--商品区域-->
        <section class="goods w-390px m-auto d-flex justify-content-between">
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="./img/1.png" alt="">
                    <p class="text-center font-color-2c3e50">《区块链》</p>
                    <div class="text-center">
                        <span class="font-color-red">￥32.00</span>
                        <span class="font-color-2c3e50"><i class="icon-wujiaoxingkong iconfont"></i>82</span>
                    </div>
                </a>
            </div>
        </section>
        <!--返回顶部-->
        <div class="top "></div>
        <!--底部-->
        <nav class="w-100 position-fixed bg-color-f6f6f6 d-flex justify-content-between align-items-center">
            <div>
                <a href="" class="d-flex  font-color-ffa666 flex-direction-column align-items-center justify-content-center">
                    <i class="iconfont icon-shouye"></i>
                    <span class="font-14">首页</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex font-color-2c3e50  flex-direction-column align-items-center justify-content-center">
                    <i class="iconfont icon-fenlei"></i>
                    <span class="font-14">分类</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex font-color-2c3e50 flex-direction-column align-items-center justify-content-center">
                    <span>0</span>
                    <i class="iconfont icon-gouwuche"></i>
                    <span class=" font-14">购物车</span>
                </a>
            </div>
            <div>
                <a href="" class="d-flex font-color-2c3e50 flex-direction-column align-items-center justify-content-center">
                    <i class="iconfont icon-31wode"></i>
                    <span class="font-14">我的</span>
                </a>
            </div>
        </nav>
    </body>
</html>