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>