css布局小练习，学会它在室友面前小秀一下吧！

前言

很多同学在大学学习HTML+CSS这门课程的时候，并没有过多的重视，这就导致有许多同学在学完以后还只会使用最基本的表格布局方式对页面进行布局，这样做很明显是不能达到我们课程标准的要求的，所以让我们根据一个简单的淘宝小案例来一起学学另外使用更多也更方便的浮动布局的方式吧！注意，在开始之前，你需要提前了解什么是浮动布局。先查查资料，然后再着手练习这个小案例吧！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、最终效果

二、具体代码

下面展示一些 HTML代码片。

// An highlighted block
<div class="father">
        
        <span>| 热 卖 单 品</span>
        <div style="clear: both;"></div>
       <ul class="dao">
           <li>客厅灯</li>
           <li>床垫</li>
           <li>电脑椅</li>
           <li>窗帘</li>
           <li>男内裤</li>
           <li>鞋柜</li>
           <li>沙发</li>
           <li>收纳箱</li>
           <li>茶几</li>
           <li>抱枕</li>
           <li>椅子</li>
           <li>电脑桌</li>
           <li>拉杆箱</li>
           <li>浴室柜</li>
           <li>运动鞋</li>
           <li>电风扇</li>
           <li>衣柜</li>
           <li>面膜</li>
           <li>风扇</li>
           <li>充电宝</li>
           <li>男T恤</li>
           <li>耳机</li>
           <li>拖鞋</li>
           <li>零食</li>
           <li>男鞋</li>
       </ul>
       <div style="clear: both;"></div>
       <ul class="tu">
           <li class="son1">
               <img src="./img/第一大图.webp" alt="xiaoxion">
               <div class="js">泰迪熊正品 毛衣熊公仔 新品 女生生日礼物</div>
               <div class="pj">评价 255 收藏 684</div>
               <div class="jg1">￥</div>
               <div class="jg2">96</div>
              
               <div class="yuanjia">￥472</div>
              
               <div class="xiaoliang " id="teshu">月销62笔</div>
           </li>
           <li class="son2">
            <img src="./img/第二大图.webp" alt="xiaoxion">
               <div class="js">幼儿园数字字帖描红本 儿童凹槽写字本练字</div>
               <div class="pj">评价 0 收藏 26134</div>
               <div class="jg1">￥</div>
               <div class="jg2">13.8</div>
              
               <div class="yuanjia">￥68</div>
              
               <div class="xiaoliang">月销62笔</div>
           </li>
           <li class="son3">
            <img src="./img/第三大图.webp" alt="xiaoxion">
               <div class="js">磁性画板灰色家用写字黑板墙涂鸦板多功能</div>
               <div class="pj">评价 0 收藏 3320</div>
               <div class="jg1">￥</div>
               <div class="jg2">39</div>
              
               <div class="yuanjia">￥472</div>
              
               <div class="xiaoliang">月销398笔</div>
           </li>
           <li class="son4">
            <img src="./img/第四大图.webp" alt="xiaoxion">
               <div class="js">逻辑思维训练机益智玩具创造力小学生早教机</div>
               <div class="pj">评价 0 收藏 80</div>
               <div class="jg1">￥</div>
               <div class="jg2">1499</div>
              
               <div class="yuanjia">￥2598</div>
              
               <div class="xiaoliang">月销14笔</div>
           </li>
           <li class="son5">
            <img src="./img/第五大图.webp" alt="xiaoxion">
               <div class="js">儿童三轮拉杆书包小学生男孩6-12周岁</div>
               <div class="pj">评价 2143 收藏 29856</div>
               <div class="jg1">￥</div>
               <div class="jg2">138</div>
              
               <div class="yuanjia">￥629</div>
              
               <div class="xiaoliang">月销710笔</div>
           </li>
       </ul>
    </div>

下面展示一些 css代码片。

// An highlighted block
 *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            widows: 1000px; 
            /* border: 1px solid red; */
        }
        .father span{
            float: left;
            width: 96px;
            height: 25px;
            /* border: 1px solid green; */
            font-size: 17px;
            font-weight: 900;
            color: orange;
            
        }
        .dao{
            width: 100%;
            height: 20px;
            /* border: 1px solid yellow; */
            margin: auto;
            margin-top: 20px;
            margin-left: 23px;
        }
        .dao li{
            width: 54px;
            height: 17px;
            /* border: 1px solid blueviolet; */
            float: left;
            list-style: none;
            margin-left: 0px;
            font-size: 10px;
            color: grey;
        }
        .tu{
            height: 400px;
            /* border: 5px solid purple; */
        }
        .tu li{
            float: left;
            list-style: none;
            width: 250px;
            /* border: 1px solid darkblue; */
            margin-left: 15px;
            margin-top: 21px;
        }
        .tu li img{
            margin-left: 30px;
        }
       
        .pj{
            font-size: 5px;
            color: grey;
            margin-top: 10px;
        }
        .jg1{
            
            font-size: 5px;
            color: orange;
            float: left;
            margin-top: 16px;
        }
        .jg2{

            font-size: 28px;
            color: orange;
            float: left;
            
        }
        .yuanjia{
            float: left;
            text-decoration: line-through;
            color: grey;
            font-size: 5px;
            margin-top: 15px;
        }
        .xiaoliang{
            float: left;
            font-size: 15px;
            color: grey;
            margin-left: 105px;
            margin-top: -18px;
        }
        #teshu{
            margin-top: 15px;
        }

总结

例如：浮动布局消除了框架对于整个页面布局的影响，即脱离文档流，当我们需要将页面上的元素横排排放的时候首先考虑的布局方式就应该是浮动布局。