我真的不明白 为什么这三个图片还是垂直的。。。求老师帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main" id="main">
<div class="banner">
<a href="">
<div class="banner-slide slide1 "></div>
</a>
<a href="">
<div class="banner-slide slide2 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
<a href="">
<div class="banner-slide slide5"></div>
</a>
</div>
<div class="footer">
<span class="active">鸡里奥宝典赤月篇</span><span>腥红之月2020</span><span>2020情人节</span><span>腥红之月魔法引擎</span><span>喵凯主题周边</span>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
------------------------------------css---------------------------------------
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
body{
font-family:'微软雅黑';
font-size: 14px;
}
.main{
width:4100px;
height:340px;
margin:30px auto;
position:relative;
}
.banner{
width:4100px;
height:340px;
position: relative;
}
.banner-slide{
width:4100px;
height:340px;
background-repeat: no-repeat;
}
.slide1{
background-image: url("../img/1.jpg");
float:left;
}
.slide2{
background-image: url("../img/2.jpg");
}
.slide3{
background-image: url("../img/3.jpg");
}
.slide4{
background-image: url("../img/4.jpg");
}
.slide5{
background-image: url("../img/5.jpg");
}
.footer{
position:absolute;
left:0;
bottom:-1px;
}
.footer span{
display: inline-block;
width:164px;
height:40px;
line-height:40px;
background-color: rgb(243, 242, 240);
margin-left:0px;
color:rgb(68, 68, 68);
text-align: center;
border-bottom:3px solid rgb(243, 242, 240);
}
.footer span.active{
border-bottom:3px solid rgb(204, 174, 26);
color:rgb(204, 174, 26);
background-color: #fff;
}
正在回答 回答被采纳积分+1
同学你好，需要在banner-slide设置绝对定位，将全部图片相对于banner区定位。再进行之后的轮播效果。具体如下：
建议同学可以再回顾学习一下《 项目：JavaScript轮播图 》的课程，老师在2-2 轮播图样式（2）小节中都有讲到，https://class.imooc.com/lesson/1069#mid=25817
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星