SOURCE

<div class="border">
  <div class="border1"></div>
<div class="zhengti">
  <div class="item1">
  <div class="item1-1">
   <div class="item1-1-1" style=" float:left; width:40px;">
     <div align="center">
    <a href="#">
          <span class="glyphicon glyphicon-qrcode" style="font-size:25px; color:white;"></span>
     </a>
     </div>
     <p align="center" style="font-size:1px; color:white;">扫一扫</p>
   </div>
    <div class="item1-1-2" style="margin:4px;">
     <form>
       <input name="sousuo" type="text" style="width:300px;height:34px" placeholder="魅影2017">
     </form> 
    </div>
    <div class="item1-1-1" style=" float:right; width:40px;">
     <div align="center" style="margin:5px auto;">
    <a href="#">
          <span class="glyphicon glyphicon-camera" style="font-size:30px; color:white;"></span>
        </a>
     </div>
   </div>
  </div> 
  </div>
   <div class="item2" style="width:400px; height:130px;">
    <img src="http://img0.imgtn.bdimg.com/it/u=2493694987,2435311017&fm=26&gp=0.jpg" width="100%" height="100%">
   </div>
   <div class="item3" style="padding:0px;">
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-1"></div>
        <p align="center" style="color:black; font-size:1px;">天猫</p>
      </a>
    </div>
      <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-2"></div>
        <p align="center" style="color:black; font-size:1px;">聚划算</p>
      </a>
    </div>
      <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-3"></div>
        <p align="center" style="color:black; font-size:1px;">天猫国际</p>
      </a>
    </div>
      <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-4"></div>
        <p align="center" style="color:black; font-size:1px;">外卖</p>
      </a>
    </div>
      <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-5"></div>
        <p align="center" style="color:black; font-size:1px;">天猫超市</p>
      </a>
    </div>
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-6"></div>
        <p align="center" style="color:black; font-size:1px;">充值中心</p>
      </a>
    </div>
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-7"></div>
        <p align="center" style="color:black; font-size:1px;">飞猪旅行</p>
      </a>
    </div>
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-8"></div>
        <p align="center" style="color:black; font-size:1px;">领金币</p>
      </a>
    </div>
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-9"></div>
        <p align="center" style="color:black; font-size:1px;">拍卖</p>
      </a>
    </div>
     <div class="item3-1" style="width:20%; height:50%;">
      <a href="#">
        <div class="item3-2 item3-2-10 "></div>
        <p align="center" style="color:black; font-size:1px;">咸鱼</p>
      </a>
    </div>
     
        
   </div>
   <div class="item4">
   <div class="item4-1" style="width:15%;height:100%;">
     <img src="http://img4.imgtn.bdimg.com/it/u=347545222,3204369768&fm=26&gp=0.jpg" width="100%" height="100%">
     </div>
     <div class="item4-2" style="width:85%;height:100%;">
     <div class="item4-2-1"  style="width:100%;height:50%;">
       <div style="margin:9px auto;"><span class="item4-2-1-1" style="color:red;">热评</span>&nbsp;&nbsp; 韦德中国行|韦德之道6代官方发布！</div>  
    </div>
    <div class="item4-2-2"  style="width:100%;height:50%;">
      <div><span class="item4-2-1-1" style="color:red;">热评</span>&nbsp;&nbsp; 托尼帕克五代战靴即将发售！</div>  
    </div>
   </div>
     </div>
   <div class="item5">
   <div class="item5-1" style="width:50%;height:50%;">
     <div class="item5-1-1" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;">
      <p><span class="glyphicon glyphicon-time" style="color:#C00000; font-size:20px;">淘抢购<br /><span style="color:gray; font-size:15px;">倒计时</span></span></p>
    </div>
    <div style="width:100%; height:65%;">
    <img src="http://img3.imgtn.bdimg.com/it/u=745738870,2891450303&fm=26&gp=0.jpg" width="100%" height="100%"> 
    </div>
       
     </div>
     <div class="item5-1-2" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;" >
        
      </div>
      <div style="width:100%; height:65%;">
         <img src="http://img3.imgtn.bdimg.com/it/u=813403649,187285402&fm=26&gp=0.jpg" width="100%" height="100%"> 
      </div>
     </div>
   </div>
     <div class="item5-2" style="width:50%;height:50%">
        <div class="item5-2-1" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;">
      <p><span class="glyphicon glyphicon-thumbs-up" style="color:#00CCCC; font-size:20px;">有好货<br /><span style="color:gray; font-size:15px;">高颜值美物</span></span></p>
    </div>
    <div style="width:100%; height:65%;">
    <img src="http://img2.imgtn.bdimg.com/it/u=980430292,3724684160&fm=26&gp=0.jpg" width="100%" height="100%"> 
    </div>
       
     </div>
     <div class="item5-1-2" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;" >
        
      </div>
      <div style="width:100%; height:65%;">
         <img src="http://img1.imgtn.bdimg.com/it/u=1884424250,482863751&fm=26&gp=0.jpg" width="100%" height="100%"> 
      </div>
     </div>

     </div>
     <div class="item5-3" style="width:50%;height:50%">
        <div class="item5-1-1" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;">
      <p><span class="glyphicon glyphicon-repeat" style="color:#0066FF; font-size:20px;">男神范<br /><span style="color:gray; font-size:15px;">直男研究所</span></span></p>
    </div>
    <div style="width:100%; height:65%;">
    <img src="http://img5.imgtn.bdimg.com/it/u=776617146,4218287649&fm=26&gp=0.jpg" width="100%" height="100%"> 
    </div>
       
     </div>
     <div class="item5-1-2" style="width:50%;height:100%;">
      <div style="width:100%; height:100%;">
         <img src="http://img2.imgtn.bdimg.com/it/u=3143736102,1243677444&fm=26&gp=0.jpg" width="100%" height="100%"> 
      </div>
     </div>
 
     </div>
     <div class="item5-4" style="width:50%;height:50%">
        <div class="item5-1-1" style="width:50%;height:100%;">
      <div style="width:100%; height:35%;">
      <p><span class="	glyphicon glyphicon-list-alt" style="color:#F80000; font-size:20px;">必买清单<br /><span style="color:gray; font-size:15px;">整理好帮手</span></span></p>
    </div>
    <div style="width:100%; height:65%;">
    <img src="http://img2.imgtn.bdimg.com/it/u=672094211,2832927243&fm=26&gp=0.jpg" width="100%" height="100%"> 
    </div>
       
     </div>
     <div class="item5-1-2" style="width:50%;height:100%;">
     
      <div style="width:100%; height:100%;">
         <img src="http://img0.imgtn.bdimg.com/it/u=524894859,979188363&fm=26&gp=0.jpg" width="100%" height="100%"> 
      </div>
     </div>  
     </div>
   </div>
   <div class="item6">
    <div class="item6-1"> </div>
     <div class="item6-2" style=" float:left; width:48px;">
     <div align="center">
    <a href="#">
          <span class="glyphicon glyphicon-th" style="font-size:25px; color:#A0A0A0;"></span>
     </a>
     </div>
     <p align="center" style="font-size:1px; color:black;">微淘</p>
   </div>
     <div class="item6-2" style=" float:left; width:48px;">
     <div align="center">
    <a href="#">
          <span class="glyphicon glyphicon-comment" style="font-size:25px; color:#A0A0A0;"></span>
     </a>
     </div>
     <p align="center" style="font-size:1px; color:black;">消息</p>
   </div>
     <div class="item6-2" style=" float:left; width:48px;">
     <div align="center">
    <a href="#">
          <span class="glyphicon glyphicon-shopping-cart" style="font-size:25px; color:#A0A0A0;"></span>
     </a>
     </div>
     <p align="center" style="font-size:1px; color:black;">购物车</p>
   </div>
     <div class="item6-2" style=" float:left; width:48px;">
     <div align="center">
    <a href="#">
          <span class="glyphicon glyphicon-user" style="font-size:25px; color:#A0A0A0;"></span>
     </a>
     </div>
     <p align="center" style="font-size:1px; color:black;">我的淘宝</p>
   </div>
     
   </div>
