<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css\index.css">
<!-- <link type="text/css" rel="stylesheet" href="css\mainpage.css"> -->
<title>个人博客主页</title>
</head>
<body>
<header>
<div id="video_block">
<video autoplay loop width=100% height=100% object-fit:fill;
position: fixed;
left: 0;
top: 0;
z-index: -9999;>
<source src="./video/页眉视频.mp4">
<source src="./video/页眉视频.webm">
<source src="./video/页眉视频.ogv">
<p>Sorry, your browser doesn't support the video element.</p>
</video>
</div>
</header>
<!--
<nav>
<div id="nav-inner">
<ul>
<a href="">
<li>首页</li>
</a>
<a href="departments.html">
<li>作品集</li>
</a>
<a href="">
<li>未知</li>
</a>
<a href="">
<li>未知</li>
</a>
<a href="">
<li>未知</li>
</a>
</ul>
</div>
</nav> -->
<div id="container">
<div id="sidebar">
<div id="sidebar-header">
</div>
<div id="sidebar-content">
<img src="./img/个人证件照.jpg" alt="头像" class="sidebar-content-img">
<span class="name">xx</span>
<div id="personal_info">
<ul>
<li>
<img src="./img/学生图标.png" alt="icon" class="icon">
<span class="university">xxxxx xxxx</span>
</li>
<li>
<img src="./img/专业.png" alt="icon" class="icon">
<span class="university">xxxx xxxx</span>
</li>
<li>
<img src="./img/打招呼.png" alt="icon" class="icon">
<span class="university">xxxxx</span>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<h1>个人动态</h1>
<div id="detail">
<ul>
<li>
文章一
</li>
<li>
文章一
</li>
<li>
文章一
</li>
<li>
文章一
</li>
</ul>
</div>
</div>
</div>
<footer>
© xxx
<br>
</footer>
</body>
</html>
以上为html代码，以下为css代码
body{
cursor: url("../img/鼠标样式.ico"),auto;
margin: 0;
padding: 0;
/* background-color: yellow; */
}
header div#video_block{
width:100%;
height:100%
}/* 用百分比设置宽度放大缩小浏览器元素大小都不变 */
#wew:before {
background: url("../img/蓝海和沙滩.jpg") no-repeat;
background-size:100%;
background-attachment: fixed;
width:100%;
height: auto;
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
/* 让一个层在所有层的下面当背景的方法。 */
-webkit-filter:blur(5px);
/* blur(5px)是对图像进行模糊处理 */
filter: blur(px);
background-position: center top
}
nav{
background-color: #b39858;
width:100%;
height: 50px;
margin:0 auto;
padding: 10px;
}
nav #nav-inner{
width: 480px;
margin: 0 auto;
height: 61px;
}
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav a{
text-decoration: none;
color: #fff;
}
nav li{
float: left;
position: relative;
vertical-align: bottom;
font-size: 16px;
font-weight: normal;
padding: 0 25px;
height: 41px;
line-height: 41px;
}
nav a:hover{
color:#fff;
/* background-color: #85754d; */
}
nav li:hover{
background-color: #85754d;
padding: 0 25px;
height: 41px;
}
div#container{
padding:20px;
width: 1100px;
margin:20px auto;
background-color: black;
overflow: hidden;
/* 当父div没有设置高度，浮动子类div 是有高度的时候，
只有加入overflow: hidden;一句话才会和浮动子类div高度齐平 */
}
div#sidebar{
width: 360px;
float: left;
margin: 0;
/* padding: 16px 16px 6px 16px; */
/* 子头部元素与父元素之间的间距用padding调 */
/* margin-top: 80px; */
/* sidebar与header之间的间距调margin-top,sidebar与footer之间的间距调margin-bottom */
background-color: #fff;
background-color: red;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
div#sidebar-header{
padding: 0px 1px 6px 16px;
height: 104px;
background-color: #6c757d;
color: hsla(0,0%,100%,.5);
}
div#sidebar-header::after{
text-align: center;
box-sizing: border-box;
font-size: 20px;
content: "⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶66⁶⁶⁶⁶ ₆₆₆₆可以啊.这波 ₆₆₆₆⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶66⁶⁶⁶⁶ 卧槽⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶ 666₆₆₆₆₆₆₆ 666 666 ⁶⁶⁶⁶⁶⁶₆₆₆₆₆₆₆⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶⁶⁶";
}
div#sidebar-content{
background-color: #e9ecef;
/* padding: 0 1.25rem 1.25rem; */
}
span.name{
padding: 0px 26px 6px 52px;
font-size: 25px;
margin-left: -83px;
/* text-align: center; */
font-weight: bold;
}
img.icon{
width:30px;
height:30px;
}
img.sidebar-content-img{
position: relative;
left: 100px;
width: 150px;
height: 150px;
top: -40px;
background: #fff;
border: 4px solid #fff;
box-sizing: border-box;
border-radius: 100%;
}
/* div#personal_info{
margin:10px 15px;
/* background-color: yellowgreen; */
ul,li{
margin:0;
padding: 0;
list-style: none;
}
li{
display: flex;
/* margin: 20px 10px; */
padding: 8px 6px;
}
span.university{
font-weight: bold;
font-size: 16px;
padding-top: 8px;
margin-left: 3px;
}
div#main{
/* float: right; */
/* width:700px; */
margin:0px;
margin-left:410px;
padding-left:10px;
background-color: yellowgreen;
}
h1{
margin: 0px;
padding:0px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0,.0625)!important;
}
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
/* margin: 0px 10px 10px 10px; */
font-size: 90%;
}
如图所示。当浏览器增大到150%时，页眉视频大小没有变化，因此页眉旁边出现了很多空白，有碍观瞻。（好像那个视频的高度我改不了），我如何让页眉大小随时自适应浏览器大小呢？
如图所示，当浏览器变小到50%时，页眉大小还是不变，这样就和内容部分显得很突兀。
望指点如何修改让整个页面更美观些。静候答复为盼。
链接：https://pan.baidu.com/s/1ZvTF...
提取码：6661
复制这段内容后打开百度网盘手机App，操作更方便哦
mp4视频已放入网盘
