首页 > 代码库 > flex(弹性盒模型)布局写一个移动端

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="http://www.mamicode.com/css/reset.css"/> <link rel="stylesheet" href="http://www.mamicode.com/global.css"/> <script src="http://www.mamicode.com/css/auto-size.js"></script> </head> <body> <!-- 导航--> <header> <div class="pic"> <img src="http://www.mamicode.com/img/avatar.png" /> </div> <div class="loginbar"> <p>k欧巴</p> <p><em>V1</em><span>至尊会员</span></p> </div> <a href="http://www.mamicode.com/#">></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="http://www.mamicode.com/#">></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="http://www.mamicode.com/#">></a> </li> <li> <p>我的收藏</p> <a href="http://www.mamicode.com/#">></a> </li> <li> <p>会员中心</p> <a href="http://www.mamicode.com/#">></a> </li> <li> <p>我的成就</p> <a href="http://www.mamicode.com/#">></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(弹性盒模型)布局写一个移动端