首页 > web前端 > html教程 > 简单图片banner轮播_html/css_WEB-ITnose

简单图片banner轮播_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:36:06
原创
1086 人浏览过

/**************【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】*******************/

/*****************************/

效果:

  

 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板