图片
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrap{
width: 520px;
height: 280px;
margin: 50px auto;
position: relative;
}
ul{
padding: 5px 9px 0px 3px;
height: 13px;
margin: 0;
border-radius: 10px;
background-color: rgb(255,255,255,0.3);
/* 根据外层div(wrap)定位 */
position: absolute;
left: 50%;
bottom: 15px;
text-align: center;
margin-left: -39px;
}
li{
display: block;
/* padding-top: 8px; */
/* 去掉小点点 */
list-style: none;
width: 8px;
height: 8px;
/* 让li成为下方的圆点 */
border-radius: 50%;
background-color: #FFFFFF;
/* 让li在一行内显示 */
float: left;
margin-left: 4px;
/* position: relative;
left: 50%;
top: 50%; */
}
.active{
background-color: #ff5000;
}
.span{
/* 箭头 */
width: 100%;
color: white;
/* background-color: red; */
position: absolute;
top: 50%;
}
#left{
width: 20px;
height: 30px;
/* 垂直居中 */
line-height: 30px;
/* 水平居中 */
text-align: center;
display: block;
float: left;
background-color: rgba(6,6,6,0.5);
}
#right{
width: 20px;
height: 30px;
/* 垂直居中 */
line-height: 30px;
/* 水平居中 */
text-align: center;
display: block;
float: right;
background-color: rgba(6,6,6,0.5);
}
</style>
</head>
<body>
<div id="wrap">
<div class="img">
<img src="./img/photo.webp" >
</div>
<div class="span">
<span id="left"><</span>
<span id="right">></span>
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
