html+css3+cxSlide电商网站宫格幻灯片

1、准备好要用上的各种图片。

2、新建html文档。

4、书写css样式。<style>*{margin:0;padding:0;list-styl髫潋啜缅e:none;border:0;}.slide_y{overflow:hidden;position:relative;margin:30px auto;width:780px;height:420px;border:1px solid #777;}.slide_y .box{overflow:hidden;position:relative;width:780px;height:420px;background:#000;}.slide_y .list{overflow:hidden;height:9999px}.slide_y .list li{overflow:hidden;position:relative;width:780px;height:420px;_vertical-align:top;}.slide_y .list img{_vertical-align:top;}.slide_y .list:hover img{filter:alpha(opacity=70);opacity:0.7;}.slide_y .list:hover img:hover{filter:alpha(opacity=100);opacity:1;}.slide_y .btn{overflow:hidden;position:absolute;bottom:0;left:0;width:100%;height:20px;padding:5px 0;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,0.6);}.slide_y .btn li{float:left;width:20px;height:20px;margin:0 0 0 10px;border-radius:2px;background:#eee;color:#333;font:14px/20px Tahoma;text-align:center;cursor:pointer;}.slide_y .btn .selected{background:#f30;color:#fff;}</style>

6、查看效果。