介绍
在本教程中,您将使用 CSS 添加一个引用到您的网站,如显示在 [演示网站]的第六部分(https://css.sammy-codes.com/)。 您可以使用本节来引用您最喜欢的引用,关于您的工作的见证,或向您的网站访问者发送的信息。 如果您愿意,您也可以将此引用链接到另一个网页。 您在这里使用的方法可以应用到其他 CSS/HTML 网站项目。
前提条件
要遵循本教程,请确保您已设置必要的文件和文件夹,如在本系列的上一个教程中所指示的 How To Set Up You CSS and HTML Practice Project。
为特征引用部分创建风格规则
若要创建引用部分,您将创建一个类来格式化容器和一个类来格式化引用文本。
1[label styles.css]
2. . .
3
4/* Section 6: Featured Quote */
5
6.column-quote {
7 width: 90%;
8 height: 475px;
9 padding: 40px;
10 padding-left:70px;
11 padding-right: 70px;
12 padding-bottom:100px;
13 margin:auto;
14 margin-bottom:150px;
15 border: 20px solid #FEDE00;
16}
17
18.quote {
19 font-size:80px;
20 font-weight:bold;
21 line-height: 1;
22 text-align: center;
23}
在这个代码片段中,你已经添加了 CSS 评论 /* 第 6 节: 特征引用 * / 来标记 CSS 代码的这个部分. 然后,你已经定义了类 column-quote,你将使用它来格式化引用框,并指定了容器的大小,垫子,边界和边界。
请注意,差值设定为 " 自动 " ,横向将集装箱放在页中。 此外,下方边距被设定为200像素,以给页下方一些空间. 如果要更多地了解其他声明,请回顾本教程系列关于设置 [内容] (https://andsky.com/tech/tutorials/how-to-understand-the-css-box-model# how-to-adjust-the-content-size-of-an-html-element-with-css), [铺设] (LINK1), [边界] (https://andsky.com/tech/tutorials/how-to-understand-the-css-box-model how-to-adjust-the-border-size,-color,-and-style-of-an-html-element-with-css), [边距] (https://andsky.com/tech/tutorials/how-to-understand-the-css-box-model# how-to-adjust-the-margin-size-of-an-html-element-with-css) 等大小的上一节.
您还创建了引用类,您将使用它来格式化所示引用文本。 请注意,您已将行高度属性设置为1,从默认设置为 1.6 缩小了文本行之间的空间。
保存styles.css文件。
添加所示引用部分
返回「index.html」文件. 最后关闭「