上一篇文章学习了定位，这篇主要是记录定位的小案例应用。
淘宝焦点图布局：其实也就是常用的轮播图布局
网页布局介绍
首先需要在网页上显示一个大盒子，内容一般为图片。
其次在大盒子左右各有一个箭头，作用是控制图片的播放顺序。
最后在大盒子下方有小圆点的图片导航，作用是显示图片排列位置，也可以点击圆点来显示对应位置的图片。
今天主要实现定位网页布局，切换图片的功能先不做。
代码实现：
<div class="bigBox"> <!-- 广告图片 --> <img src="../images/tb1.jpg" alt="" class="fl"> <!-- 左箭头 --> <a href="#" class="aStyle aPl"><</a> <!-- 左箭头 --> <a href="#" class="aStyle aPr">></a> <!-- 小圆点图片导航 --> <ul> <li><a href="#" class="aCircle selected"></a></li> <li><a href="#" class="aCircle"></a></li> <li><a href="#" class="aCircle"></a></li> <li><a href="#" class="aCircle"></a></li> <li><a href="#" class="aCircle"></a></li> </ul> </div><style>* { margin: 0; padding: 0;}.bigBox { width: 520px; height: 280px; margin: 100px auto; position: relative;}img { width: 520px; height: 280px;}a { text-decoration: none; color: white;}.aStyle { position: absolute; top: 50%; width: 20px; height: 30px; background: rgba(0, 0, 0, 0.7); text-align: center; line-height: 30px;}.aPl { left: 0; border-radius: 0 15px 15px 0;}.aPr { right: 0; border-radius: 15px 0 0 15px;}ul { position: absolute; bottom: 15px; left: 50%; width: 70px; height: 13px; margin-left: -35px; background: rgba(255, 255, 255, 0.3); border-radius: 7px;}li { float: left; list-style: none;}.aCircle { display: block; width: 8px; height: 8px; background-color: white; border-radius: 50%; margin: 3px;}.selected { background-color: #ff5000;}网页布局小总结
标准流：块级盒子从上到下按照顺序排列。
应用场景：网页布局的垂直块级大盒子。
浮动：可以让多个块级元素一行显示或者左右对齐盒子。
应用场景：导航栏、内容展示块等。
定位：可以让多个块级元素前后叠压来显示，元素自由在某个盒子内移动就使用定位布局。
应用场景：特别功能的小盒子，如左右控制箭头，返回顶部等。
