7.6 动手实践
学习完前面的内容，下面动手实践一下吧。
请结合给出的素材，运用元素的浮动和定位实现图7-49所示的“焦点图”效果。
链接：https://pan.baidu.com/s/1H98ySBSkd8h3IRA19AV2mw?pwd=1024
提取码：1024
index.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>焦点图</title><link rel="stylesheet" type="text/css" href="style.css">
</head><body><div><img src="images/banner1.jpg" alt="美食" /><ul><li></li><li class="one"></li><li></li><li></li></ul><span class="left"></span><span class="right"></span></div>
</body></html>
css
@charset "utf-8";/* CSS Document */
* {margin: 0;padding: 0;list-style: none;
}div {width: 616px;height: 237px;margin: 20px auto;position: relative;
}ul {position: absolute;left: 269px;top: 212px;
}li {float: left;background: url(images/point1.png) no-repeat;width: 25px;height: 11px;
}.one {background: url(images/point2.png) no-repeat;
}span {display: inline-block;background: url(images/arrow1.png) no-repeat;width: 49px;height: 49px;position: absolute;left: 20px;top: 92px;
}.right {background: url(images/arrow2.png) no-repeat;position: absolute;left: 550px;top: 92px;
}
