打算设置三行一行只放两张图的第一行设置以后，设置第二行和第三行的时候会直接覆盖在第一行的位置、新加一个ID选择器加上TOP属性也无法改变位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>期末</title>
<link rel="stylesheet" href="css/QiMo.css">
</head>
<body>
<div class="aa1">
<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>
<!-- 视频背景 -->
<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>
<div id="jsz">
<ol class="card-list">
<li>
<img src="img/虚空掠夺者.jpg" alt="">
<div class="up-1">
<a href="#"><h1>虚空掠夺者</h1></a>
</li>
<li>
<img src="img/傲之追猎者.jpg" alt="">
<div class="up-1">
<a href="#"><h1>傲之追猎者</h1></a>
</div>
</li>
</ol>
</div>
</div>
</body>
</html>
.aa1{
height: 100%;
height: 990px;
}
.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;
}
.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: hidden;
overflow-x: hidden;
overflow-y: hidden;
background-color: #aeaeae;
}
.video-top{
pointer-events: none;
}
#jsz >.card-list{
position: absolute;
bottom: 0;
top: 20%;
/* flex布局让子元素水平排列 */
display: flex;
width: 100%;
height: 250px;
list-style: none;
justify-content: space-around;
align-items: center;
background-color: #aeaeae;
}
#jsz .card-list li {
position: relative;
/* 让每个li平分空间 */
width: 490px;
height: 250px;
text-align: center;
line-height: 10px;
border-radius: 10px ;
/* 隐藏遮罩层 */
overflow: hidden;
}
#jsz .card-list li h1{
margin: 0;/* 前面的样式污染了 ,清除外边距*/
line-height: 200px;
}
#jsz .card-list li img{
width: 490px;
height: 250px;
border-radius: 10px ;
}
/* 设置遮罩层的样式 */
#jsz .card-list li .up-1{
position: absolute;
top: 250px;
left: 0;
width: 490px;
height: 250px;
background-color: rgb(0, 0, 0,.4);
border-radius: 10px ;
transition: top 0.6s ease ;
}
/* hover效果 */
#jsz .card-list li:hover .up-1{
top: 0;
}
#jsz .card-list li:hover img{
transform: scale(1.3);
transition: 1s;
}
无法移动位置
设置性的Id属性也没用
让他的三个盒子能平行排开而不是重叠在一起
