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>