CSS图片廊
根据元素的浮动，将图片所在div放在一行，设置悬浮样式hover
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片廊</title>![图片描述][1]
<style>
.box{
width:928px;
margin:0 auto;
border:1px solid #ccc;
overflow:hidden;
}
.tupian{
width:200px;
float:left;
border:1px solid #ccc;
margin:15px;
}
.tupian div img{
width:100%;
}
.tupian p{
text-align:center;
}
.tupian:hover{
border-color:#000;
}
.tupian:hover img{
opacity:0.7;
}
</style>
</head>
<body>
<div class="box">
<div class="tupian">
<div><img src="images/demo1.jpg"/></div>
<p>sfdsfds</p>
</div>
<div class="tupian">
<div><img src="images/demo2.jpg"/></div>
<p>sfdsfds</p>
</div>
<div class="tupian">
<div><img src="images/demo3.jpg"/></div>
<p>sfdsfds</p>
</div><div class="tupian">
<div><img src="images/demo4.jpg"/></div>
<p>sfdsfds</p>
</div>
</div>
</body>
</html>
运行结果如下图：
技术要点
- 悬浮的时候改变图片的透明度
- 悬浮后清除浮动影响
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。