#大有学问##头条创作挑战赛#

上一篇文章学习了定位，这篇主要是记录定位的小案例应用。

淘宝焦点图布局：其实也就是常用的轮播图布局

网页布局介绍

首先需要在网页上显示一个大盒子，内容一般为图片。

其次在大盒子左右各有一个箭头，作用是控制图片的播放顺序。

最后在大盒子下方有小圆点的图片导航，作用是显示图片排列位置，也可以点击圆点来显示对应位置的图片。

今天主要实现定位网页布局，切换图片的功能先不做。

代码实现：

<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;
}

网页布局小总结

标准流：块级盒子从上到下按照顺序排列。

应用场景：网页布局的垂直块级大盒子。

浮动：可以让多个块级元素一行显示或者左右对齐盒子。

应用场景：导航栏、内容展示块等。

定位：可以让多个块级元素前后叠压来显示，元素自由在某个盒子内移动就使用定位布局。

应用场景：特别功能的小盒子，如左右控制箭头，返回顶部等。