这是一个轮播图，浏览器窗口缩小，右边会顶出来一大块空白区域，求大神给看一下是否样式出了问题
html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title></title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lb.js" type="text/javascript"></script>
<link href="css/lb.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="lb">
<div class="lb_img">
<ul>
<li><img src="images/banner01.png"></li>
<li><img src="images/banner02.png"></li>
<li><img src="images/banner03.png"></li>
<li><img src="images/banner04.png"></li>
<li><img src="images/banner05.png"></li>
<li><img src="images/banner06.png"></li>
</ul>
</div>
<div class="btn btn1"><</div><div class="btn btn2">></div>
<div class="tabs">
<ul>
<li class="tab1 bg">1</li>
<li class="tab1">2</li>
<li class="tab1">3</li>
<li class="tab1">4</li>
<li class="tab1">5</li>
<li class="tab1">6</li>
</ul>
</div>
</div>
</body>
</html>
css代码
*{margin: 0px;
padding: 0px;
}
body
{
position: absolute;
width: 100%;
}
#lb{
width: 1030px;
height: 490px;
margin: 0 auto;
position: relative;
}
.lb_img ul li{
position: absolute;
list-style-type: none;
}
.btn{
position: absolute;
width: 60px;
height: 90px;
background-color: rgba(0,0,0,0.5);
font-size: 40px;
color: #ffffff;
line-height: 90px;
text-align: center;
top: 200px;
cursor: pointer;
display: block;
}
.btn2{
left: 970px;
top: 200px;
display: block;
}
.tabs{
position: relative;
left: 430px;
top: 265px;
}
.tabs ul li{
float: left;
list-style-type: none;
background-color: red;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 10px;
color: #ffffff;
border-radius: 100%;
cursor: pointer;
}
.tabs ul li.bg{
background-color: #ffffff;
color: #000000;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用 百分比 或者 单位em