0
我正在學習網頁設計。我試圖使我的知識頁面。該頁面是植物文本。這是代碼。固定位置菜單重疊
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Sample Site</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#whatwedo'>What We Do?</a></li>
<li><a href='#vision'>Our Vision</a></li>
<li><a href='#work'>Our Work</a></li>
<li><a href='#customer'>Our Proud Customers</a></li>
<li><a href='#testimonial'>Testimonials</a></li>
<li><a href=''>Blog</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
</nav>
</header>
<div id='whatwedo'>
<h1>What We Do?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id='vision'>
<h1>Our Vision</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'work'>
<h1>Our Work</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'customer'>
<h1>Our Proud Customers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = "testimonial">
<h1> Testimonials</h1>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
</div>
<footer>
<nav>
<ul>
<li><a href=''>Sales Company</a></li>
<li><a href=''>Local Resellers</a></li>
<li><a href=''>Special Orders</a></li>
<li><a href=''>Comapny Officies</a></li>
<li><a href=''>Subsidiaries</a></li>
</ul>
</nav>
</footer>
</body>
</html>
以下是css文件。
html {
font-size: 100%;
line-height: 1.8em;
}
* {
box-sizing: border-box;
border-color: white;
}
/*
Navigation
*/
nav ul{
position: fixed;
top: 0%;
}
nav ul li{
float: left;
margin: 1em 0.5em;
list-style: none;
}
#whatwedo {
clear: left;
margin-top: 8em;
}
/* Navigation Ends
*/
background {
background-color: white;
}
blockquote:before {
content: "''";
}
blockquote:after {
content: "''";
}
#testimonial {
text-align: center;
}
當我打開網頁時，我的固定位置菜單被重疊。我不希望它重疊。
top: 0%;
從這個：
nav ul{
position: fixed;
top: 0%;
}
請你幫我一下是什麼導致了這個錯誤，當我刪除此行的重疊得到糾正。添加該行時，菜單會重疊，並且在刪除該行時，菜單會下降並出現在其他內容的前面。請糾正它並向我解釋問題。
創建一個小提示以清楚說明並可幫助您修復 – winresh24
是否要導航保持*固定*？ – Aziz
是的。我希望它保持不變。 –