float布局例子——小米商品导航栏

今天我们用float布局来仿一下小米商城的这个页面

1. 首先一个大盒子设置好大小和背景图

   html:

   <div class="box">
   </div>

   css:

   .box{
               width: 1200px;
               height: 460px;
               margin: 0 auto;
               background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f17c5025e92a9ea796f958f90e36167e.jpg?w=2452&h=920);
               background-repeat: no-repeat;
               background-size: 100%;
           }

2.  接着在盒子里面涛2个小盒子撑满，然后在用float布局在同一行

    

   html:

   <div class="left"></div>
           <div class="right"></div>

    

   css：

   .left{
               width: 230px;
               height: 460px;
               background-color: rgba(0, 63, 255, 0.5);
               float: left;
           }
           .right{
               width: 970px;
               height: 460px;
               background-color: rgba(100, 255, 2, 0.5);
               float: right;
           }

   这里我为了方便大家看见盒子加了和透明色，然后初步效果就做好了。

然后左边的商品列表很简单，这次主要是说float就不说其他的了，我们下次再见~