我有一个学校项目要建一个网站。我试图使导航栏和标题背景颜色不同，但它似乎没有到达页面的末尾。我附上了一张截图，你可以看到我的标题背景颜色(白色和灰色(没有达到末尾，你仍然可以看到蓝色背景。附上我的代码以及：
<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>
这是htmlcss是：
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;
}
网站图片
在大多数主流浏览器中，所有边的默认边距为8px。
因此，需要覆盖marginCSS属性以删除标头上的空格。
body {
margin: 0;
}
此外，h1标记具有默认的margin-top和margin-bottom，因此您也需要覆盖这些样式。
<h1 style="margin-bottom:0px;margin-top: 0;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
body {
background-color: darkcyan;
font-family: Calibri;
margin: 0;
}
.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;
}<body>
<div class="Headers">
<h1 style="margin-bottom:0px;margin-top: 0;">
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>确保将其添加到您的样式中：
*
{
padding: 0%;
margin: 0%;
}如果你还有任何问题，一定要问！祝你度过美好的一天：(