图片廊"/>
CSS图片廊
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>
运行结果如下图：
技术要点
- 悬浮的时候改变图片的透明度
- 悬浮后清除浮动影响
持续更新，欢迎大家指教！
更多推荐
CSS图片廊
发布评论