Image with visual aid for what I am trying to do
你好，
我正在设计一个网页，我正在尝试让我的背景颜色覆盖整个页眉区域。但是，它始终有一个区域作为主页的背景。我试过添加边框并弄乱填充，但所做的只是减少标题内的信息。
有没有办法让页眉的背景颜色到达页面顶部并一直延伸到页面两边？
/* our body class */
body {
background-color: #0077BE;
}
header {
width: 100%;
background-color: #1C39BB;
color: white;
}<body>
<header>
<h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
<center>
<ul class='navList'>
<li class='navButton' a href='index.html'>Home</text>
<li>
<div class="dropdown">
<button class="dropbtn">⇓ Portfolio Items ⇓</button>
<div class="dropdown-content">
<a href="programPage.html">Programs</a>
<a href="otherProjects.html">Other Projects</a>
</div>
</div>
<li class='navButton' a href='videoInterview.html'>Video Interviews</text>
</ul>
</center>
</header>
</body>最佳答案
您正在挑战 body 的默认边距。只需从正文中删除默认边距:
body
{
background-color: #0077BE;
margin:0;
}
header
{
width: 100%;
background-color: #1C39BB;
color: white;
}<body>
<header>
<h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
<center>
<ul class='navList'>
<li class='navButton' a href='index.html'>Home</text>
<li>
<div class="dropdown">
<button class="dropbtn">⇓ Portfolio Items ⇓</button>
<div class="dropdown-content">
<a href="programPage.html">Programs</a>
<a href="otherProjects.html">Other Projects</a>
</div>
</div>
<li class='navButton' a href='videoInterview.html'>Video Interviews</text>
</ul>
</center>
</header>
</body>关于html - CSS/HTML 标题背景颜色未覆盖整个页面宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39429770/