Question

我有一个HTML主页，我想将页面的一部分更改为另一种颜色，我面临的问题是我希望整个页面的颜色。这是我要实现的示例：

我在这里尝试的代码似乎并没有更改div标签的整个页面背景颜色

body {
  background-color: coral;
}

<h1>The background-color Property</h1>
<div style="background-color:lightblue">
  <p>The background color can be specified with a color name.</p>
</div>

Answer 1

那很简单您可以将元素放在具有特定ID的部分中，例如：

 <section id='naturePart' >
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

，然后以这种外部，内联或内部方式之一为该部分编写css。

外部方式：创建一个像style.css这样的文件，并将其链接到您的html页面中

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

以您的style.css编写此代码：

 #naturePart{
    background-color: lightblue;
  }

以内联方式：

<section id='naturePart' style="background-color: lightblue">
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

请注意使用必须使用这种方式之一并且内联方式具有较高的优先级。如果您使用的是html4或最新版本，则可以使用章节中的div insted。

最好的问候

Answer 2

首先，对不起，您的问题不清楚。没有“ div标签的整个页面背景颜色”之类的东西。

我可以猜测一下，并假设您的意思是div的背景区域应与视口一样宽，即延伸到页面的边缘。在这种情况下，解决方法如下。

body {
  background-color: coral;
}

/* This could be done inline, but using a class will be more efficient if there
   are more of these divs on the screen */
div.highlight {
  background-color:lightblue;
  margin:0 -8px; padding:0 8px;
}

<h1>The background-color Property</h1>
<div class="highlight">
  <p>The background color can be specified with a color name.</p>
</div>

更改特定部分的背景颜色

2 个答案: