2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

6.1 定位-相对和绝对和固定

6.2 相对和绝对和固定

6.3 堆叠顺序z-index

6.4 定位总结

6.5 CSS精灵 基本使用

6.6 案例 CSS精灵 京东服务

6.7 字体图标-下载和使用

6.8 字体图标-上传

6.9 垂直对齐方式vertical-align

6.10 过渡属性

6.11 修饰属性-透明度与光标类型

6.12 综合案例-淘宝轮播图

 html代码：

index.css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

.banner {
    position: relative;
    margin: 100px auto;
    width: 564px;
    height: 315px;
    /* background-color: pink; */
    /* 隐藏范围外的内容 */
    overflow: hidden; 
}

/* 图片 */
.banner img {
    width: 564px;
    border-radius: 12px;
    vertical-align: middle;
}

.banner ul {
    display: flex;
}

/* 箭头 */
.banner .prev,
.banner .next {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.3);

    text-decoration: none;
    color: #fff;
    line-height: 30px;
}

/* 鼠标滑到banner区域，箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {
    display: block;
}

.banner .prev {
    left: 0;
    border-radius: 0 15px 15px 0 ;
}

.banner .next {
    right: 0;
    border-radius: 15px 0 0 15px;
    text-align: center;
}

/* 圆点 */
.banner ol {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 13px;
    background-color: rgba(255, 255, 255, 0.3);

    display: flex;

    border-radius: 10px;
}

.banner ol li {
    margin: 3px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* 橙色小li */
.banner ol .active {
    background-color: coral;
}