标签：box 轮播 color top html height 源码 5px absolute
<!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>
body{
margin: 0; /*规定边框 */
}
.box{
width: 1000px; /* 写个盒模型 */
height: 460px;
position: relative; /* 必须用relative */
}
.box-img{ /* 设置图片据.box的距离,absolute十分重要 */
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1.5s; /* 设置transition为1.5s秒是为了减少后面轮播时的误差 */
}
.box-img:nth-child(1){ /* nth-child(1)是给第一个图片赋值，让它显示 */
opacity: 1;
}
.box-left{ /* 设置 < 样式 */
position: absolute;
width: 35px;
height: 70px;
color: #ccc;
top: 50%;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
margin-top: -35px;
}
.box-left:hover{ /* 用hover设置触碰时的背景 */
background-color: #00000050;
color: aliceblue;
cursor: pointer;
}
.box-right{ /* 设置 > 样式 */
position: absolute;
width: 35px;
height: 70px;
color: #ccc;
top: 50%;
margin-top: -35px;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
right:0;
}
.box-right:hover{ /* 用hover设置触碰时的背景 */
background-color: #00000050;
color: aliceblue;
cursor: pointer;
}
.box-zhiding>ul{ /* 设置下面圆圈的个式 */
padding: 0;
margin: 0;
list-style: none;
}
.box-zhiding
标签：box,
轮播,
color,
top,
html,
height,
源码,
5px,
absolute
From： https://blog.csdn.net/2301_80899969/article/details/139374673