如何使用CSS将您的教育历史和技能添加到您的网站(第5节)

来自菜鸟教程
跳转至:导航、​搜索

介绍

在本教程中,您将使用 HTML 表格和 CSS 类重新创建 演示网站 的“教育”部分和“技能”部分(或第五部分)。 如果您希望个性化您的网站,请随时使用您自己的信息切换 Sammy 的信息。 您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

要构建这些部分,您将创建一个 CSS 类来设置两个大小相等的内容框,这些内容框可以并排放置在网页上。 然后,您将在每个框中添加一个表格,您将在其中添加文本内容。

先决条件

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

创建两个大小相同的表格并为其设置样式

首先,将以下代码片段复制并粘贴到 styles.css 文件的底部:

样式.css

. . .

/* Fifth section */

.column-2a {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:60px;
  height:450px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 40px;
  background-color:white;
}

此代码片段创建了类 column-2a,它类似于您在本系列的 上一个教程 中创建用于设置“关于”部分样式的 column-2 类,除了它的height 属性设置为 450px. 如果更改此框中的内容量,可能需要相应调整高度,否则可能溢出或被截断。 如果您想了解有关其他声明的更多信息,请查看本教程系列中有关设置 contentpaddingmargins 的大小的前面部分。

在继续之前保存 styles.css 文件。

接下来,返回 index.html 文件并在最后一个关闭 </div> 标记之后粘贴以下代码片段:

索引.html

. . .

<!--Section 5: Education and Skills-->

<div class="column-2a">
<h2>Education</h2>
  <table class="table-style">
    <tr>
      <td>Barnacle Bootcamp</td>
      <td>2020</td>
    </tr>
    <tr>
      <td>Seaweed University</td>
      <td>2019-2020</td>
    </tr>
    <tr>
      <td>Highwater High School</td>
      <td>2018-2019</td>
    </tr>
    <tr>
      <td>Middle-Sized Pond Middle School</td>
      <td>2017-2018</td>
    </tr>
    <tr>  
      <td>Minnow Elementary School</td>
      <td>2016-2017</td>
    </tr>    
    <tr>
      <td>Phytoplankton Preschool</td>
      <td>2015-2016</td>
    </tr>
  </table>
</div>

此代码片段使用“column-2a”类创建一个列,并插入一个使用 上一教程 中创建的 table-style 类样式的表格。 在表格内,您放置了教育历史内容。 <tr> 标签打开一个表 row,其中插入了以下三组表 data(用 <td> 标签标记)。 要了解有关 HTML 表格如何工作的更多信息,请访问我们的教程 如何使用 HTML 创建表格

保存文件并重新加载浏览器以检查表格是否正确显示。 您应该有如下屏幕截图所示的表格:

接下来,您将添加列出 Sammy 技能的第二个表。 返回到 index.html 文件并在最后一个关闭 </div> 标记之后粘贴以下代码片段:

索引.html

. . .

  <div class="column-2a">
     <h2>Skills</h2>
    <table class="table-style">
      <tr>
        <td>Social Media</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Public Speaking</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Internet Ethics Ambassador</td>
        <td>⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Content production</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td> HTML</td>
        <td>⭐⭐⭐</td>
      </tr>
      <tr>
        <td> CSS</td>
        <td>⭐⭐⭐</td>
      </tr>
    </table>
  </div>

此代码片段的工作方式与前面的代码片段完全相同:它使用 column-2a 类创建一个列,并插入一个以 table-style 类为样式的表格。 请注意,您正在使用表情符号来创建星形图像。 您可以将任何表情符号用作 HTML 文本内容。

保存文件并重新加载浏览器以检查表格是否正确显示。 您现在应该有两个并排显示的表格,如本教程开头的图像所示。

结论

您现在已经使用样式表添加了文本内容。 您可以尝试调整大小并添加行和列,以针对不同目的自定义表格。 在下一个教程中,您将在您的网站上创建一个带有大型特色报价的内容框。