如何使用CSS构建网站的标题部分（第1部分）

介绍

在本教程中，您将使用 HTML 和 CSS 重新创建演示网站的顶部标题部分。如果您想试验或个性化尺寸，您可以使用您自己的信息切换 Sammy 的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

将标题和副标题添加到您的网页标题

我们的网站标题包括标题（“Sammy the Shark”）、副标题（“SENIOR SELACHIMORPHA AT DIGITALOCEAN”）和小型个人资料图片。这些元素被包装在一个 <div> 容器中，该容器使用 CSS 样式表中定义的类进行样式设置。您将通过添加文本和图像内容来重新创建此部分，为 <div> 容器创建一个类，然后将文本和图像内容包装在分配了新创建的 <div> 容器中班级。

要为您的站点添加标题和副标题，请在 index.html 文件的开始和结束 <body> 标记之间添加以下突出显示的代码片段。如果您想个性化您的网站，请使用您自己的信息切换 Sammy 的信息：

索引.html

. . .

<body>

<!--Header content-->
   <h1>Sammy the Shark<h1>
   <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
</body>

在此代码段中，您添加了标题 Sammy the Shark 并为其分配了 <h1> 标题标签，因为它是该网页最重要的标题。您还添加了副标题 SENIOR SELACHIMORPHA AT DIGITALOCEAN 并为其分配了 <h5> 标题标签，因为它是一个不太重要的标题。

请注意，您还在标题前添加了注释 。注释用于保存对代码的解释性注释以供将来参考，浏览器不会向站点访问者显示（除非他们查看网页的源代码）。在 HTML 中，注释写在  之间，如上面的代码片段所示。确保使用结束评论标签 (-->) 关闭您的评论，否则您的所有内容都将被注释掉。

为您的网页标题添加和设置小型个人资料图像

接下来，您将向标题部分添加一个小的个人资料图像。选择要包含在您的网站上的个人资料照片。如果您没有头像，您可以使用任何其他图片（例如 Sammy 的头像）或通过 Getavataaars.com 等网站创建头像。

选择图像后，将其作为 small-profile.jpeg 保存到 images 文件夹。

现在，使用 <img> 标签和分配了您的个人资料图片文件路径的 src 属性将个人资料图片添加到网页。在  行之后和 <h1>Sammy the Shark<h1> 行之前将以下突出显示的代码片段添加到您的 index.html 文件中：

索引.html

. . .

  <body>
  
  <!--Header content-->
       <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
       <h1>Sammy the Shark<h1>
       <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </body>
</html>

保存文件并将其加载到浏览器中。您的网页现在应该有标题、副标题、个人资料图片和背景图片：

请注意，该图像与演示站点中的配置文件图像的样式不同。要在演示站点中重新创建配置文件图像的形状、大小和边框，请将以下规则集添加到您的 styles.css 文件中：

样式.css

. . .
/*Top header profile image*/
.profile-small {
   height:150px;
   border-radius: 50%;
   border: 10px solid #FEDE00;
}

在继续之前，让我们回顾一下您刚刚添加的每一行代码：

/*Top header profile image*/ 是用于标记代码的 CSS 注释。
文本 .profile-small 指的是我们使用规则集定义的类的名称。此类将在下一步中应用于配置文件图像。
声明 height:150px; 将图像的高度设置为 150 像素，并自动调整宽度以保持图像大小比例。
声明 border-radius: 50%; 将图像的边缘四舍五入为圆形。
声明 border: 10px solid #FEDE00; 为图像提供了一个 10 像素宽的实心边框，并具有 HTML 颜色代码 #FEDE00。

保存文件并返回到 index.html 文件，将 profile-small 类添加到 <img> 标签，如下所示：

索引.html

. . .
       <img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
. . .

保存文件并在浏览器中重新加载。您的个人资料图像现在应该具有 150 像素的高度、圆形和黄色边框：

在下一步中，您将对标题、副标题和个人资料图像整体应用其他样式。

使用 CSS 设置标题内容的样式和位置

您现在将使用 CSS 定义一个 class 来设置标题内容的样式和位置。返回到 styles.css 文件并通过添加以下 CSS 规则集创建 header 类：

样式.css

. . .
/* Header Title */
.header {
  padding: 40px;
  text-align: center;
  background: #f9f7f7;
  margin:30px;
  font-size:20px;
}

让我们暂停一下以了解您刚刚添加的每一行代码：

/* Header Title */ 是注释，浏览器不显示。
文本 .header 是我们使用此规则集创建和定义的类选择器的名称。
padding: 40px; 声明在内容和元素边框之间创建了 40 像素的填充。
text-align: center; 声明将内容移动到元素的中心。您还可以将值调整为 left 或 right 以相应地对齐文本。
background: #f9f7f7; 声明将颜色设置为演示网站中使用的特定 HTML 颜色代码。本教程不会涵盖本教程系列中的 HTML 颜色代码，但您也可以使用 HTML 颜色名称（black、white、gray、silver、 purple、red、fuchsia、lime、olive、green、yellow、[ X238X]、navy、blue、maroon 和 aqua）来更改此属性的颜色值。
margin:30px; 声明在元素的周长和视口或任何周围元素的周长之间创建了 30 像素的边距。
font-size:20px; 声明增加了标题和副标题的大小。

保存您的 styles.css 文件。接下来，您将把这个 header 类应用到您的标题内容中。返回 index.html 页面并将标题内容（您已经添加到文件中）包装在分配有 header 类的 <div> 标记中：

. . .
<!--Section 1: Header content-->
   <div class="header"> 
     <img src="images/small-profile.jpeg" class="small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
     <h1>Sammy the Shark<h1>
     <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
   </div> 
  </body>
</html>

保存 index.html 文件并在浏览器中重新加载。您的标题、副标题和个人资料图像现在应该根据您使用 header 类声明的规则在 <div> 容器中设置样式：

结论

您现在已经使用 HTML 和 CSS 在您的网页上重新创建了演示网站的标题部分。您使用 <div> 容器和 CSS 类添加并设置了标题、副标题和配置文件图像的样式。如果您有兴趣，可以通过修改标题内容的 CSS 规则来继续探索设计可能性。

准备好后，您可以继续下一个教程，您将在其中重新创建演示站点的第二部分。