使用定位制作轮播图样式

2020-04-24 81 0

代码

<!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>
.container{
width:500px;
height:300px;
margin:0 auto;
border:1px solid #000;
overflow: hidden;
position:relative;
}
.container .imgs{
width:1500px;
height:300px;
}
.container .imgs a img{
width:500px;
height:300px;
float:left;
}
.container .left,
.container .right{
width:50px;
height:50px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
text-align: center;
line-height: 50px;
font-size: 40px;
font-weight: bold;
cursor: pointer;
color:#ccc;
position:absolute;
top:125px;
}
.container .left{
left:20px;
}
.container .right{
right:20px;
}
.container .left:hover,
.container .right:hover{
color:#000;
}
.container .shade{
width:100%;
height:50px;
position: absolute;
left:0;
bottom:0;
background-color: rgba(0,0,0,.5);
}
.container .shade .title{
float:left;
height:50px;
line-height: 50px;
text-align: center;
color:#fff;
font-size:30px;
font-weight: bold;
margin:0 10px;
cursor: pointer;
}
.container .shade .circle{
margin-right:20px;
}
.container .shade .circle ul>li{
width:15px;
height:15px;
background-color:#fff;
border-radius: 50%;
float:right;
margin: 20px 5px;
cursor: pointer;
}
.container .shade .circle ul>li:hover{
background-color:lightblue;
}
</style>
</head>
<body>
<div class="container">
<!-- 3张图片 -->
<div class="imgs">
<a href="">
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt="">
</a>
<a href="">
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt="">
</a>
<a href="">
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3236871529,935574866&fm=26&gp=0.jpg" alt="">
</a>
</div>
<!-- 切换图片的左右按钮 -->
<div class="left"><</div>
<div class="right">></div>
<!-- 图片下方的文字描述和圆点 -->
<div class="shade">
<div class="title">西湖好风景</div>
<div class="circle">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

效果


扫描加入网页设计QQ群、建站如此简单

本文地址:https://www.usuuu.com/a/ZxvPJRho