8月30日（完善移动端携程案例——纯css实现轮播图效果）

目录

一、布局

二、样式

        1）container大盒子

        2）轮播图

        3）底部小圆点

        4）动态效果

      （1）调整被点击label的样式，显示为已选择

      （2）进行轮播图的切换

三、注意事项

四、动态效果

五、轮播图样式的完整代码

---

一、布局

        在一个大容器里，放置ul-li（用来设置三张轮播图），放置三个label标签（用来设置底部的三个小圆点），以及放置三个input-radio单选框（和label标签配合使用）。

html代码：

<div class="container">

        <input type="radio" id="control-1" name="control" checked="checked" placeholder="1">
        <input type="radio" id="control-2" name="control" checked="checked" placeholder="2">
        <input type="radio" id="control-3" name="control" checked="checked" placeholder="3">
        
        <ul class="slides">
            <li class="slide">1</li>
            <li class="slide">2</li>
            <li class="slide">3</li>
        </ul>
        
        <div class="controls-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
        </div>

</div>

二、样式

        1）container大盒子：

                位置：设置为相对定位，子绝父相，其儿子controls-visible设置了绝对定位；

                大小：宽度设置为和父亲一样100%，高度给一个100px；

                外观：给一个上外边距44px，（44px正好是上一个模块的高度，因为上一个模块设置了固定定位不占位置）

        2）轮播图： 

                 ul大盒子(slides)：

                        位置：设置为相对定位，其儿子li设置了绝对定位；

                        大小：宽度和高度继承其父亲container的；

                        外观：取消小li 的项目符号、隐藏溢出ul盒子的部分（与小li 有关）

                 3个小li (sli