为什么图片不显示啊

<!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 ;
}

需要在 .slide1~3里添加高度才能正常显示,问一下为什么,别人都能正常显示我这个就的添加高度是父div设置的告诉没有生效的原因吗

收起回答