<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>焦点图</title>
<style>
/* 清空默认边距 */
*{
margin:0;
padding:0;
}
div{
width: 520px;
height: 280px;
border: 2px solid #404040;
margin: 100px auto;
position:relative;
}
/* 左右指引箭头 */
span{
width:25px;
background-color: rgba(15, 15, 15, 0.5);
font-size:30px;
color:white;
text-align:center;
line-height:45px; /* 用行高撑起盒子的高度 */
}
div .left-arrow{
position:absolute;
top:117px;
left:0;
}
div .right-arrow{
position:absolute;
top:117px;
right:0;
}
/* 左右指引箭头结束 */
/* 底部导航栏*/
div ol{
list-style:none;
width:100px;
height:20px;
background-color:rgba(255, 255, 255 ,0.5);
position:absolute;
left:210px;
bottom:0;
}
ol li{
float:left;
width:20px;
text-align:center;
line-height:20px;
border:1px solid #cdcdcd;
box-sizing:border-box;
}
/* 底部导航栏结束 */
</style>
</head>
<body>
<div>
<img src="images/ad.jpg" />
<span class="left-arrow"><</span>
<span class="right-arrow">></span>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
效果图：
怎么做HTML焦点图+实例练习效果图： 
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)