按钮样式无法正常显示

来源：2-3 轮播图上按钮样式

庾松

2019-03-22 10:16:36

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合实例</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="main">
<!--图片轮播-->
<div class="banner">

<a href="#">
<div class="banner_slide slide1 slide_active"></div>
</a>
<a href="#">
<div class="banner_slide slide2"></div>
</a>
<a href="#">
<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;
}
.main{
	width: 1200px;
	height: 460px;
	margin: 30px auto;
	overflow: hidden;
	position: relative;
}
.banner{
	width: 1200px;
	height: 460px;
	position: relative;
	overflow: hidden;
}
.banner_slide{
	width: 1200px;
	height: 460px;
	position: absolute;
	background-repeat: no-repeat;
	display: none;


}
.slide1{
	background-image: url("../img/bg1.jpg");
}
.slide2{
	background-image: url("../img/bg2.jpg");
}
.slide3{
	background-image: url("../img/bg3.jpg");
}
.slide_active{
	display: block;
}
.button{
	position: absolute;
	width: 40px;
	height: 80px;
	left: 244px;
	top: 50%;
	margin-top: -40px;
	background: #0f0;
	/*按钮位置，水平居中*/
	background-image:url(../img/arrow.png)no-repeat center center;
	/*background: repeat;
*/
}
.next{
	left: auto;
	right: 0;

}