HTML实例-01-轮播图

 

 body部分

<div class="outer">
　　<ul class="img-list">
　　　　<li><a href="#"><img src="img/1.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/2.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/3.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/4.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/5.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/6.jpg" alt="">a>li>
　　　　<li><a href="#"><img src="img/7.png" alt="">a>li>
　　　　<li><a href="#"><img src="img/8.jpg" alt="">a>li>
　　ul>

　　<div class="pointer">
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　　　<a href="#">a>
　　div>
div>

样式

 <style>

 

/*去除默认格式*/

 

    *{margin: 0;
      padding: 0;}
 ul{list-style: none;}
 .outer{
　　　　width:830px;
 height: 482px;
 margin: 50px auto;

/*设置为相对定位，不会脱离文档流*/
 position: relative；}

/*设置为绝对定位*/
 .img-list li{position: absolute；}

/*设置○*/
 .pointer a{
 width: 16px;
 height: 16px;
 background-color: rgba(255, 255 ,255, 0.5);
 float: left;

/*利用float:left；设置○位置，可以调节距离*/
 /*display: inline-block;*/
 /*变成圆形*/
 border-radius: 50%;
 margin:0 5px;
 }
 .pointer a:hover{
 background-color: #bd6e07;
 }
 .pointer{
 /*开启绝对定位*/
 position: absolute ;
 top:332px;
 width: 208px;

/*将○设置到居中位置*/
 margin: 0 auto;
 left: 0;
 right: 0； }
style>