如何使用 CSS 创建网站的 "关于我 "部分（第 2 部分）

介绍

在本教程中,您将使用CSS重建示范网站(https://css.sammy-codes.com)的第二部分。如果您想要个性化大小,请自由将Sammy的信息换成自己的信息。

网站的第二部分包含两个内容框,其中一个包含文本,另一个包含大档案照片:

Screenshot of the second section of the website

前提条件

要遵循本教程,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中所指示的 How To Set Up You CSS and HTML Practice Project。

您需要在右侧的内容框中放置个人资料图像. 如果您没有个人资料图像,您可以使用 此图像用于演示目的。

<$>[注] 注 :要下载大型个人资料图像,请访问 此链接并点击CTRL + Left Click (在 Mac 上)或Right Click (在 Windows 上),然后选择 Save Image As并将其保存为large-profile.jpeg到您的images文件夹中。

在继续之前,请确保您选择的图像在您的图像文件夹中保存为large-profile.jpeg。

创建文本和图像内容框的风格规则

要创建这两个内容框,你首先将定义一个列类在styles.css文件中,以此为目的的格式框,然后将文本和图像内容添加到HTML文档。

返回「styles.css」文件,并在文件底部复制并粘贴下列规则集:

 1[label styles.css]
 2. . .
 3/* Include padding and border in total box size*/
 4* {
 5  box-sizing: border-box;
 6}
 7
 8/* Create two equal columns that float next to each other */
 9.column-2 {
10  float: left;
11  width: 45%;
12  padding: 40px;
13  padding-left:70px;
14  padding-right: 70px;
15  height: 475px;
16  margin:30px;
17  margin-right:30px;
18  margin-bottom: 70px;
19  background-color: #FEDE00;
20  line-height:2;
21}

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

第一个规则集使用"QQ"选择器表示规则集应被应用到_所有_HTML元素和类. 此规则表宣布 " 箱大小 " 财产值为 " 边框 " ,将CSS元素的总计算宽度和高度调整为_包括_其垫装和边框大小。 默认情况下,元素的宽度和高度大小仅指元素的_content_. 将 " box-sizing " 财产放入 " 边境箱 " ,便于调整一个元素的总宽度和高度,在一页上列出内容时可以有所帮助。 欲了解更多CSS框模型,请访问我们的教程如何调整带有CSS的HTML元素的内容、铺设、边框和边框.

第二套规则定义了一个名为列2的类(https://andsky.com/tech/tutorials/how-to-create-classes-with-css),其尺寸规格允许在页面上旁边显示两个列,这个类被命名为列2,以区分它与其他大小的列,您将在教程中稍后创建类。

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

  • 联合国 浮动:左; ' 声明指示其内容器左侧(此处为取景口本身)的元素_浮动-,同时允许周围内容绕其右侧流动。 您也可以将浮动属性值设定为对或无,尽管该教程使用左`值重新创建演示网站。
  • 联合国 `宽度:45%; ' 声明将元素的宽度定为其容器的宽度的45%,在此情况下是取景口本身。 设置以百分比表示的大小(如宽度)而不是以像素表示的大小,如果您希望元素根据其所在容器的大小调整大小,则会有所帮助。 然而,请注意,动态大小可能是一个棘手的过程——有多种方法来创造反应性要素,这些方法可以在CSS中建立基础后实施。
  • 联合国 `背景- 颜色: # FEDE00; ' 设定元素的背景颜色为 HTML 颜色代码 "# FEDE00" 。
  • 联合国 `行高:2;'增加行间距。
  • 联合国 如果您想更多地了解其他声明,请审查本教程系列关于设置 [内容] (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-margin-size-of-an-html-element-with-css)等大小的上一节. .

添加关于我内容框

接下来,您将使用您刚刚创建的列2类添加到网页的关于我内容框。 保存您的styles.css文件,然后返回index.html文件。 在您的标题部分添加以下代码 after 关闭 </div> 标签, before 关闭 </body> 标签 :

 1. . .
 2<!--Section 2: About me-->
 3
 4        <div class="column-2">
 5            <h1>About me</h1>
 6            <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>
 7            <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
 8        </div>
 9
10. . .

保存文件并将其加载到浏览器中. 有关下载 HTML 文件的说明,请访问我们的教程步骤 如何在您的浏览器中查看离线 HTML 文件。

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

Webpage with yellow div box with un-styled text

请注意,您的网页仍然应该包含您在本系列的上一本教程中添加的标题内容(How To Build the Header Section of Your Website With CSS)(https://andsky.com/tech/tutorials/how-to-build-the-header-section-of-your-website-with-css-section-1)。

让我们简要看看这个HTML代码是如何工作的:

  • 联合国 此代码片段(QQ!- 第2节:About me--QQ)中的一行是帮助组织HTML内容的评论. 它将不显示在浏览器中, 并列入此处供日后参考 。
  • 联合国 下行代码 (QQDiv class="栏-2" 样式="背景-颜色:# FEDE00;"QQ). 创建 QQdiv>容器, 指定您在 styles.cs' 文件定义的 栏- 2 类的样式, 并使用 HTML 内置 ` style' 属性来指定背景颜色 QQFEDE00 。
  • 后面的 QQh1 和 QQp 标签包含您要插入的文本 关于我 文本框 。 注意您已关闭此文本末尾的 QQDiv>` 容器 。 若您计划将网站个性化, 可以将 Sammy 的文本与自己的文本切换。 .

添加配置文件图像内容框

接下来,您将添加包含大型配置文件图像的第二个内容框. 有几种方式可以添加图像框,但在本教程中,您将添加大型配置文件图像,使其成为另一个<div>容器的背景图像,分配给列2类。

返回styles.css文件,并在文档底部添加以下代码片段:

1[label styles.css]
2. . .
3/* Large profile image */
4.large-profile {
5  background: url('../images/large-profile.jpeg');
6  background-size: cover;
7  background-position: center;
8}

在此代码片段中, 您添加了一个注释来组织 CSS 规则, 并创建和定义了新类大可视性 , 您将使用该类来给持有大可视图像的框样式 。 在此规则集中, 背景 : url('images/ group-profile.jpeg' ) ; 声明 要求浏览器使用在指定文件路径中发现的图像作为元素的背景图像 。 背景大小:封面 ' 申报符合覆盖集装箱所处空间的图像,背景位置:中心 ' 申报中心为集装箱内图像.

接下来,您将添加一个<div>容器,该容器分配给列2类和大档案类,以重新创建带有大档案图像的框。

保存你的 styles.css 文件,然后返回 index.html 文件. 在第一个列的关闭标签 </div> 下方和关闭标签 </body> 上方添加下面的代码片段:

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

此代码片段创建一个<div>容器,按照列2类和配置文件图像类声明的规则进行样式化。

保存两个文件并重新加载index.html到您的浏览器中。 您的网页现在应该有文本框和图像框,如在演示网站的样式(并在本教程的第一张图像中描绘)。 请注意,您的网页还应该包含您在上一本教程中创建的标题内容。

结论

您现在已经创建并使用CSS进行文本和图像的内容框。在下一个教程中,您将重建网站的第三部分。在这个过程中,您将将内容安排为四个字段的两行,并应用一个假类类,这将导致用户用其标记器向它们转换颜色。

Published At
Categories with 技术
Tagged with
comments powered by Disqus