![](https://i-blog.csdnimg.cn/blog_migrate/82381fe0d5a078c7021dd7f7c0a1d5fc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aa73edc6a3602745cb7c1d7f69e35282.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d88a6e9bce239a0258dd8d2c339ed6ca.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c9b7e2d25b877065c8874e583b09523e.png)
6.1 定位-相对和绝对和固定
![](https://i-blog.csdnimg.cn/blog_migrate/bdc501dff4f0bdddb46b019124583999.png)
6.2 相对和绝对和固定
![](https://i-blog.csdnimg.cn/blog_migrate/b84a015c423a9432ef3ae0c25b22b6d9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8be0ec58e91eccb2b192f2d11a50db4f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a9129bb830a549f1e99a400708b796b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/77c8ed29024f547d79338601a04b95f5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/33e327fd6822cb2057c9daf8f1ca29b4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3700e715938b4d6db00c9df8c74c4204.png)
![](https://i-blog.csdnimg.cn/blog_migrate/91449db3e1ab9ae8483cfa2b68e774f8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ecbd06c0f3426d045204c3da1ba4193a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fdf372e5e047033d8b45d1fb8ea61fd5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff4be411042222d014302152134d933.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b721de62a24ee3906165aa7caaf0d178.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bd007f8329c62eea74c0738b4a2c411c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/731d9c3a05e1a5d3e05492f92c7f3acd.png)
6.3 堆叠顺序z-index
![](https://i-blog.csdnimg.cn/blog_migrate/708b7deed0322cbfc1478f30ed86d1bc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b7c7eacb24e1a20437e28de4831906e1.png)
6.4 定位总结
![](https://i-blog.csdnimg.cn/blog_migrate/3c4ed6710be1815acf4782f1bca70239.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f2225d515415fc4983eab4aa4d77bc51.png)
6.5 CSS精灵 基本使用
![](https://i-blog.csdnimg.cn/blog_migrate/43b5b3e18063d193a4c4b88574d3d9e4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5c77392c02b324082ed71eafae670f57.png)
6.6 案例 CSS精灵 京东服务
![](https://i-blog.csdnimg.cn/blog_migrate/33cb26341d17395b6795a0772c73d6dd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3944e18d3fa5fb134d32f5435b172401.png)
6.7 字体图标-下载和使用
![](https://i-blog.csdnimg.cn/blog_migrate/cdfff6d4806ffd47fce6f8ef8e5f77d6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b6814d22ba1e5aed78d1a8dbb9a8956a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1f0ad888cbe9d876d52bd4093b4dea80.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0ef0f7cb2592b73777d4b7bc419fffc3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/62377308a228a9c952708a86de64b388.png)
6.8 字体图标-上传
![](https://i-blog.csdnimg.cn/blog_migrate/bc9c72be65abdf2e10a7d10c8611808f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/da12d6274e607b475f98e243a0807560.png)
6.9 垂直对齐方式vertical-align
![](https://i-blog.csdnimg.cn/blog_migrate/54c0f4e7951058a14ed0bee800cf6c8d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e411696aae61554003ac3c644ae33b11.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4b459768518b0ee4d3f03574bc2919c8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bc73104add24efd1d7b285c6d702d868.png)
![](https://i-blog.csdnimg.cn/blog_migrate/952a036c85ecf339bb6cb7d1156d4af3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d296980bbfcd73d70c262c7713553932.png)
![](https://i-blog.csdnimg.cn/blog_migrate/01fa96173fc966e5c9d61964e6675cb4.png)
6.10 过渡属性
![](https://i-blog.csdnimg.cn/blog_migrate/4136b1843b6d0785f2763bd282f1d015.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2bb42b971cd2216c681410941903ddbb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9708955272e091405c4c92ae8e6948d1.png)
6.11 修饰属性-透明度与光标类型
![](https://i-blog.csdnimg.cn/blog_migrate/c13e85a87a5d863507e133a8b924e071.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2086a30aabe8f66dc6cd04442eea1e27.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f66eb607dea38651b1904dc6af50bf97.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ba5b25b0e6d378740b39298ae0fddabb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f6787463dd5b469966c43bed93150069.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1c8c83b932e6c129d8e86acdb92a1d26.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4a84d229afb8eb91e4c577bc8d510abe.png)
6.12 综合案例-淘宝轮播图
![](https://i-blog.csdnimg.cn/blog_migrate/97be87cdf5530dc8ea2207f0a1cb67b1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0b5af2a915dc4258be6d23e251e178b0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/189e7c1e1268d9a4973a51a05f9fbd38.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4fcb4f4be9392861eb2795f998945f61.png)
![](https://i-blog.csdnimg.cn/blog_migrate/996a6a0623ac53019d74e0a80a6eee47.png)
![](https://i-blog.csdnimg.cn/blog_migrate/06a9ee62346c648061b09e1d21e31d07.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ebf676e7eb72bb76c6b55b048acd035.png)
![](https://i-blog.csdnimg.cn/blog_migrate/505a6460b4036431abf10170cd8c6d57.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0c93bbdc21a60f28fa8f6fc36d88379d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c101ef593b78e842938234977be1dc1a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/83325465b711df2af80c8c9aeedc03f8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/676d1dbd865fb20e02ed46d6c1e40cf7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d1c9d100733508c496604fc4e08fd514.png)
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="banner">
<!-- 图 -->
<ul>
<li><img src="./img/banna01.png" alt="" srcset=""></li>
<li><img src="./img/banna02.png" alt="" srcset=""></li>
<li><img src="./img/banna03.png" alt="" srcset=""></li>
</ul>
<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev"><i class="iconfont icon-zuojiantou2"></i></a>
<!-- 下一张 next -->
<a href="#" class="next"><i class="iconfont icon-youjiantou1"></i></a>
<!-- 圆点 -->
<ol>
<li></li>
<li class="active"></li>
<li></li>
</ol>
</div>
</body>
</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;
}