为什么我这样写我的第一张图片并不能显示出来

来源：2-2 轮播图样式（2）

qq_Coin_pyzcw

2019-08-12 08:46:23

<!DOCTYPE html>
<html>
<head>
	<title>图片轮播</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main">
    	<!-- 图片轮播 -->
    	<div class="banner">
    		<a href="">
    			<div class="banner-slide slide1 slide-active">
    				<img src="img/bg1.jpg">
    			</div>
    		</a>
     		<a href="">
    			<div class="banner-slide slide2">
    				<img src="img/bg2.jpg">
    			</div>
    		</a>
    		<a href="">
    			<div class="banner-slide slide3">
    				<img src="img/bg3.jpg">
    			</div>
    		</a>
    	</div>
    </div>
</body>
</html>


*{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style: none;
}
body{
	font-family: "微软雅黑";
	color: #14191e;
}
.main{
	width: 1200px;
	height: 460px;
	margin: 30px auto;
	/*溢出部分隐藏*/
	overflow: hidden;
}
.banner{
	width: 1200px;
	height: 460px;
	position: relative;
}
.main .banner .banner-slide{
	width: 1200px;
	height: 460px;
	position: absolute;
	background-repeat: no-repeat;
	display: none;
}
 .slide1{
	display: block;
}

写回答

1回答