介绍

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

站点的第二部分包含两个内容框，一个包含文本，一个包含大头像：

先决条件

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

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

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

在继续之前，请确保您选择的图像images以large-profile.jpeg.

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

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

返回styles.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;
}

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

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

所述第二规则集定义了类名为“列-2”与浆纱规范，允许对由侧的页面上显示侧两列。命名这个类是column-2为了将它与其他大小的列区分开来，您将在本教程的后面创建类。

本系列教程尚未涵盖此规则集中的某些值和属性：

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

添加“关于我”内容框

接下来，您将使用column-2刚刚创建的类将“关于我”内容框添加到网页中。保存styles.css文件并返回到index.html文件。添加以下代码后关闭</div>页眉部分的标签，前收盘</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="https://www.digitalocean.com/community/tutorial_series/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 代码是如何运作的：

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

添加个人资料图片内容框

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

返回styles.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声明中心容器内的图像。

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

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

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

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

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

结论

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