<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="zhuye.css" rel="stylesheet" type="text/css">
<title>主页</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
video{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.nowtime{
color: yellow;
opacity: 0.4;
}
</style>
</head>
<body>
<!--头部-->
<div class="head">
<a href="login.html" rel="noopener" target="_blank">登录</a>
</div>
<!--背景视频-->
<div class="sp">
<video src="钢铁侠.mp4" autoplay loop ></video>
</div>
<!--头像-->
<div class="touxiang"><img src="头像1.png"/></div>
<!--主体-->
<div class="wrapper" >
<a href="https://user.qzone.qq.com/2247181148/infocenter"
rel="noopener" target="_blank" title="欢迎访问我的空间">
<h1>郭星池的QQ空间</h1>
</a>
<!--上部导航-->
<a href="http://www.aynu.edu.cn/" rel="noopener" target="_blank"
title="安阳师范学院官网">安师官网</a>|
<a href="https://y.qq.com/" rel="noopener" target="_blank"
title="QQ网页版">QQ音乐</a>|
<a href="https://image.baidu.com/" rel="noopener" target="_blank"
title="海量百度免费图片">百度图库</a>
<br ><br >
<!--中部导航-->
<ul class="icons">
<li><a href="http://i.chaoxing.com/base?t=1646142748054" rel="noopener" target="_blank"
title="学习通">学习通</a></li>
<li><a href="https://www.bilibili.com/" rel="noopener" target="_blank"
title="哔哩哔哩">B站</a></li>
<li><a href="https://music.163.com/" rel="noopener" target="_blank"
title="网易云音乐">网易云</a></li>
<li><a href="https://www.zhihu.com/" rel="noopener" target="_blank"
title="知乎">知乎</a></li>
<li><a href="https://www.icourse163.org/" rel="noopener" target="_blank" title="中国大学MOOC">慕课</a></li>
<li><a href="https://www.baidu.com/" rel="noopener" target="_blank"
title="百度">百度</a></li>
<li><a href="https://www.csdn.net/" rel="noopener" target="_blank"
title="CSDN">CSDN</a></li>
</ul>
<a href=""
rel="noopener" target="_blank" title="QQ:2247181148">QQ</a>|
<a href="https://wx.qq.com/" rel="noopener" target="_blank"
title="微信:guo2247181148">微信</a>|
<a href="https://weibo.com/u/7733414356/home?wvr=5" rel="noopener" target="_blank"
title="期待您的关注">微博</a>|
<a href="https://mail.qq.com/cgi-bin/frame_html?sid=Al4VkdIx_AnT8ncW&r=d2e7f5e0d66b3bb295eac318397e0e16"
rel="noopener" target="_blank" title="通过邮箱联系我">邮箱</a>
<!--时间-->
<div class="nowtime" id="datetime" >
<script>
setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
</script>
</div>
</div>
<!--音频-->
<audio loop autoplay >
<source src="whatdoyoumean.mp3">
</audio>
</body>
</html>
.touxiang{
position: absolute;
height: 300px;
width: 300px;
border-radius: 50%;
overflow: hidden;
opacity: 0.3;
top: 110px;
left: 200px;
}
.wrapper{
top: 430px;
left: 240px;
position: absolute;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.sp{
float: top;
position: relative;
height: 100%;
width: 100%;
}
.nowtime{
font-size:50px;
}
.head{
height: 5%;
width: 100%;
top: 0px;
left: 0px;
font-size: 2em;
color: yellow;
background-color: aliceblue;
opacity: 0.3;
}
怀疑是被盖住了,切换一下位置试下。
<!--背景视频-->
<div class="sp">
<video src="钢铁侠.mp4" autoplay loop></video>
</div>
<!--头部-->
<div class="head">
<a href="login.html" rel="noopener" target="_blank">登录</a>
</div>
head没给定位，而video加了fixed，所以会覆盖了，你你给head加个定义，再用z-index调整层级就可以了
你的video太大了，又加了fixed属性，把head盖住了，
如果你的head是要浮到视频表面的话，那就给head加position属性，再加个z-index:99,
如果视频要在head下方，二者不重叠的话，那把video的position：fixed去掉就行了