如何使用CSS构建网站的AboutMe部分（第2部分）

介绍

在本教程中，您将使用 CSS 重新创建演示网站的第二部分。如果您想个性化尺寸，请随意切换 Sammy 的信息。您在此处学习的方法可以应用于其他 CSS/HTML 网站项目。

该网站的第二部分包含两个内容框，一个包含文本，一个包含大型个人资料照片：

先决条件

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

您需要将个人资料图片放置在右侧的内容框中。如果您没有个人资料图片，您可以使用此图片进行演示。

注意：要下载大档案图像，请访问此链接并单击图像上的CTRL + Left Click（Mac）或Right Click（Windows）并选择“将图像另存为”并将其另存为 large-profile.jpeg 到您的 images 文件夹。

在继续之前，请确保您选择的图像以 large-profile.jpeg 的形式保存在 images 文件夹中。

为文本和图像内容框创建样式规则

要创建这两个内容框，您将首先在 styles.css 文件中定义一个列类，用于为此设置框的样式。然后将文本和图像内容添加到 HTML 文档中。

返回到 styles.css 文件，将以下规则集复制并粘贴到文件底部：

样式.css

. . .
/* Include padding and border in total box size*/
* {
  box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column-2 {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

在继续之前，让我们停下来了解一下我们刚刚添加的每个规则集。

第一个规则集使用“*”选择器来指示规则集应该应用于 all HTML 元素和类。此规则集将 box-sizing 属性的值声明为 border-box，它将 CSS 元素的总计算宽度和高度调整为包括其填充和边框大小。默认情况下，元素的宽度和高度大小仅指元素的内容。将 box-sizing 属性设置为 border-box 可以更轻松地调整元素的总宽度和高度，并且有助于在页面上布局内容。要了解有关 CSS 框模型的更多信息，请访问我们的教程如何使用 CSS 调整 HTML 元素的内容、填充、边框和边距。

第二个规则集定义了一个名为“column-2”的类，其大小规范允许在页面上并排显示两列。这个类被命名为 column-2 以区别于其他大小的列，您将在本教程后面创建类。

此规则集中的一些值和属性尚未在本教程系列中介绍：

float:left; 声明指示元素将浮动到它所在容器的左侧（在本例中为视口本身），同时允许周围的内容围绕其右侧流动。您也可以将 float 属性值设置为 right 或 none，尽管本教程使用 left 值来重新创建演示网站。
width: 45%; 声明将元素的宽度设置为其容器宽度的 45% of，在本例中是视口本身。当您希望元素根据其所在容器的大小调整大小时，以百分比而不是像素设置大小（例如宽度）可能很有用。但是请注意，动态调整大小可能是一个棘手的过程——有多种方法可以创建响应式元素，这些方法可以在 CSS 中建立基础后实现。
background-color: #FEDE00; 将元素的背景颜色设置为 HTML 颜色代码“#FEDE00”。
line-height:2; 增加了行间距。
如果您想了解有关其他声明的更多信息，请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分。

添加“关于我”内容框

接下来，您将使用刚刚创建的 column-2 类将“关于我”内容框添加到网页中。保存 styles.css 文件并返回到 index.html 文件。在标题部分中添加以下代码 after 结束 </div> 标记，before 结束 </body> 标记：

. . .
<!--Section 2: About me-->

        <div class="column-2">
            <h1>About me</h1>
            <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
            <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
        </div>

. . .

保存文件并将其加载到浏览器中。有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件。

您现在应该在网页左侧有一个包含文本的黄色框：

请注意，您的网页仍应包含您在本系列上一篇教程中添加的标题内容如何使用 CSS 构建网站的标题部分。

让我们简要回顾一下这段 HTML 代码是如何运作的：

此代码片段 () 的第一行是有助于组织 HTML 内容的注释。它不会显示在浏览器中，并包含在此处以供稍后参考。
下一行代码 (<div class="column-2" style="background-color:#FEDE00;">) 创建一个 <div> 容器，为其分配您在 styles.css 文件中定义的 column-2 类的样式，并使用HTML 内联 style 属性为其分配背景颜色 #FEDE00。
后面的 <h1> 和 <p> 标签包含您要插入“关于我”文本框的文本。请注意，您已经关闭了本文末尾的 <div> 容器。如果您打算个性化您的网站，您可以用您自己的文字切换 Sammy 的文字。

添加个人资料图像内容框

接下来，您将添加包含大型配置文件图像的第二个内容框。有多种方法可以添加图像框，但在本教程中，您将通过将其设置为另一个 <div> 容器的背景图像来添加大轮廓图像，该容器分配了 column-2班级。

返回styles.css文件，在文档底部添加如下代码片段：

样式.css

. . .
/* Large profile image */
.large-profile {
  background: url('../images/large-profile.jpeg');
  background-size: cover;
  background-position: center;
}

在此代码片段中，您添加了一条注释来组织 CSS 规则，并创建并定义了新类 large-profile，您将使用它来设置包含大型配置文件图像的框的样式。在此规则集中，background: url('images/large-profile.jpeg'); 声明告诉浏览器使用在指定文件路径中找到的图像作为元素的背景图像。 background-size: cover 声明适合图像以覆盖其所在容器的空间，background-position:center 声明使图像在容器内居中。

接下来，您将添加一个分配了 column-2 类和 large-profile 类的 <div> 容器，以重新创建具有大轮廓图像的框。

保存 styles.css 文件并返回到 index.html 文件。在第一列的结束 </div> 标记下方和结束 </body> 标记上方添加以下代码片段：

. . .
  <div class="column-2 large-profile">
  </div>

此代码片段根据 column-2 类和 profile-picture 类中声明的规则创建一个 <div> 容器。

保存这两个文件并在浏览器中重新加载 index.html。您的网页现在应该具有演示网站中样式的文本框和图像框（如本教程的第一张图片所示）。请注意，您的网页还应该包含您在上一个教程中创建的标题内容。您可以继续试验 column-2 和 profile-large 类中声明的值，以探索不同的设计可能性。

结论

您现在已经使用 CSS 创建了文本和图像的内容框并设置了样式。在下一个教程中，您将重新创建网站的第三部分。在此过程中，您会将内容排列成两行，每行四个框，并应用一个伪类，当用户将光标悬停在框上时，该伪类将导致框改变颜色。