直接贴代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图静态布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab li{
list-style: none;
}
.box{
width: 653px;
height: 350px;
border: 3px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box .tab{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -68px;
overflow: hidden;
background-color: aqua;
width: 130px;
border-radius: 20px;
}
.box .tab li{
width: 10px;
height: 10px;
margin: 5px 10px;
background: snow;
float: left;
border-radius: 50%;
cursor: pointer;
}
.box .tab li.active{
background-color: red;
}
.box .btn li{
position: absolute;
width: 30px;
height: 30px;
background: rgba(0,0,0,0.5);
font-size: 20px;
line-height: 30px;
text-align: center;
font-weight: bolder;
top: 50%;
margin-top: -15px;
display: none;
}
.box .btn .left{
left: -5px;
border-radius: 0 50% 50% 0;
}
.box .btn .right{
right: -5px;
border-radius: 50% 0 0 50%;
}
.box:hover .btn li{
display: block;
}
.box .btn li:hover{
background: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<img src="//img.alicdn.com/tfs/TB1N6Dqff9TBuNjy0FcXXbeiFXa-520-280.jpg_q90" width="653" height="350">
<ul class="tab">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
</body>
</html>