我有一个学校的项目，建立一个网站。我试图使导航栏和标题背景不同的颜色，但它似乎没有达到页面的结尾。我附上了一个截图，你可以看到我的标题背景色（白色和灰色）没有达到年底，你仍然可以看到蓝色的背景。附上我的代码以及：
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Details</a>
</li>
<li>
<a href="#">On Me</a>
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
<a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
<a href="https://www.roblox.com/home" target="_blank">Roblox</a>
<a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
<a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
</div>
</div>
</li>
<li>
<a href="#">Contact me</a>
</li>
</ul>
</div>
</body>
</html>这是HTML CSS是：
body {
background-color: darkcyan;
font-family: Calibri;
}
.Headers{
background-color:white;
}
#secondheader{
margin-top:0px;
margin-bottom:1px;
opacity:50%;
}
.Menu{
background-color:gray;
}
.Menu a{
background-color:gray;
font-size:20px;
padding:4px;
padding-right:15px;
text-decoration:none;
color:black;
}
.Menu a:visited{
color:black;
}
.Menu a:hover{
background-color:white;
}
.Menu ul{
margin-top:0px;
padding-left:0px;
}
.Menu li{
display:inline;
padding:5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:white;
min-width:160px;
z-index:-1;
}
.dropdown-content a{
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
2条答案
按热度按时间6ie5vjzr1#
在大多数主流浏览器中，所有边的默认边距都是8px。
因此需要覆盖margin CSS属性以删除页眉上的空格。
此外，
h1标签有默认的margin-top和margin-bottom，所以你也需要覆盖这些样式。一个二个一个一个
iszxjhcz2#
确保将以下内容添加到您的样式中：
如果你还有什么问题，一定要问！祝你有美好的一天：）