视频 div 和文本 div 之间的白色 space
White space between video div and text div
我已经尝试了很多但没有任何效果,我在互联网上找到的所有内容都不适合我。我在 div 中有一个名为 "vidContain" 的视频,在这个 div 下方是另一个名为 "about" 的文本 div。 "vidContain"div之间是不明的白色space,白色space只有4px小。有人可以告诉我我做错了什么吗?
HTML 代码
<div class="nav">
<ul>
<li><a href="#vidContain">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id='vidContain'>
<div id='vid'>
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/finlay.mp4" type="video/mp4">
</video>
</video>
</div>
</div>
<div id="about">
<p>Lorem ipsum</p>
</div>
<div id="services">
Lorem ipsum
</div>
<div id='blog'>
Lorem Ipsum
</div>
CSS 代码
@font-face {
font-family: 'Brandon Grotesque';
src: url('BrandonGrotesque-Regular.eot');
src: url('BrandonGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
url('BrandonGrotesque-Regular.woff') format('woff'),
url('BrandonGrotesque-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Brandon Grotesque';
src: url('BrandonGrotesque-Bold.eot');
src: url('BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
url('BrandonGrotesque-Bold.woff') format('woff'),
url('BrandonGrotesque-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.nav {
z-index:10000;
margin-top: 10px;
width: 100%;
font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
position: fixed;
text-align:right;
}
.nav ul {
width: 100%;
margin: 0;
padding: 0;
letter-spacing: 4px;
}
.nav ul li {
display: inline;
}
.nav ul li a{
text-decoration: none;
color: black;
padding: 0;
text-transform: uppercase;
}
.nav ul li a:hover, .nav ul li .current{
color: #ffeead;
}
#vidContain {
position:relative;
display:inline-block;
margin:0px;
}
#vid {
top: 0; left:0;
width: 100%; height: auto;
z-index: -1;
display: block;
}
h1{
font-weight: bold;
letter-spacing: 6px;
}
h2{
font-weight: normal;
font-size: 18px;
color:grey;
}
#about{
margin: 0;
padding: 0;
height:500px;
background-color: #4f444c;
}
#services{
margin: 0;
padding: 0;
height:500px;
background-color: white;
}
#blog{
margin: 0;
padding: 0;
height:500px;
background-color: #ffeead;
}
video{
display: block;
margin:0;
}
这有点摸不着头脑,没有看到 fiddle 之类的东西来确切地看到发生了什么,但是你有两个关闭的 </video>
标签...尝试删除一个看看是否有所作为:
<div id='vidContain'>
<div id='vid'>
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/finlay.mp4" type="video/mp4">
</video>
</div>
</div>
此 ID #vidContain
添加 property vertical-align: top;
并将此 属性 添加到 p
margin:0;
还有两次关闭视频标签
我已经尝试了很多但没有任何效果,我在互联网上找到的所有内容都不适合我。我在 div 中有一个名为 "vidContain" 的视频,在这个 div 下方是另一个名为 "about" 的文本 div。 "vidContain"div之间是不明的白色space,白色space只有4px小。有人可以告诉我我做错了什么吗?
HTML 代码
<div class="nav">
<ul>
<li><a href="#vidContain">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id='vidContain'>
<div id='vid'>
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/finlay.mp4" type="video/mp4">
</video>
</video>
</div>
</div>
<div id="about">
<p>Lorem ipsum</p>
</div>
<div id="services">
Lorem ipsum
</div>
<div id='blog'>
Lorem Ipsum
</div>
CSS 代码
@font-face {
font-family: 'Brandon Grotesque';
src: url('BrandonGrotesque-Regular.eot');
src: url('BrandonGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
url('BrandonGrotesque-Regular.woff') format('woff'),
url('BrandonGrotesque-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Brandon Grotesque';
src: url('BrandonGrotesque-Bold.eot');
src: url('BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
url('BrandonGrotesque-Bold.woff') format('woff'),
url('BrandonGrotesque-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.nav {
z-index:10000;
margin-top: 10px;
width: 100%;
font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
position: fixed;
text-align:right;
}
.nav ul {
width: 100%;
margin: 0;
padding: 0;
letter-spacing: 4px;
}
.nav ul li {
display: inline;
}
.nav ul li a{
text-decoration: none;
color: black;
padding: 0;
text-transform: uppercase;
}
.nav ul li a:hover, .nav ul li .current{
color: #ffeead;
}
#vidContain {
position:relative;
display:inline-block;
margin:0px;
}
#vid {
top: 0; left:0;
width: 100%; height: auto;
z-index: -1;
display: block;
}
h1{
font-weight: bold;
letter-spacing: 6px;
}
h2{
font-weight: normal;
font-size: 18px;
color:grey;
}
#about{
margin: 0;
padding: 0;
height:500px;
background-color: #4f444c;
}
#services{
margin: 0;
padding: 0;
height:500px;
background-color: white;
}
#blog{
margin: 0;
padding: 0;
height:500px;
background-color: #ffeead;
}
video{
display: block;
margin:0;
}
这有点摸不着头脑,没有看到 fiddle 之类的东西来确切地看到发生了什么,但是你有两个关闭的 </video>
标签...尝试删除一个看看是否有所作为:
<div id='vidContain'>
<div id='vid'>
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/finlay.mp4" type="video/mp4">
</video>
</div>
</div>
此 ID #vidContain
添加 property vertical-align: top;
并将此 属性 添加到 p
margin:0;
还有两次关闭视频标签