gpt4 book ai didi

html - 如何拥有根深蒂固的导航栏外观?

转载 作者:行者123 更新时间:2023-11-28 03:23:50 24 4
gpt4 key购买 nike

我想要一个导航栏,它在两侧、顶部和底部没有任何额外的空间。然而似乎什么都没有。有什么办法可以解决这个问题。我希望导航栏的外观示例是 dootrix.com这是说明问题所在的图像:image

     ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
<a href="test_webpage.html#about">ABOUT</a>
</li>
<li>
<a href="test_webpage.html#products">PRODUCTS</a>
</li>
<li>
<a href="test_webpage.html#coupons">COUPONS</a>
</li>
<li>
<a href="test_webpage.html#feedback">FEEDBACK</a>
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>

最佳答案

您必须禁用 body 标签的边距 ( https://www.w3schools.com/css/css_margin.asp )。你可以在你的 CSS 中做到这一点。看看我在这个 css 文件的顶部做了什么。这应该有效。

body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
<a href="test_webpage.html#about">ABOUT</a>
</li>
<li>
<a href="test_webpage.html#products">PRODUCTS</a>
</li>
<li>
<a href="test_webpage.html#coupons">COUPONS</a>
</li>
<li>
<a href="test_webpage.html#feedback">FEEDBACK</a>
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>

关于html - 如何拥有根深蒂固的导航栏外观?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45089296/

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