如何使用CSS在您的网站上创建特色报价框（第6节）

介绍

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

先决条件

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

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

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

样式.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 像素，以便为页面底部留出一些空间。如果您想了解有关其他声明的更多信息，请查看本教程系列中有关设置 content、padding、borders 和边距。

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

保存 styles.css 文件。

添加特色报价部分

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

索引.html

. . .

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

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

结论

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

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