做的轮播图,用伪元素添加的两个箭头,在调试工具上也有,但是网页上看还是被图片压在下面
.bigimg {
position: absolute;
top: 10px;
left: 220px;
width: 720px;
height: 455px;
overflow: hidden;
}
.bigimg::before,
.bigimg::after {
position: absolute;
top: 40%;
width: 40px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
background-color: #000;
opacity: .5;
cursor: pointer;
}
.bigimg::before {
content: '<';
left: 0;
}
.bigimg::after {
content: '>';
right: 0;
z-index: 1;
}
.bigimg ul {
width: 2160px;
height: 100%;
}
.bigimg ul li img{
float: left;
width: 720px;
height: 455px;
}