console
<div class="body">
<div class="border">
<div class="zhengti">
<div class="item1" style="color:white;">
<div class="item1-1">
<div style="width:120px">
<div>
15937369195
</div>
</div>
<div style="width:120px">
<div class="item1-4">
</div>
</div>
<div style="width:120px">
<div style="float:right">
<a href="#">
<span class="glyphicon glyphicon-search" style="color:white;font-size:20px;">
</span>
</a>
<a href="#">
<span class="glyphicon glyphicon-qrcode" style="color:white;font-size:20px;">
</span>
</a>
河南
</div>
</div>
</div>
<div class="item1-2">
<div style="width:110px;">
<div style="float:left;">
<div class="shengyu">
<p style="font-size:1px">
剩余话费
</p>
</div>
<div class="shengyu">
<p style="font-size:1px">
<span style="font-size:25px">
50
</span>
元
</p>
</div>
</div>
</div>
<div style="width:110px;">
<div align="center">
<div class="shengyu">
<p style="font-size:1px">
剩余流量
</p>
</div>
<div class="shengyu">
<p style="font-size:1px">
<span style="font-size:25px">
130
</span>
mb
</p>
</div>
</div>
</div>
<div style="width:110px;">
<div style="float:right;">
<div class="shengyu">
<p style="font-size:1px">
剩余语音
</p>
</div>
<div class="shengyu">
<p style="font-size:1px">
<span style="font-size:25px">
0
</span>
分钟
</p>
</div>
</div>
</div>
</div>
<div class="item1-3">
<div style="width:110px;">
<div style="float:left;">
<p style="font-size：1px;color:#A8A8A8">
截至07/21
</p>
</div>
</div>
<div style="width:110px;">
<div style="text-align:center;">
<a href="#">
<span class="glyphicon glyphicon-eject" style="color:#66CCFF;">
</span>
</a>
</div>
</div>
<div style="width:110px;">
<div style="float:right;">
<a href="#">
<span class="glyphicon glyphicon-cog" style="color:#66CCFF;">
</span>
</a>
</div>
</div>
</div>
</div>
<div class="item2">
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-1">
</div>
<p align="center" style="color:black;">
老用户
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-2">
</div>
<p align="center" style="color:black;">
特权专区
</p>
</a>
</div>
<div class="item2-1 " style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-3">
</div>
<p align="center" style="color:black;">
国际漫游
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-4">
</div>
<p align="center" style="color:black;">
客户服务
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-5">
</div>
<p align="center" style="color:black;">
流量包
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-6">
</div>
<p align="center" style="color:black;">
金融服务
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-7">
</div>
<p align="center" style="color:black;">
通话详单
</p>
</a>
</div>
<div class="item2-1" style="width:90px;height:90px;">
<a href="#">
<div class="item2-2 item2-2-8">
</div>
<p align="center" style="color:black;">
余额查询
</p>
</a>
</div>
</div>
<div class="item3">
<img src="http://img1.imgtn.bdimg.com/it/u=2785811096,518316503&fm=26&gp=0.jpg"
width="360px" height="100px">
</div>
<div style="background-color:white;">
<p align="center" style="color:orange;">
流量专区
</p>
</div>
<div class="item4">
<div class="item4-1" style="width:180px;height:90px;">
<a href="#">
<div class="item4-2 item4-2-1">
</div>
</a>
</div>
<div class="item4-1" style="width:180px;height:90px;">
<a href="#">
<div class="item4-2 item4-2-2">
</div>
</a>
</div>
<div class="item4-1" style="width:180px;height:90px;">
<a href="#">
<div class="item4-2 item4-2-3">
</div>
</a>
</div>
<div class="item4-1" style="width:180px;height:90px;">
<a href="#">
<div class="item4-2 item4-2-4">
</div>
</a>
</div>
</div>
<div class="item5">
<div class="item5-1">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-home" style="color:orange; font-size:25px;">
</span>
<p style="color:orange; font-size:8px;">
首页
</p>
</a>
</div>
</div>
<div class="item5-1">
<div align="center">
<a href="#">
<span class=" glyphicon glyphicon-th-large" style="color:#B0B0B0; font-size:25px;">
</span>
<p style="color:black; font-size:8px;">
服务
</p>
</a>
</div>
</div>
<div class="item5-1">
<div align="center">
<a href="#">
<span class=" glyphicon glyphicon-gift" style="color:#B0B0B0; font-size:25px;">
</span>
<p style="color:black; font-size:8px;">
商城
</p>
</a>
</div>
</div>
<div class="item5-1">
<div align="center">
<a href="#">
<span class="glyphicon glyphicon-dashboard" style="color:#B0B0B0; font-size:25px;">
</span>
<p style="color:black; font-size:8px;">
发现
</p>
</a>
</div>
</div>
<div class="item5-1">
<div align="center">
<a href="#">
<span class=" glyphicon glyphicon-user" style="color:#B0B0B0; font-size:25px;">
</span>
<p style="color:black; font-size:8px;">
我的
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
.body {
background-color: black；
}
.border {
width: 380px;
height: 820px;
border: solid 2px;
border-radius: 20px;
margin: auto;
}
.zhengti {
display: flex;
flex-direction: column;
width: 364px;
height: 730px;
margin: 50px auto;
border: solid 2px;
}
.item1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
background-color: #336699;
}
.item1-1 {
display: flex;
flex-direction: row;
justify-content: center;
flex: auto;
padding: 15px 0px 15px 0px;
}
.item1-2 {
display: flex;
flex-direction: row;
justify-content: center;
padding: 10px 15px 10px 15px;
}
.shengyu {
text-align: center;
}
.item1-3 {
display: flex;
flex-direction: row;
justify-content: center;
padding: 10px 15px 0px 10px;
}
.item1-4 {
width: 20px;
height: 20px;
background: url(http://img5.imgtn.bdimg.com/it/u=629016206,3029637369&fm=26&gp=0.jpg) no-repeat;
background-size: 100% 100%;
border-radius: 100%;
margin: auto;
}
.item2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
}
.item2-2 {
width: 60px;
height: 60px;
background: black;
background-size: 100% 100%;
border-radius: 100%;
margin: auto;
}
.item2-2-1 {
background: url(http://a4.qpic.cn/psb?/V148Dm2O3RSoBW/Ayk5pNGTsKVuGaowRq0m*EbWRkjcy4uTT9g1AJqewys!/m/dPcAAAAAAAAAnull&bo=TABLAAAAAAADByU!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-2 {
background: url(http://a4.qpic.cn/psb?/V148Dm2O3RSoBW/cbvu3MColr6pH7EfeRf6doBO05u60GTIZt5SE..yY.A!/m/dBcBAAAAAAAAnull&bo=YQBUAAAAAAADBxc!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-3 {
background: url(http://a3.qpic.cn/psb?/V148Dm2O3RSoBW/GAWMWaLoZbD.qdDsGA*N7NFQmNiBuxtzZxpHfJKII6U!/m/dB4BAAAAAAAAnull&bo=UgBwAAAAAAADBwA!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-4 {
background: url(http://a4.qpic.cn/psb?/V148Dm2O3RSoBW/LiizAP3UzO2oVWwUjwsN.R0MRhxJp9V4SC0WzlycTro!/m/dPcAAAAAAAAAnull&bo=UABYAAAAAAADByo!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-5 {
background: url(http://a4.qpic.cn/psb?/V148Dm2O3RSoBW/XODgYksTo*QzmAztWzfS9wQ9dbFyWJD0RxrBwnRNcnc!/m/dPcAAAAAAAAAnull&bo=YwBSAAAAAAADBxM!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-6 {
background: url(http://a2.qpic.cn/psb?/V148Dm2O3RSoBW/6ZgyR3lCK4cVLUuCruFuafQ2UPiZeQmjT64SEZD85Us!/m/dHUAAAAAAAAAnull&bo=YgBOAAAAAAADBw4!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-7 {
background: url(http://a2.qpic.cn/psb?/V148Dm2O3RSoBW/Ocsevj9IFoAe4NTREvBdlscjsvgEARCjS*eughLDi20!/m/dAEBAAAAAAAAnull&bo=XQBtAAAAAAADBxI!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item2-2-8 {
background: url(http://a4.qpic.cn/psb?/V148Dm2O3RSoBW/XODgYksTo*QzmAztWzfS9wQ9dbFyWJD0RxrBwnRNcnc!/m/dPcAAAAAAAAAnull&bo=YwBSAAAAAAADBxM!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item3 {
background-color：yellow;
width: 360px;
height: 100px;
padding: 0px;
}
.item4 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
padding: 0px;
;
}
.item4-2 {
width: 160px;
height: 70px;
background: black;
background-size: 100% 100%;
border-radius: 7%;
margin: auto;
}
.item4-2-1 {
background: url(http://a2.qpic.cn/psb?/V148Dm2O3RSoBW/GdkhjQfPazTBGjJ7dQ*HF5XqHhawhhaD2w7.bLjJ7LU!/m/dHUAAAAAAAAAnull&bo=9QHhAAAAAAADBzc!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item4-2-2 {
background: url(http://a2.qpic.cn/psb?/V148Dm2O3RSoBW/mOsgXLnVZpU7cw8tIjWPmeEifjR5BXLKxbuvokuiKY0!/m/dHUAAAAAAAAAnull&bo=.wHhAAAAAAADBzk!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item4-2-3 {
background: url(http://a2.qpic.cn/psb?/V148Dm2O3RSoBW/*YULRik9wcHBkB*KB6xepV8XqZ0mV6h15X2tJ6*FeMA!/m/dBkBAAAAAAAAnull&bo=.AHoAAAAAAARByE!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item4-2-4 {
background: url(http://a3.qpic.cn/psb?/V148Dm2O3RSoBW/BjbSfaKpVUfsys.R7hnawufVMkQ0eHrsJIlfB5jlIG4!/m/dB4BAAAAAAAAnull&bo=.wHpAAAAAAARByM!&rf=photolist&t=5) no-repeat;
background-size: 100% 100%;
}
.item5 {
display: flex;
flex-direction: row;
justify-content: center;
background-color: white;
margin: 0px 0px 0px 0px;
}
.item5-1 {
width: 72px;
height: 36px;
}