CSS定位综合案例——淘宝焦点图布局制作

1. 左右两个按钮：左箭头pre，右箭头next
2. 底部小圆点：promo-nav，用ul做

<div>
    <div class="tb-promo">
        <img src="images/tb.jpg">
        <!-- 左侧按钮 -->
        <a href="#" class="prev"> < </a>
        <!-- 右侧按钮 -->
        <a href="#" class="next"> > </a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
.tb-promo {
    position: relative;
    width: 20px;
    height: 30px;
    margin: 100px auto;
}
.tb-promo img {
    width: 20px;
    height: 30px;
}
/* 使用并集选择器声明相同样式 */
.prev,
.next {
    /* 子元素是绝对定位 */
    position: absolute;
    /* 绝对定位不用直接用margin：auto设置垂直居中 */
    /* 以下为绝对定位设置垂直居中方法 */
    /* left: 0; */
    top: 50%;
    margin-top: -15px;
    /* a标签原本为行内元素不可以直接设置长和宽，但加了绝对定位后可设置 */
    width: 20px;
    height: 30px;
    background: rgba(0,0,0,.3);
    text-align: center;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
}
.pre {
    left: 0;
    border-top-right-radius: 15px;
    boder-bottom-right-radius: 15px;
}
.next {
/* 如果一个盒子既有left属性，也有right属性，则默认会执行left属性 */
    right: 0;
    border-top-left-radius: 15px;
    boder-bottom-left-radius: 15px;
}
.promo-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -35px;
    width: 70px;
    height: 13px;
    background: (255,255,255,.3)
    border-radius: 7px;
}
.promo-nav li {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}