/*去掉默认浏览器样式*/
* {
    margin: 0;
    padding: 0;
}
/*去掉li标签默认样式*/
li {
    list-style: none;
}
/*最外层盒子样式处理：
 1.设置与轮播图高宽一致
 2.设置纵向距顶部50px，水平居中
 3.设置自己为固定位置
 */
.outer {
    height: 470px;
    width: 590px;
    margin: 50px auto;
    position: relative;
}
/*轮播图片集合处理:
 1.将其设置为脱离文档流
 2.设置距顶部和左侧都为0
 */
.img li {
    position: absolute;
    top: 0;
    left: 0;
}
/*顺序按钮区域处理：
 1.设置脱离文档流
 2.通过设置text-align、width使其整体水平居中
 3.设置距离底部20px
 */
.num {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
}
    /*顺序按钮处理:
 1.将其设置为行级及块级兼容显示
 2.设置其宽高
 3.设置背景色及字体颜色
 4.设置字体水平居中
 5.通过设置line-height与height一致，使其字体纵向居中
 6.设置其样式为圆形
 7.增加按钮左右间距
 */
    .num li {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: darkgray;
        color: white;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        margin: 0 20px;
    }
/*左、右按钮相同部分处理:
 1.设置其脱离文档流
 2.设置其宽高
 3.设置背景色及字体颜色
 4.设置字体水平居中
 5.通过设置line-height与height一致，使其字体纵向居中
 6.通过设置top、margin-top使其整体纵向居中
 7.默认不显示
 */
.btn {
    position: absolute;
    width: 20px;
    height: 50px;
    background-color: darkgray;
    color: white;
    text-align: center;
    line-height: 50px;
    top: 50%;
    margin-top: -25px;
    display: none;
}
/*左侧按钮处理:
 设置左侧为0
 */
.left_btn {
    left: 0;
}
/*右侧按钮处理:
 设置右侧为0
 */
.right_btn {
    right: 0;
}
/*鼠标悬浮至轮播图区域时左、右按钮处理:
 1.设置左右按钮显示样式为行级块级兼容
 2.设置鼠标放置在左右按钮时样式为小手
 */
.outer:hover .btn {
    display: inline-block;
    cursor: pointer;
}
/*设置顺序按钮初始按钮样式:
 设置为红色（由于样式级别问题会导致设置无效，可通过两种方式解决：
 1.后面加上!important
 2.将css定位写详细，比如：.outer .num .current{……
 ）
 */
.current {
    background-color: lightgreen !important;
}