css3轮播图案例-编程知识

css3轮播图案例

轮播图案例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}.banner {margin: 100px auto;width: 554px;height: 315px;/* background-color: pink; */overflow: hidden;position:relative;     }.banner img {width: 564px;height: 315px;border-radius: 5%;vertical-align: middle;}.banner ul {display: flex;}.banner .zuo,.banner .you {/* 因为我们想让两边的标签只有鼠标悬停的时候才出现所以这里我们先将两个标签的显示属性设置为none*/display: none;position: absolute;width: 20px;height: 30px;top: 50%;transform: translateY();background-color: rgba(0,0,0,0.3);text-decoration: none;color: white;line-height: 30px;}.banner .zuo{left: 0;border-radius: 0 15px 15px 0;}.banner .you{right: 0;border-radius:15px 0 0 15 px;text-align: center;}.banner:hover .zuo, .banner:hover .you {/* 这边设置的是鼠标悬停时标签才会出现 */display: block;}.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255,255,255,0);display: flex;}.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;}.banner ol .active{background-color: #ff5000;}</style>
</head>
<body><div class="banner"><ul><li><a href="#"><img src="./images/2.jpg" alt=""></a></li><li><a href="#"><img src="./images/3.jpg" alt=""></a></li><li><a href="#"><img src="./images/1.jpg" alt=""></a></li></ul><!-- 注意这边可以去阿里图标库中寻找图标，然后导入这边使用简易版本 --><a href="#" class="zuo"><</a><a href="#" class="you">></a><ol><li class="active"></li><li></li><li></li></ol></div>
</body>
</html>