CSS简单图片墙布局（使用margin、float布局）

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51423067

本文介绍如何使用CSS3的margin和float属性创建图片墙布局，并实现鼠标悬停时图片放大效果。通过HTML和CSS代码示例展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、学习点

这个实例主要学习点就是使用margin、float属性对元素进行布局，实现简单的图片墙，当然还加入了一个鼠标划入，图片放大的效果。这个效果使用了css3的变化特性，还有就是注意加这个变化的css选择器的写法。

2、代码如下：

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>image</title>
  
  
  
  
   
       <link rel="stylesheet" href="style.css" type="text/css">
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <div class="container">
  
  
  
  
   
           <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
            <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
            <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
            <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
            <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
            <div class="image">
  
  
  
  
   
               <a href="#"><img src="field1.jpg"></a>
  
  
  
  
   
               <div class="text">日落余晖</div>
  
  
  
  
   
           </div>
  
  
  
  
   
       </div>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

style.css

 
 
  
  
   
   *{
  
  
  
  
   
       margin: 0px;
  
  
  
  
   
       padding: 0px;
  
  
  
  
   
   }
  
  
  
  
   
   .image{
  
  
  
  
   
       width: auto;
  
  
  
  
   
       height: auto;
  
  
  
  
   
       border: 1px solid gray;
  
  
  
  
   
       float: left;
  
  
  
  
   
       margin: 5px;
  
  
  
  
   
       text-align: center;
  
  
  
  
   
   }
  
  
  
  
   
   img{
  
  
  
  
   
       width: 200px;
  
  
  
  
   
       height: 200px;
  
  
  
  
   
       margin: 5px;
  
  
  
  
   
   }
  
  
  
  
   
   .text{
  
  
  
  
   
      font: 12px caption;
  
  
  
  
   
      margin-bottom: 5px;
  
  
  
  
   
   }
  
  
  
  
   
   .container{
  
  
  
  
   
       margin: 50px auto;
  
  
  
  
   
       width: 700px;
  
  
  
  
   
   }
  
  
  
  
   
   a:hover > img{
  
  
  
  
   
       transform: scale(1.5,1.5);
  
  
  
  
   
       -webkit-transition: .3s transform;
  
  
  
  
   
       -moz-transition: .3s transform;
  
  
  
  
   
       transition: .3s transform;
  
  
  
  
   
   }