2-13代码老师帮忙看看

来源：2-14 编程练习

大萝卜cool

2017-07-12 22:36:27

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>2-13-1</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       .clear{clear: both;}
       .container{
           width: 100%;
           min-width: 1000px;
           margin: 0 auto;
       }
       .top{
           width: 100%;
           min-width: 1000px;
           background-color: #add8e6;
       }
       .top-left,.top-right{
           width: 50%;
           float: left;
           text-align: center;
           margin-top:20px;
           margin-bottom: 20px;
       }
       .bottom{
           width: 100%;
           min-width: 1000px;
           background-color: #ffb6c1;
       }
       .bottom-left,.bottom-middel,.bottom-right{
           width: 33.3%;
           float: left;
           text-align: center;
           margin-top:20px;
           margin-bottom: 20px;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="top">
           <div class="top-left">
               <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
           </div>
           <div class="top-right">
               <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
           </div>
           <div class="clear"></div>
       </div>
       <div class="bottom">
           <div class="bottom-left">
               <img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg">
           </div>
           <div class="bottom-middel">
               <img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
           </div>
           <div class="bottom-right">
               <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
           </div>
           <div class="clear"></div>
       </div>
   </div>
</body>
</html>

另外我觉得不用这么复杂啊，似乎这样也可行

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>2-13</title>
   <style type="text/css">
       .contarner{
           width: 100%;
           margin: 0 auto;
       }
       .line1{
           width: 100%;
           background-color: #add8e6;
           text-align: center;
       }
       .line1 img{
           margin: 20px 50px;
       }
       .line2{
           width: 100%;
           background-color: #ffb6c1;
           text-align: center;
       }
       .line2 img{
           margin: 40px 50px;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="line1">
           <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
           <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
       </div>
       <div class="line2">
           <img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg">
           <img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
           <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
       </div>
   </div>
</body>
</html>