gpt4 book ai didi

html - CSS/HTML 标题背景颜色未覆盖整个页面宽度

转载 作者:行者123 更新时间:2023-11-28 05:13:24 25 4
gpt4 key购买 nike

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">&#8659; Portfolio Items &#8659;</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">&#8659; Portfolio Items &#8659;</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/

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