在本教程中，我们将学习如何使用<div>容器来构建网页的顶部部分。我们将使用该style属性来指定<div>容器的高度，应用背景图像，并指定背景图像应覆盖<div>容器的整个区域。
在开始之前，我们需要一个背景图片。您可以下载并使用我们演示站点的背景图片用于本教程，或者您可以选择一张新图片。（有关如何使用 HTML 向网页添加图像的复习，请访问本教程系列前面的教程HTML 图像）。
选择背景图像后，将图像保存在images文件夹中为background-image.jpg.
接下来，将突出显示的代码片段粘贴到您的index.html文件中开始<body>标记下方和结束</body>标记上方：
. . .
<body>
<!--First section-->
<div style="background-image: url('Image_Location');
background-size: cover; height:480px; padding-top:80px;">
</div>
</body>
...
确保切换Image_Location带有图像文件路径的文本，不要忘记添加结束</div>标记。
请注意，我们添加了注释<!--First section-->以帮助组织我们的 HTML 代码。注释是浏览器忽略的一段代码。注释用于帮助向开发人员解释或组织代码。它们是用开始标签<!--和结束标签创建的-->。
我们还指定了height480 像素和padding-top80 像素，这将在<div>元素顶部和我们放置在其中的任何内容之间创建 80 像素的空间。请注意，padding-top除非我们在下一步中将内容放入其中，否则您将无法看到该值的效果。
保存文件并在浏览器中重新加载它。你应该会收到这样的信息：
或者，您可以使用背景颜色而不是背景图像。要使用背景颜色，请将<div>您刚刚创建的元素代码片段替换为以下突出显示的<div>元素代码片段，如下所示：
. . .
<body>
<!--First section-->
<div style="background-color: #f4bc01; height:480px; padding-top:80px;">
</div>
</body>
...
保存文件并在浏览器中重新加载它以检查您的结果。背景图像现在应替换为大小相同但具有纯黄色的容器。
如果您将<div>站点上的<div>容器与演示站点上的相同容器进行比较，您可能会注意到网页的<div>容器被一小部分空白包围。这个边距是因为默认情况下所有 HTML 页面都被自动设置为有一个小边距。
要删除此边距，我们需要向开始<body>标记添加一个样式属性<body>，将 HTML 页面元素的边距设置为 0 像素。找到打开<body>你的index.html文件，并突出显示的代码进行修改：
<body style=”margin:0;” >
在浏览器中保存并重新加载文件。现在顶部<div>容器周围应该没有白边。
您现在应该知道如何添加<div>带有背景图像的容器来构建网页的顶部部分。
