如何使用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.
如果更改此框中的内容量,可能需要相应调整高度,否则可能溢出或被截断。 如果您想了解有关其他声明的更多信息,请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分。
在继续之前保存 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 文本内容。
保存文件并重新加载浏览器以检查表格是否正确显示。 您现在应该有两个并排显示的表格,如本教程开头的图像所示。
结论
您现在已经使用样式表添加了文本内容。 您可以尝试调整大小并添加行和列,以针对不同目的自定义表格。 在下一个教程中,您将在您的网站上创建一个带有大型特色报价的内容框。