html里的代码比较简单不再完整贴过来,每个图片的单独布局代码如下
<div class="image">
<a href="#">
<img src="lake.jpg" alt="黄昏" width="200px" height="200px">
</a>
<div class="text">黄昏的师大操场</div>
</div>
css代码:
ocpaity属性代表图片的透明度
margin的第一个值代表上下外边距,第二个值代表左右外边距,在这里将左右外边距设置为自动
float属性是浮动的操作
a:hover属性代表鼠标放在链接区域的时刻,比如这里我们让鼠标放在每个图片的时候背景颜色改变,这样交互性较好
body{
margin: 10px auto;
width: 70% ;
height: auto;
background-color: coral;
}
.image{
border: 1px solid saddlebrown;
width: auto;
height: auto;
float: left;
text-align: center;
margin: 5px;
}
img{
padding: 5px;
opacity: 1;
}
.text{
font-size: 12px;
margin-bottom: 5px;
}
a:hover{
background-color: black;
}
最终的效果如下