介绍

在本教程中，您将使用 CSS 向您的网站添加特色引语，如演示网站的第六部分所示。您可以使用此部分来展示最喜欢的名言、关于您的工作的见证或给您的网站访问者的信息。如果您愿意，您也可以将此报价超链接到另一个网页。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

先决条件

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

为特色报价部分创建样式规则

要创建特色引述部分，您将创建一个类来设置容器的样式和一个类来设置特色文本的样式。在您的styles.css文件中，添加以下代码片段：

. . .

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}

在此代码片段中，您添加了 CSS 注释/* Section 6: Featured Quote */来标记 CSS 代码的这一部分。然后，您定义了类column-quote，您将使用它来设置引用框的样式，并指定容器的大小、填充、边距和边框。

请注意，边距设置为auto，这将容器在页面中间水平居中。此外，底部边距设置为 200 像素，以便为页面底部留出一些空间。如果您想了解有关其他声明的更多信息，请查看本系列教程中有关设置内容、填充、边框和边距大小的前面部分。

您还创建了quote类，您将使用它来设置特色引文的文本样式。请注意，您已将该line-height属性设置为1，这会从默认设置 1.6 缩小文本行之间的空间。尝试更改此值以确定您喜欢的行距。

保存styles.css文件。

添加特色报价部分

返回index.html文件。在最后一个结束</div>标记之后，添加以下代码片段：

. . .

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>
<div class="column-quote">
  <p class="quote">There are many fish in the sea, but only one Sammy!</p>
</div>

在继续之前，让我们停下来检查每一行代码：

• HTML 注释<!--Section 6: Featured Quote-->标记index.html文件中的这部分代码，浏览器不会显示。
• 该<div class="section-break"> </div>元素使用您可能在之前的教程中定义的类来创建分节符。如果您没有遵循该教程，则可以通过将 CSS 规则添加.section-break {margin:50px; height:500px;}到您的styles.css文件来添加该类。此元素在上一部分的内容和特色引述部分之间创建空间。
• 该<div class="column-quote">标签和它的结束</div>标记创建与您声明的样式规则的精选语录的容器column-quote在您的类styles.css文件。
• 在<p class="quote">There are many fish in the sea, but only one Sammy! </p>插入文本内容到<div>它根据你申报的规则会在上面的线和样式打开容器quote在你的类选择styles.css文件。如果您更改文本内容的长度，您可能需要修改本节中的类之一来更改字体大小或容器大小，以确保文本仍然适合。

保存index.html文件并在浏览器中重新加载它。您的网页现在应该在具有纯色背景的透明容器中显示一个大型精选报价：

结论

在本教程中，您在网站上创建了一个特色文本框，并针对不同的网站布局修改了其样式。如果您希望将您的报价超链接到新的网站页面，请访问我们的教程如何使用 HTML 创建和链接到其他网站页面。

在本系列教程的下一个也是最后一个教程中，您将创建一个静态页脚，当访问者向下滚动页面时，它“固定”在视口底部的固定位置。