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

伸缩盒实战移动端商城

项目参考网址: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>