我正在学习网页设计。我试图用我的知识制作一个页面。该页面是植物文本。这是代码。
<!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%;
}
请您帮我解决导致此错误的原因。添加该行时，菜单会重叠，当删除该行时，菜单会关闭并进入其他内容。请更正并解释我的问题。
答案 0 :(得分：1)
我认为这是position:fixed
请注意，固定元素的位置是从窗口的边框开始，而不是从它的父元素开始。
顺便说一下，如果你写0，你不必输入它的单位（％）零为零，无论在哪个单位：）
答案 1 :(得分：0)
Svoka，如果您打开网页，您将会发现菜单相互重叠。我不希望它重叠。我想纠正这种行为。但是，你告诉我的事情已经为我所知。我希望删除重叠的故障。