</div>
  <div class="border2"></div>
  </div>

.border{
  width:430px;
  height:790px;
  border:solid 2px;
  border-radius:40px;
  margin:auto; 
}
.border1{
  width:150px;
  height:4px;
  border:solid 2px;
  border-radius:3px;
  margin:15px auto ;
}
.border2{
  width:50px;
  height:50px;
  border:solid 2px;
  border-radius:100%;
  margin: 10px auto ;
}
.zhengti{
  width:404px;
  display:flex;
  flex-direction:column;  
  margin: 30px auto 0px auto ;
  border:solid 2px;
}
.item1{
  background-color:#FF3300;
  width:400px;
  height:48px;
}
.item1-1{
  display:flex;
  flex-direction:row;
  margin: 3px auto;
  width:390px;
  height:42px;
}
.item3{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:400px;
  height:130px;
}
.item3-2{
  width:69%;
  height:78%;
  background:black;
  border-radius:100%;
  margin:auto;
}
.item3-2-1{
  background:url(http://img5.imgtn.bdimg.com/it/u=2102224730,1310505597&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-2{
  background:url(http://img5.imgtn.bdimg.com/it/u=2381957266,2256044777&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-3{
  background:url(http://img5.imgtn.bdimg.com/it/u=2102224730,1310505597&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-4{
  background:url(http://img0.imgtn.bdimg.com/it/u=3935450321,31940017&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-5{
  background:url(http://img2.imgtn.bdimg.com/it/u=2524853847,1879501455&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-6{
  background:url(http://img0.imgtn.bdimg.com/it/u=2002936390,3844593762&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-7{
  background:url(http://img0.imgtn.bdimg.com/it/u=4159771293,1911169621&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-8{
  background:url(http://img4.imgtn.bdimg.com/it/u=1937603620,770258094&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-9{
  background:url(http://img2.imgtn.bdimg.com/it/u=3553377682,1228523996&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item3-2-10{
  background:url(http://img4.imgtn.bdimg.com/it/u=3538338680,114755990&fm=26&gp=0.jpg) no-repeat;
    background-size:100% 100%;
}
.item4{
  display:flex;
  flex-direction:row;

  width:400px;
  height:50px;  
}
.item4-2{
  display:flex;
  flex-direction:column;
}
.item4-2-1-1{
  border:solid 1px red;
  border-radius:5px;
}
.item5{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:400px;
  height:260px;
}
.item5-1{
  display:flex;
  flex-direction:row;
}
.item5-2{
  display:flex;
  flex-direction:row;
}
.item5-3{
  display:flex;
  flex-direction:row;
}
.item5-4{
  display:flex;
  flex-direction:row;
}
.item6{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  width:400px;
  height:48px;
  padding:2px;
}
.item6-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%;  
}