gpt4 book ai didi

html - 试图将视频放到我的 html 和 css 页面

转载 作者:行者123 更新时间:2023-11-28 12:44:48 25 4
gpt4 key购买 nike

我试图将视频放在我的 html 和 css 页面的中心,但每次该视频卡在左侧顶部时该怎么办?怎么了 ?这是我的学校元素。你至少能告诉我其他方法吗?

<!DOCTYPE html>

<HEAD>!
<TITLE></TITLE>

<LINK href="to.css" rel="stylesheet" type="text/css">


</HEAD>

<BODY>

<DIV ID="header">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">HOME</a>
</li>
</li>
<li> <a href="#">dropdown #1</a>

<ul>
<li><a href="#">dropdown #1 item #1</a>
</li>
<li><a href="#">dropdown #1 item #2</a>
</li>
<li><a href="#">dropdown #1 item #3</a>
</li>
</ul>
</li>
<li> <a href="#">dropdown #2</a>

<ul>
<li><a href="#">dropdown #2 item #1</a>
</li>
<li><a href="#">dropdown #2 item #2</a>
</li>
<li><a href="#">dropdown #2 item #3</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>


</DIV>

</DIV>

<DIV ID="wrapper">
<DIV ID="content_area">
<p></p>
<center>
<video width="400" height="240" controls>
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object>
</video>
</center>

</DIV>
</DIV>

<DIV ID="footer">
Hello and Welcome --------------
</DIV>

</BODY>

</HTML>

CSS:

body {
margin: 0;
padding: 0;
min-width: 525px;
font-family: Arial;
font-size: 17px;
background-image: url('fifa2.jpg');
}

#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
backgroundcolor: }


#footer {
float: left;
width: 100%;
background-color: #000000;
font-weight: bold;
text-align: center;
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}

#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}

#left_side {
position: relative;
float: left;
width: 200px;
right: 200px;
margin-left: -100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

#right_side {
position: relative;
float: left;
width: 125px;
background-color: #66CCCC;
margin-right: -125px;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

#content_area {
position: relative;
float: left;
background-color: #ffffff;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

#nav {
background-color: #222;
}

#nav_wrapper {
width: 350px;
margin: 0 auto;
text-align: left;
}

#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}

#nav ul li {
display: inline-block;
}

#nav ul li:hover {
background-color: #333;
}

#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}

#nav ul li:hover ul {
display: block;
}

#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}

#nav ul ul li {
display: block;
}

#nav ul ul li a:hover {
color: #699;
}

图片链接:http://i.stack.imgur.com/NnvlO.jpg

最佳答案

在 CSS 中,从 #wrapper 中删除 float: left;,从 #content_area 中删除 background-color: #ffffff; 并使用 margin-top 属性调整视频。然而,这是最简单的方法。您可以考虑按照以下链接中的说明正确执行此操作。还有一个小提示:我们现在在 HTML 中使用小写字母:)

How to vertically center a div for all browsers?

这里是修改后的代码:

#wrapper {
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
}

#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}

video {
margin-top: 250px;
}

祝你的学校元素顺利!

关于html - 试图将视频放到我的 html 和 css 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25453145/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com