console
<div class="border">
<div class="border1">
</div>
<div class="item">
<div class="item1">
<div class="item1-1" style="width:100%;height:35%;margin-top:10px;">
<div class="item1-1-1" style="width:50%;height:50%;margin:20px;color:white;font-size:20px;">
123 </div>
<div class="item1-1-1" style="width:50%;height:50%;margin:20px;color:white;font-size:20px;">
123 </div>
</div>
<div class="item1-2" style="width:100%;height:35%;margin-top:0px;">
<div class="item1-2-1" style="width:50%;height:40%;margin:20px;color:white;font-size:20px;">
123 </div>
<div class="item2-1" style="width:35%;height:40%;;background-color:red;margin-top:20px;">123
</div></div></div>
<div class="item2">
<span>
<p align="center">
1
</p>
收藏夹
</span>
<span>
<p align="center">
35
</p>
关注店铺
</span>
<span>
<p align="center">
458
</p>
足迹
</span>
</div>
<div style="width:100%;height:5px;background-color: #D8D8D8;">
</div>
<div class="item3">
<div class="item3-1">
<b>
我的订单
</b>
<span style="margin-left:200px;">
查看更多订单
</span>
</div>
<div style="width:100%;height:1px;background-color: #D8D8D8;">
</div>
<div class="item3-2">
<div>
<div class="glyphicon glyphicon-briefcase" style="font-size:28px; color:#FF6600;margin-left:3px;">
</div>
<p align="center" style="font-size:1px;">
待付款
</p>
</div>
<div>
<span class=" glyphicon glyphicon-inbox" style="font-size:28px; color:#FF6600;margin-left:2px;">
</span>
<p align="center" style="font-size:1px;">
待发货
</p>
</div>
<div>
<span class=" glyphicon glyphicon-plane" style="font-size:28px; color:#FF6600; margin-left:3px;">
</span>
<p align="center" style="font-size:1px;">
待收货
</p>
</div>
<div>
<span class="glyphicon glyphicon-th-large" style="font-size:28px; color:#FF6600;margin-left:3px">
</span>
<p align="center" style="font-size:1px;">
待评价
</p>
</div>
<div>
<span class=" glyphicon glyphicon-phone-alt" style="font-size:28px; color:#FF6600;margin-left:8px;">
</span>
<p align="center" style="font-size:1px;">
退款/售后
</p>
</div>
</div>
</div>
<div style="width:100%;height:5px;background-color: #D8D8D8;">
</div>
<div class="item4">
<div class="item4-1">
<span style="margin:6px;">
<b>
必备工具
</b>
</span>
<span style="margin:6px;">
查看更多工具>
</span>
</div>
<div style="width:100%;height:1px;background-color: #D8D8D8;">
</div>
<div class="item4-2">
<div>
<div class="glyphicon glyphicon-folder-open" style="font-size:28px; color:#0066FF;margin-left:3px;">
</div>
<p align="center" style="font-size:1px;">
卡券包
</p>
</div>
<div>
<span class="glyphicon glyphicon-adjust" style="font-size:28px; color:#0066FF;margin-left:2px;">
</span>
<p align="center" style="font-size:1px;">
花呗
</p>
</div>
<div>
<span class="glyphicon glyphicon-ok-sign" style="font-size:28px; color:#FFCC33; margin-left:4px;">
</span>
<p align="center" style="font-size:1px;">
会员
</p>
</div>
<div>
<span class="glyphicon glyphicon-tower" style="font-size:28px; color:#FFCC33;margin-left:9px">
</span>
<p align="center" style="font-size:1px;">
我的小蜜
</p>
</div>
</div>
<div style="width:100%;height:1px;background-color: #D8D8D8;">
</div>
<div class="item4-2">
<div>
<div class=" glyphicon glyphicon-question-sign" style="font-size:28px; color:#009900;margin-left:7px;">
</div>
<p align="center" style="font-size:1px;">
我的问答
</p>
</div>
<div>
<span class=" glyphicon glyphicon-th-large" style="font-size:28px; color:#009900;margin-left:4px;">
</span>
<p align="center" style="font-size:1px;">
我的圈子
</p>
</div>
<div>
<span class="glyphicon glyphicon-envelope" style="font-size:28px; color:#009900; margin-left:4px;">
</span>
<p align="center" style="font-size:1px;">
我的评价
</p>
</div>
<div>
<span class="glyphicon glyphicon-refresh" style="font-size:28px; color:#009900;margin-left:6px">
</span>
<p align="center" style="font-size:1px;">
我的分享
</p>
</div>
</div>
</div>
<div style="width:100%;height:1px;background-color: #D8D8D8;">
</div>
<div class="item5">
<div class="item5-2" style=" float:left; width:48px;">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-home" style="font-size:20px;color:#A0A0A0;">
</span>
</a>
</div>
<p align="center" style="font-size:1px; color:black;">
首页
</div>
<div class="item5-2" style=" float:left; width:48px;">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-th" style="font-size:20px;color:#A0A0A0;">
</span>
</a>
</div>
<p align="center" style="font-size:1px; color:black;">
微淘
</p>
</div>
<div class="item5-2" style=" float:left; width:48px;">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-comment" style="font-size:20px;color:#A0A0A0;">
</span>
</a>
</div>
<p align="center" style="font-size:1px; color:black;">
消息
</p>
</div>
<div class="item5-2" style=" float:left; width:48px;">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-shopping-cart" style="font-size:20px; color:#A0A0A0;">
</span>
</a>
</div>
<p align="center" style="font-size:1px; color:black;">
购物车
</p>
</div>
<div class="item5-2" style=" float:left; width:48px;">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-user" style="font-size:20px; color:#A0A0A0;">
</span>
</a>
</div>
<p align="center" style="font-size:1px; color:black;">
我的淘宝
</p>
</div>
</div>
</div>
</div>
.border {
width: 410px;
height: 660px;
border: solid 4px;
margin: auto;
border-radius: 30px;
}
.border1 {
width: 150px;
height: 4px;
border: solid 2px;
border-radius: 3px;
margin: 15px auto;
}
.item {
display: flex;
flex-direction: column;
width: 380px;
border: solid 3px;
margin: 45px auto;
}
.item1 {
display: flex;
flex-direction: column;
width: 100%;
height: 130px;
background-color: #FF9933;
}
.item1-1 {
display: flex;
justify-content: space-between;
background-color: red;
}
.item1-1-1 {
background-color: green;
}
.item1-2 {
display: flex;
justify-content: space-between;
background-color: green;
}
.item1-2-1 {
background-color: red;
}
.item2 {
display: flex;
justify-content: space-around;
width: 100%;
height: 70px;
}
.item3 {
display: flex;
flex-direction: column;
width：100%;
height: 110px;
background-color: greenyellow;
}
.item3-2 {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.item4 {
display: flex;
flex-direction: column;
width：100%;
height: 178px;
}
.item4-1 {
display: flex;
justify-content: space-between;
width: 100%;
height: 25%;
}
.item4-2 {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.item5 {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
height: 48px;
padding: 2px;
}
.item5-1 {
width: 12%;
height: 100%;
background: url(http://img0.imgtn.bdimg.com/it/u=1298334312,1058960928&fm=26&gp=0.jpg) no-repeat;
background-size: 100% 100%;
border-radius: 100%;
}