作业图片列表09-12

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset='utf-8'/>
     <title>图片列表</title>
     <style type="text/css">
        .box{
            width: 960px;
            height: 250px;
            margin: 0 auto;
            border: 1px black solid;
            
        }
        .box1{
            width: 920px;
            height: 199px;
            margin: 0 auto;
            border-top: 1px black solid;

        }
    
        p{
            padding-left: 20px; 
            font: 18px 微软雅黑;
            color: #000;
        }

        .a{
            display: block;  
            float: left;
            padding: 20px 14.5px 25px 0;
        }
        .aa{
            display: block;  
            float: left;
            padding: 20px 14.5px 25px 14.5px;
        }
        .aaa{
            display: block;  
            float: left;
            padding: 20px 0 25px 14.5px;
        }
        .b{
            display: block;  
            float: left;
            padding: 0 14.5px 39px 0;
        }
        .bb{
            display: block;  
            float: left;
            padding: 0 14.5px 39px 14.5px;
        }
        .bbb{
            display: block;  
            float: left;
            padding: 0 0 39px 14.5px;
        }

     </style>

 </head>

 <body>
    <div class="box">
        <p>图片展示</p>
        <div class="box1">
         <img src="../../img/goods.jpg" class="a" />
         <img src="../../img/goods.jpg" class="aa" />
         <img src="../../img/goods.jpg" class="aa" />
         <img src="../../img/goods.jpg" class="aa" />
         <img src="../../img/goods.jpg" class="aaa" />
         <img src="../../img/goods.jpg" class="b" />
         <img src="../../img/goods.jpg" class="bb" />
         <img src="../../img/goods.jpg" class="bb"/>
         <img src="../../img/goods.jpg" class="bb"/>
         <img src="../../img/goods.jpg" class="bbb"/>
         </div>
    </div>
 </body>
 </html>
486.jpg