flex(弹性盒模型)布局写一个移动端
Posted k欧巴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex(弹性盒模型)布局写一个移动端相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> <link rel="stylesheet" href="css/reset.css"/> <link rel="stylesheet" href="global.css"/> <script src="css/auto-size.js"></script> </head> <body> <!-- 导航--> <header> <div class="pic"> <img src="img/avatar.png" /> </div> <div class="loginbar"> <p>k欧巴</p> <p><em>V1</em><span>至尊会员</span></p> </div> <a href="#">></a> </header> <!-- 内容--> <div class="box"> <!-- 想看看过影评话题--> <div class="heart"> <ul> <li> <i></i> <p>想看<span>99+</span></p> </li> <li> <i></i> <p>看过<span>99+</span></p> </li> <li> <i></i> <p>评影<span>99+</span></p> </li> <li> <i></i> <p>话题<span>99+</span></p> </li> </ul> </div> <!-- 我的订单--> <div class="submenu"> <p>我的订单</p> <p>全部 <a href="#">></a> </p> </div> <div class="menu"> <ul> <li> <i></i> <p>未消费</p> </li> <li> <i></i> <p>待付款</p> </li> <li> <i></i> <p>待评价</p> </li> <li> <i></i> <p>退款</p> </li> </ul> </div> <div class="shop"> <ul> <li> <p>我的消息</p> <a href="#">></a> </li> <li> <p>我的收藏</p> <a href="#">></a> </li> <li> <p>会员中心</p> <a href="#">></a> </li> <li> <p>我的成就</p> <a href="#">></a> </li> </ul> </div> </div> <footer> <ul> <li> <i></i> </li> <li> <i></i> </li> <li> <i></i> </li> <li> <i></i> </li> </ul> </footer> </body> </html>
css装饰
body{
background-color:#f5f5f5 ;
}
/*导航*/
header{
width: 100%;
height:3.36rem;
background-color:#d33e37;
display: flex;
align-items: center;
}
a{
text-decoration:none;
}
.pic{
width: 1.87rem;
height: 1.87rem;
/*outline: 1px solid red;*/
background: url("img/loading_2.e3d934bf_02.png") no-repeat;
background-size: 100%;
margin-left:.57rem ;
}
.pic img{
width: 100%;
}
.loginbar p:first-child{
font-size:.35rem;
color: white;
margin-left: 1.2rem;
}
.loginbar p:last-child{
width: 2.3rem;
font-size:.3rem;
border: .01rem solid ;
border-radius:.53rem;
color:white;
margin-left: .55rem;
text-align: center;
margin-top: .2rem;
}
header a{
color: white;
margin-left:4.5rem;
font-family:"simsun";
}
/*内容*/
.box{
width: 100%;
height: 11.74rem;
/*outline: 0.01rem solid red;*/
}
/*想看看过影评话题*/
.heart{
width: 100%;
height:2.14rem;
/*outline: 0.01rem solid red;*/
background-color: white;
}
.heart ul{
display: flex;
padding: .35rem 0;
}
.heart li{
flex-grow: 1;
text-align: center;
}
.heart li:not(:last-child){
border-right: 1px solid #F1F1F1;
}
.heart li p{
font-size: 0.37rem;
font-weight: bold;
}
.heart li i{
display: inline-block;
width: .7rem;
height: .65rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
.heart li:nth-child(2) i{
width: 1rem;
background-position:-1.69rem 0;
}
.heart li:nth-child(3) i{
background-position: -2.82rem 0;
}
.heart li:nth-child(4) i{
width:.56rem;
background-position: -0.96rem 0;
}
/*我的订单*/
.submenu{
width:100%;
height:1.36rem;
margin-top: 0.41rem;
background-color: white;
border-bottom: 0.01rem solid #f5f5f5;
display: flex;
justify-content: space-between;
}
.submenu p{
font-size: 0.44rem;
padding: .4rem;
font-weight: bold;
}
.submenu p:last-child{
color:#989898;
font-size: 0.35rem;
}
.submenu p a{
color:#989898;
}
/*未消费待付款待评价退款*/
.menu{
width: 100%;
height:1.9rem;
background-color: white;
}
.menu ul{
display: flex;
/*padding: .35rem 0;*/
}
.menu li{
flex-grow: 1;
text-align: center;
}
.menu li p{
font-size: 0.3rem;
font-weight: bold;
}
.menu li i{
display: inline-block;
width: .66rem;
height: .66rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
.menu li:first-child i{
background-position:0 -0.77rem;
}
.menu li:nth-child(2) i{
width: 0.73rem;
background-position:-1rem -0.77rem;
}
.menu li:nth-child(3) i{
width: 0.67rem;
background-position: -1.88rem -0.77rem;
}
.menu li:nth-child(4) i{
width:.65rem;
background-position: -2.87rem -0.77rem;
}
/*我的消息我的收藏。。。。。*/
.shop ul{
width: 100%;
height:5.43rem;
/*outline: 0.01rem solid red;*/
margin-top: 0.47rem;
}
.shop li{
font-size:0.43rem;
font-weight: bold;
display: flex;
justify-content: space-between;
}
.shop li a{
font-family: "simsun";
color: #a5a5a5;
margin-top: 0.48rem;
margin-right:0.48rem;
}
.shop li p{
margin-top: 0.48rem;
margin-left: 0.47rem;
}
.shop li:first-child{
height:1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(2){
height:1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(3) {
height: 1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(4) {
height: 1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
/*脚部*/
footer{
width: 100%;
height: 1.51rem;
/*outline: 0.01rem solid red;*/
/*position:fixed;*/
margin-top: 0.49rem;
}
footer ul{
display: flex;
justify-content: space-around;
}
footer li{
flex-grow: 1;
text-align: center;
margin-top: 0.26rem;
}
footer li i{
display: inline-block;
width: .78rem;
height:1.14rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
footer li:first-child i{
background-position:0 -1.58rem;
}
footer li:nth-child(2) i{
background-position:-0.96rem -1.58rem;
}
footer li:nth-child(3) i{
background-position:-2.07rem -1.58rem;
}
footer li:nth-child(4) i{
width: 0.8rem;
background-position:-2.95rem -1.58rem;
}
说实话用这个布局方法比浮动什么的好多了又快捷又方便
以上是关于flex(弹性盒模型)布局写一个移动端的主要内容，如果未能解决你的问题，请参考以下文章