如何解决定位 Div 和视频
我正在尝试创建一个网站,以尝试到目前为止我对 html 和 css 的了解(自我思考,所以还不是最好的 :D)。 所以正如标题所说 - 我正在努力将我的 div 设置为相同的高度(#about),而且我的 #about 与视频的宽度不同(我一直试图将其设置为英雄)。
!-- 英雄 -->
<div id="hero">
<video autoplay muted loop id="myvideo">
<source src="video.mp4" type="video/mp4">
</video>
<div class="content">
<p class="hero_text"><h1 id="kaszynski">Piotr<br>Kaszynski</h1>
Physical Theraphy <br> in Motion.</p>
<button id="appointment">
<p>Book an appointment</p>
</button>
</div>
</div>
h1#kaszynski {
font-family: 'Poppins',sans-serif;
}
#hero {
width: 100%;
height: auto;
}
#myvideo {
position: fixed;
width: 100%;
height: auto;
z-index: -1;
margin-top: -260px;
filter: blur(3px);
-webkit-filter: blur(3px);
}
.content {
position: center;
text-align: center;
bottom: 0;
width: 100%;
padding: 20px;
margin-top: 50px;
z-index: 100;
}
div.content {
margin-top: 200px;
color: whitesmoke;
font-size: 20px;
}
这里是div的
<!-- about -->
<div id="about">
<img src="img/tak.jpg" class="piotr" height="632px" width="456px">
<div class="aboutinfo">
<h2>ABOUT</h2>
<hr> <br>
<div class="about_content">
<article class="acontent">
My name is Piotr Kaszynski. I am 47 yerars old.
I was born and raised in the lower silesian area in Poland. <br> <br>
From early years,I have always been interested in varoius
sports disciplines - therfore I went to academy of physical <br>
sport education and completed physiotherapy department. For
the past 25 years I am helping people who struggled with their <br>
physical health such as: spine,shoulders,knees etc. I have
worked in varIoUs different places and worked with varIoUs
groups of <br> people - starting with newborns and ending with elderely people.
</article>
</div>
</div>
</div>
/* ABOUT */
#about {
width: 100%;
height: 768px;
background-color: #b9bbba;
margin-top: 260px;
}
#jpgp {
width: 456px;
height: 632px;
background-image: url(img/tak.jpg);
display: inline-block;
}
.piotr {
margin-top: -70px;
margin-left: 460px;
}
.aboutinfo {
margin-left: 35px;
margin-top: -100px;
background-color: #e9e9e9;
padding: 10px;
position: relative;
}
article.acontent {
width: 456px;
height: 232px;
text-align: left;
padding: 0;
}
div.aboutinfo {
display: inline-block;
}
#about_content {
width: 456px;
height: 632px;
}
hr {
width: 85px;
background-color: yellowgreen;
border: none;
height: 2px;
float: left;
margin-top: -23px;
}
对于“混乱的代码”,我深表歉意,但正如我所说,我对这种东西很陌生:D。
这是我网站的 FHD 和 4K 图片 https://imgur.com/a/1kC76aR
谢谢你们:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。