在本教程中，我们将演练添加演示网站.)中显示的Top Profile图像并设置其样式的步骤
在我们开始之前，您可能想要挑选一张个人资料照片以包括在您的网站上。如果您没有头像，您可以使用任何图片进行演示，也可以通过Getavataaars.com.)等网站创建头像否则，您可以通过下载图像here.来使用我们演示站点中的图像(有关如何使用HTML向网页添加图像的复习内容，请访问我们的教程How to Add Images to Your WebPage Using (来自本教程系列前面部分的。)
一旦你选择了一个图片，将它保存为small-profile.jpg在你的image文件夹中。
将下面突出显示的<img>元素粘贴到您在Last tutorialLike：
1...
2<div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">
3 <img src="ImageFilePath" style="height:150px">
4</div>
5...
确保将突出显示的src地址与您的个人资料镜像的文件路径互换。请注意，我们还使用style属性将图像的高度指定为150像素。<img>元素不需要结束标记。
在浏览器中保存并重新加载页面以检查结果。您应该会收到以下内容：
上的个人资料图像
根据我们使用style属性指定的高度，您的个人资料图像应该显示为150像素高。它还应该位于<div>容器顶部下方80个像素的位置，因为我们在上一个tutorial.]中为<div>容器指定了top-padding属性接下来，让我们向style属性添加一些属性，这些属性将为我们的图像提供圆形和黄色边框。我们还将添加[Alternative text](https://andsky.com/tech/tutorials/how-to-add-images-to-your-webpage-using-html alternative-text-for-accessibility)，以提高使用屏幕阅读器的站点访问者的可访问性。
将突出显示的属性添加到您的<img>元素：
1<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark.">
确保您仍然将镜像的正确文件路径列为src地址。保存文件并在浏览器中重新加载。你应该收到这样的东西：
在继续之前，让我们先停下来研究一下我们刚才所做的代码修改。将edge-Radius‘值设置为50%会使图像呈现圆形。将边框值设置为10px Solid# FEDE00将为图像提供一个10像素宽的实心边框，并具有十六进制颜色值 FEDE00。‘
你现在应该知道如何用HTML在你的网站上添加和设计一个个人资料图片。我们现在准备在下一个教程中为网页添加标题和副标题。