无法显示两边按钮

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

温水煮叮当

2019-07-13 09:27:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</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" id="main">
<div class="banner">
<div class="ad-pictuer pictuer-active"><a href=""><img src="img/bg1.jpg"></a></div>
<div class="ad-pictuer "><a href=""><img src="img/bg2.jpg"></a></div>
<div class="ad-pictuer "><a href=""><img src="img/bg3.jpg"></a></div>
</div>
<a href="javascript:void(0)" class="button left"></a>
<a href="javascript:void(0)" class="button right"></a>
</div>
</body>
</html>

*{
	margin:0px;
	padding: 0px;
	font-family: 方正有猫在简体;
}

ul{
	list-style: none;
}

a{
	text-decoration:none;
}

.main{
	width: 1200px;
	height: 460px;
	margin:30px auto;
	overflow: hidden;
	position: relative;
}

.banner{
	width: 1200px;
	height: 460px;
	position: relative;
	overflow: hidden;
}

.banner .ad-pictuer{
	width: 1200px;
	height: 460px;
	position: absolute;
	display: none;
}

.banner .pictuer-active{
	display: block;
}

.banner .button{
	height: 80px;
    width: 40px;
	position: absolute;
	left: 244px;
	top: 50%;
	margin-top:-40px;
	background:url(../img/arrow.png) center center no-repeat;
}

写回答

1回答