该系列的一部分：
如何使用 CSS 构建网站
本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。
在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。
介绍
在本教程中，您将使用 HTML 和 CSS重新创建演示网站的顶部标题部分。如果您想尝试或个性化尺寸，您可以将 Sammy 的信息换成您自己的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。
先决条件
要遵循本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的上一个教程中的说明设置必要的文件和文件夹。
将标题和副标题添加到您的网页标题
我们的网站标题包括标题（“Sammy the Shark”）、副标题（“SENIOR SELACHIMORPHA AT DIGITALOCEAN”）和一个小头像。这些元素被包装在一个<div>容器中，该容器使用 CSS 样式表中定义的类进行样式设置。您将通过添加文本和图像内容、为<div>容器创建一个类，然后将文本和图像内容包装在<div>分配了新创建的类的容器中来重新创建此部分。
要为您的网站添加标题和副标题，请<body>在index.html文件的开始和结束标记之间添加以下突出显示的代码片段。如果您想个性化您的网站，请将 Sammy 的信息换成您自己的信息：
. . .
<body>
<!--Header content-->
<h1>Sammy the Shark<h1>
<h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5>
</body>
在此代码段中，您添加了标题Sammy the Shark并为其分配了<h1>标题标签，因为它是该网页最重要的标题。您还添加了副标题SENIOR SELACHIMORPHA AT DIGITALOCEAN并为其分配了<h5>标题标签，因为它是一个不太重要的标题。
请注意，您还在标题之前添加了评论 <!--Header content-->。注释用于保存代码的解释性注释以备将来参考，浏览器不会向站点访问者显示（除非他们查看网页的源代码）。在 HTML 中，注释写在<!--和之间，-->如上面的代码片段所示。确保使用结束评论标签 ( -->)关闭您的评论，否则您的所有内容都将被注释掉。
向您的网页标题添加小型个人资料图像并为其设置样式
接下来，您将向标题部分添加一个小型个人资料图片。选择您想要包含在您的网站上的个人资料照片。如果您没有个人资料照片，您可以使用任何替代图片（例如Sammy的个人资料图片）或通过Getavataaars.com 等网站创建头像。
选择图像后，将其另存为images文件夹small-profile.jpeg。
现在，使用<img>标记和src分配了个人资料图像文件路径的属性将个人资料图像添加到网页。将以下突出显示的代码片段添加到您的index.html文件中，紧跟在该<!--Header content-->行之后和之前<h1>Sammy the Shark<h1>：
. . .
<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文件中：
. . .
/*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>标签中，如下所示：
. . .
<img src="images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
. . .
保存文件并在浏览器中重新加载它。您的个人资料图片现在应该具有 150 像素的高度、圆形和黄色边框：
在下一步中，您将对标题、副标题和个人资料图片整体应用其他样式。
使用 CSS 设计和定位标题内容
您现在将使用 CSS定义一个类来设置标题内容的样式和位置。返回styles.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，teal，navy，blue，maroon，和aqua）来改变这个属性的颜色值。 - 该
margin:30px;声明在元素的周长和视口或任何周围元素的周长之间创建了 30 像素的边距。 - 该
font-size:20px;声明同时增加标题和字幕的大小。
保存您的styles.css文件。接下来，您将把这个header类应用到您的标题内容。返回index.html页面并将标题内容（您已经添加到文件中）包装在一个<div>指定了header类的标签中：
. . .
<!--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文件并在浏览器中重新加载它。您的标题、副标题和个人资料图片现在应该<div>根据您在header类中声明的规则在容器内设置样式：
结论
您现在已经使用 HTML 和 CSS 在您的网页上重新创建了演示网站的标题部分。您使用<div>容器和 CSS 类添加并设置了标题、副标题和个人资料图像的样式。如果您有兴趣，可以通过修改标题内容的 CSS 规则来继续探索设计的可能性。
准备好后，您可以继续学习下一个教程，在那里您将重新创建演示站点的第二部分。
