练习一
- <横幅广告滑块>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.outter {
width: 590px;
height: 470px;
background-color: red;
margin: auto;
position: relative;
}
img {
width: 100%;
height: 100%;
}
.w-resize {
height: 35px;
line-height: 30px;
width: 25px;
background-color: rgba(0,0,0,.15);
color: white;
text-align: center;
border-radius: 0 25px 25px 0;
font-size: 20px;
font-weight: 900;
position: absolute;
top: 50%;
left: 0;
margin-top: -10px;
cursor: pointer;
}
.e-resize {
height: 35px;
line-height: 30px;
width: 25px;
background-color: rgba(0,0,0,.15);
color: white;
text-align: center;
border-radius: 25px 0 0 25px;
font-size: 20px;
font-weight: 900;
position: absolute;
right: 0;
top: 50%;
margin-top: -10px;
cursor: pointer;
}
.ub {
list-style-type: none;
display: block;
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.ub li {
background-color: rgba(0,0,0,0.1);
width: 10px;
height: 10px;
float: left;
border-radius: 5px;
margin: 0px 3px;
transition: all 0.3s;
}
.ub li:hover {
background-color: rgba(0,0,0,0.6);
transform: scale(1.3,1.3);
cursor: pointer;
}
.pad {
}
</style>
</head>
<body>
<div class="outter">
<div class="img"><img src="图片/banner_2.webp" alt=""></div>
<div class="w-resize"><</div>
<div class="e-resize">></div>
<div class="dian">
<ul class="ub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>