對編程有點陌生，我正在制作一個學校項目，我從 w3schools 一步步制作了一個“ul 導航欄”，然后我嘗試在頁面中放置一個視頻，但視頻有點搞亂了我的導航欄，任何想法如何使導航欄的底部固定，這樣當我放置 img 或視頻時它就不會這樣做？謝謝你！代碼：<!DOCTYPE html><html> <head> <style> body {margin:0;}h1 { font-family: "Comic Sans MS", cursive, sans-serif;}li { font-family: "Comic Sans MS", cursive, sans-serif;} ul { list-style-type: none; margin: 0px; padding: 0px; overflow: auto; background-color: #7092be; position: sticky; top: 75px; width: 100%;}li { float: left;}li { border-right: 1px solid #bbb;}li:last-child { border-right: none;}li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}li a:hover { background-color: #496fa0; }.active { background-color: #bdcce1;}.center { margin: 0width: 480px; }</style> <title></title> <meta charset='utf-8'> <meta name='description' content=''> <meta name='keywords' content=''> <meta name='author' content=''> <meta name='robots' content='all'> </head> <body> <h1> Vtipy na den</h1> <ul> <li><a href="index.html">Domov</a></li> <li><a href="ctyri.html">Najdu co neznám</a></li> <li><a href="obrazky.html">Obrázky</a></li> <li><a class="active" href="videjko.html">Video vtip</a></li> <li><a href="tabulky.html">Tabulky</a></li> <div> <video class='center' width="640" height="480" controls autoplay> <source src="vtip1.mp4" type="video/mp4"> <source src="vtip1.mp4" type="video/ogg"> Your browser does not support the video tag. </video> </div> </body></html>這是頁面https://i.stack.imgur.com/35sSc.png
2 回答
叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
我已經為您整理了代碼并解決了問題。您只是忘記關閉ul標簽，您需要關閉標簽才能顯示新的塊級元素，除非您決定使用它display flex，您還可以為您的 DIV 命名并為每個部分創建一個新的 DIV頁面強制使用塊級元素。
body {
margin: 0;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
background-color: #7092be;
position: sticky;
top: 75px;
width: 100%;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
.center {
margin: 0width: 480px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a class="active" href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<div>
<video class='center' width="640" height="480" controls autoplay>
<source src="vtip1.mp4" type="video/mp4">
<source src="vtip1.mp4" type="video/ogg"> Your browser does not support the video tag.
</video>
</div>
</body>
</html>
- 2 回答
- 0 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消