如何将背景颜色固定为标题？

Question

我试图为标题添加颜色，但设计很糟糕。我试着在 youtube 上观看视频，但它们无法帮助我解决位置和水平线错误。 https://imgur.com/a/c7eDeHi

我期待这样的事情油漆模型。 https://imgur.com/lGGPoZE

但是我的位置很差

<html>

<head>
  <style>
    h1 {
      text-align: left;
      color: #595959;
      background: #80ff80;
      width: 5000px;
      height: 60px;
    }
  </style>
</head>

<body bgcolor="#ffb84d">
  <h1>Test</h1>
</body>

</html>

固定位置，水平线

Answer 1

您需要将 body 和 heading 的 margin 设置为 0 以删除边框

body {
  margin: 0px;
  background-color: #ffb84d;
} 
h1 {
  margin: 0px;
  text-align:left;
  color:#595959;
  background-color: #80ff80;
 }

<html>
 <body>
  <h1>Test</h1> 
 </body>
</html>

Answer 2

要删除页面周围的填充和边距，您可以使用：

html, body{
 padding: 0;
 margin: 0;
}

要为 body 添加背景颜色，您还必须在样式中指定它。你可以 select 它与 body:

body{
 background: #ffb84d;
}

如果您还需要标题的按钮边框，可以将以下规则添加到 h1：

h1 {
 text-align:left;
 color:#595959;
 background: #80ff80;
 width:100%;
 height:60px;
 /* Specify a bottom border like this: */
 border-bottom: 1px solid grey;
}

如何将背景颜色固定为标题？

How to fix the Background Color to heading?

html

css

css-position