为什么图片不显示啊

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="Test.css"/>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<div class="main">
<!-- 图片轮播 -->
<div class="banner">
<a href="#">
<div class="bannner-slide  slide1" ></div>
</a>
<a href="#">
<div class="bannner-slide  slide2"></div>
</a>
<a href="#">
<div class="bannner-slide  slide3"></div>
</a>
</div>
</div>
</body>
</html>
 
*{
    margin:0;
    padding:0;
}
ul{
   list-style:none;
}
body{
    font-family:"微软雅黑";
    color:#14191e;
}
.main{
    width:1200px;
    height:460px;
    margin:30px auto;
    overflow:hidden;
}
.banner{
    width:1200px;
    height:460px;
}
.banner-slide{
    width:1200px;
    height:460px;
    background-repeat:no-repeat;
}
.slide1{
    background-image:url("bg1.jpg");
}
.slide2{
    background-image:url("bg2.jpg");
}
.slide3{
    background-image:url("bg3.jpg");
}

图片就是不显示路径绝对没错,代码也一样

慕无忌4258813 2019-09-15

源自：项目：JavaScript轮播图 2-1 轮播图样式（1）

收起

2回答

好帮手慕珊回答被采纳获得+3积分 2019-09-15 15:46:47

同学，你好！之所以高度不起作用是因为下面的bannner-slide拼写有误，多写了一个n，应该是banner-slide，a后面是两个n，不是三个n

<div class="banner">
<a href="#">
<div class="bannner-slide  slide1" ></div>
</a>
<a href="#">
<div class="bannner-slide  slide2"></div>
</a>
<a href="#">
<div class="bannner-slide  slide3"></div>
</a>
</div>

main的高度是460px，但是如果显示三张图片就超出了main的高度了，所以overflow:hidden的作用就是隐藏超出的部分。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者慕无忌4258813 2019-09-15 12:17:00

.banner{
    width:1200px;
    height:460px;
}
.banner-slide{
    width:1200px;
    height:460px;
    background-repeat:no-repeat;
}
.slide1{
    background-image:url("bg1.jpg");
    height:460px;
}
.slide2{
    height:460px;
    background-image:url("bg2.jpg");
 
}
.slide3{
    background-image:url("bg3.jpg");
    height:460px ;
}