我正在為課堂制作網頁，我們正在學習如何在我們的網站上放置視頻。我們使用的不僅僅是 CSS 和 HTML。我知道如何讓照片向右浮動，但由于某種原因我也無法獲得視頻。我把它放在頁面的右側，但它只是搞砸了布局并將我的頁腳在頁面上移到更高的位置，然后它應該是。CSS 用于 2 個網頁，所以如果它看起來有不屬于它的東西，那就是原因。此外，這不是來自 youtube 的視頻。我見過的大多數例子都在解釋這一點，但并不完全是我遇到的問題
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link rel="stylesheet" href="assignment8.css" type="text/css">
</head>
<body>
<div id="containerptr">
<header>
<h1>John's Favorite Vacay Destinations</h1>
</header>
<main>
<nav>
<ul>
<li><a href="assign8_home.html">Home</a></li>
<li><a href="assign8_ptr.html">Pacific Trails</a></li>
</ul>
</nav>
<h2>Pacific Trails Resort</h2>
<p>
Pacific Trails Resort offers a special lodging experience on the California North Coast.
Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwood</li>
</ul>
<video controls="controls"
poster="pacifictrailsresort.jpg"
width="320" height="240">
<source src="pacifictrailsresort.m4v" type="video/mp4">
<source src="pacifictrailsresort.ogv" type="video/ogg">
<a href="pacifictrailsresort.jpg">Pacific Trails Resort</a>(.m4v)
</video>
</main>
</div>
<footer><p>Copyright © 2021 <a href="mailto:[email protected]">Eric Jones</a></p>
</footer>
</body>
</html>
CSS：
body {
font-family: cursive;
margin: 0px 0px 0px 0px;
background-image: linear-gradient(#7dafff, #f7f7f7);
}
#container {
width: 960px;
padding: 50px 50px 50px 50px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px 0px #1e1e1e;
border-radius: 15px 15px 15px 15px;
background-image: url(lightbluebkg.jpg);
}
#containerptr {
width: 960px;
padding: 50px 50px 50px 50px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px 5px #1e1e1e;
border-radius: 15px 15px 15px 15px;
background-image: linear-gradient(#4fb377, #f7f7f7);
}
h1 {
font-family: cursive;
text-align: center;
}
h2 {
font-family: fantasy;
text-shadow: 2px 0px white;
}
nav a:link {
color: #05116b;
}
nav a:visited {
color: #0041a8;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav li {
display: inline;
padding-left: 15px;
}
img {
margin: 0 15px
}
.photo {
float: right;
transform: rotate(4deg);
}
video {
float: right;
}
footer {
font-size: .7em;
text-align: center;
border-top: 1px solid #003366;
background-color: #BACBE0;
padding-bottom: 5px;
padding-top: 5px;
}
uj5u.com熱心網友回復：
我知道您的問題是什么，當您將視頻向右浮動時，它會弄亂其下方的頁腳...將其添加到頁腳上方和主頁面下方的 html 中...
</main>
<div class= "clr"> </div>
</div>
<footer><p>Copyright © 2021 <a href="mailto:[email protected]">Eric Jones</a></p>
</footer>
現在將此選擇器添加到您的 css 檔案中....
.clr{
clear: both;
這可能會解決您的問題..
這是如何解決問題的 --> 當您浮動元素時，實際上是對它們下方的元素進行排序以重疊浮動的元素
因此，當您使用清除兩個選擇器添加此 clr div 時，您是在告訴下面的元素不要與上面的元素重疊
uj5u.com熱心網友回復：
專注于這些事情；
- 首先添加 display:inline-block; 到包含所有
- 標簽（即出現在
) 以便它們僅消耗它所在的空間。
2.然后為您添加高度 #containerptr 以便視頻不會覆寫您的頁腳
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338629.html
上一篇：折疊時如何使側邊欄元素固定或靜態