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

1、学习点

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

2、代码如下：

 lang="en">     charset="UTF-8">         rel="stylesheet" href="style.css" type="text/css">     class="container">         class="image">             href="#"> src="field1.jpg">             class="text">日落余晖                  class="image">             href="#"> src="field1.jpg">             class="text">日落余晖                  class="image">             href="#"> src="field1.jpg">             class="text">日落余晖                  class="image">             href="#"> src="field1.jpg">             class="text">日落余晖                  class="image">             href="#"> src="field1.jpg">             class="text">日落余晖                  class="image">             href="#"> src="field1.jpg">             class="text">日落余晖            

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;}

效果图：

在线预览地址：http://htmlpreview.github.io/?https://github.com/tangxiaolang101/imageView/blob/master/index.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！