无法显示滚动条且无法滚动
问题相关代码,请勿粘贴截图
运行结果及报错内容
overflow属性改为auto后依旧无效
我想要达到的结果
.a1{
width: 100%;
height: 78px;
overflow: visible;
position: absolute;
top: 0;
left: 0;
z-index: 11;
background-color: black;
position: fixed;
}
.a1-1{
float: left;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.a2{
float: left;
width: 167px;
height: 60px;
text-decoration: none;
}
.a2-1{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.a2-2{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
list-style: none;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
text-align: center;
}
.logo{
float: left;
width: 160px;
height: 67px;
margin-top: 10px;
text-decoration: none;
}
a{
text-decoration: none;
}
.ul-1{
float: left;
width: 55%;
height: 78px;
box-sizing: border-box;
margin-left: 30px;
padding-top: 16px;
list-style: none;
padding: 0px;
margin: 0px;
}
li{
float: left;
list-style: none;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
width: 20%;
height: 78px;
text-align: center;
}
.span-1{
display: block;
color: #fff;
font-size: 18px;
letter-spacing: 1px
}
.span-2{
display: block;
color: #aeaeae;
font-size: 11px;
margin-top: -1px;
letter-spacing: 1px
}
.video-center{
width: 1920px;
height: 990px;
display: block;
position: absolute;
top: 78px;
left: 50%;
margin-left: -960px;
pointer-events: none;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
}
.video-top{
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>期末</title>
<link rel="stylesheet" href="css/QiMo.css">
</head>
<body>
<div class="a1">
<div class="a2">
<a class="logo" href="#" title="英雄联盟官网">
<img src="img/logo.jpg" alt="英雄联盟" width="157px" height="60px">
</a>
</div>
<div class="ul-1">
<ul>
<li>
<a class="a1-1" href="#" title="游戏资料">
<span class="span-1">游戏资料</span>
<span class="span-2">GAME INFO</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="商城/合作">
<span class="span-1">商城/合作</span>
<span class="span-2">STORE</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="社区互动">
<span class="span-1">社区互动</span>
<span class="span-2">COMMUNITY</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="赛事官网">
<span class="span-1">赛事官网</span>
<span class="span-2">ESPORTS</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="自助系统">
<span class="span-1">自助系统</span>
<span class="span-2">SYSTEM</span>
</a>
</li>
</ul>
</div>
<div class="video-center">
<video class="video-top" autoplay="autopaly" loop="loop" muted="1">
<source src="img/video.webm" type="video/webm">
<source src="img/video.mp4" type="video/mp4">
</video>
</div>
</div>
</body>
</html>