Home >Web Front-end >HTML Tutorial >简单图片banner轮播_html/css_WEB-ITnose
简单图片banner轮播_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:061088browse
/**************【css】****************/
.banner{width:100%;height:300px;background:rgb(63,12,9);position:relative;}
.cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}
.cont ul li{list-style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}
.cont .prev{width:50px;height:55px;position:absolute;top:100px; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}
.cont .next{width:50px;height:55px;position:absolute;top:100px; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}
.motbig{width:175px;height:17px;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}
.motbig ul li{list-style-type:none;width:12px;height:12px;border:1px #ffffff solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}
.motbig ul li.hover{background:#fff;}
/*****************************/
/************【布局】*************/
/*******************************************/
/************【js】*******************/
/*****************************/
效果：