翻页按钮显示错误
来源：2-3 轮播图上按钮样式
石宇real
2020-03-22 21:02:05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script type="text/javascript" src="js/js.js"></script> </head> <body> <div class="main"> <!-- 图片轮播 --> <div class="banner"> <a> <div class="banner-slide slide1 slide-active"></div> </a> <a> <div class="banner-slide slide2"></div> </a> <a> <div class="banner-slide slide3"></div> </a> </div> <a href="javascript:void(0)" class="button prev"></a> <a href="javascript:void(0)" class="button next"></a> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family:"微软雅黑";
color: #14191e;
/*background-color: gray;*/
}
.main{
width: 1200px;
height: 460px;
margin:30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
/*不平铺*/
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide-active{
display: block;
}
.slide1{
background-image: url("../img/bg1.jpg");:
}
.slide2{
background-image: url("../img/bg2.jpg");:
}
.slide3{
background-image: url("../img/bg3.jpg");:
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url(../img/arrow.png) no-repeat center center；
}
.button:hover{
background-color:#c5c5c5;
opacity: 0.8;
/*filter: alpha(opacity=20);*/
}
.prev{
transform: rotate(180deg);
}
.next{
left:1160px;
right: 0px；
}
而且next按钮设置left：auto；会使next在最左侧显示，我将left设为1160px挪至最右端。求助哪里出错
1回答
-
同学你好，1. next已经在最右侧显示。但同学在css中使用中文字符的分号（；）导致设置的样式没有生效，按钮没有显示出来。建议同学将修改为英文字符的分号（;）修改后代码如下所示：
2. 在分号后是不需要，冒号的（：），建议同学删除。修改后代码如下所示：
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
1
相似问题