css图片操作

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

最终的效果如下