Maison > interface Web > tutoriel HTML > 简单图片banner轮播_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:36:06
original
1086 Les gens l'ont consulté

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

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

效果:

  

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal