如何使用 HTML 为网页添加标题并为其设计样式

在本教程中,我们将向主页添加标题和副标题并设置其样式。对于演示站点,,我们使用的是Sammy的名字和Sammy的职称,但您可以在此处添加任何您喜欢的内容。对于该内容,我们将使用<h1>标题元素、<p>段落元素和<em>强调元素。

在您的个人资料<img>元素之后、</div>结束标签之前粘贴以下突出显示的代码片段:

1...
2<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; padding-top:80px;">
3<h1>Sammy the Shark</h1>
4<p><em>Senior Selachimorpha at DigitalOcean</em></p>
5</div>

确保使用您自己的信息更改文本。

保存文件并在浏览器中重新加载。你应该收到这样的东西:

标题和subtitle

此代码片段中使用的元素对我们的标题和副标题应用了一些轻便的样式。但是,如果我们希望标题和副标题的样式与演示站点的样式匹配,则需要添加额外的样式值。

要进行这些修改,我们将向这些元素添加style属性以设置其他属性。将突出显示的属性添加到您的<h1><p>元素中,如以下代码片段所示:

1<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>
2
3<p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>

保存文件并在浏览器中重新加载。你应该收到这样的东西:

Style title

这些样式属性将字体大小调整为30像素,并将字体颜色更改为白色。我们还向<h1>元素添加了10个像素的边距。

你现在应该知道如何使用HTML为你的网页添加标题和副标题,并设置它们的样式。在下一个教程中,我们将学习如何在您的网站上创建和链接到其他网页。

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