echarts 图像样式_如何使用HTML向您的网页添加个人资料图像并为其设置样式

谁践踏了优雅 2022-11-28 15:26 140阅读 0赞

echarts 图像样式

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

In this tutorial, we’ll walk through the steps of adding and styling the top profile image as displayed in the [demonstration site][].

在本教程中，我们将逐步[演示][demonstration site]添加和样式化[演示站点中][demonstration site]显示的顶部轮廓图像的步骤。

Before we get started, you may want to pick a personal profile photo for including on your site. If you don’t have a profile photo, you can use any image for demonstration purposes or create an avatar through a site like [Getavataaars.com][]. Otherwise, you can use the image from our demonstration site by downloading the image [here][]. (For a refresher on how to add images to webpages using HTML, please visit our tutorial [HTML Images][] from earlier in this tutorial series.)

在我们开始之前，您可能需要选择一个个人资料照片，以包括在您的网站中。 如果您没有个人资料照片，则可以使用任何图像进行演示，也可以通过[Getavataaars.com之][Getavataaars.com]类的网站创建头像。 否则，您可以通过在[此处][here]下载图像[来][here]使用我们演示站点中的图像。 (有关如何使用HTML向网页添加图像的更新，请访问本系列教程前面的[HTML图像][HTML Images]教程。)

Once you’ve selected an image, save it as `small-profile.jpg` in your `image` folder.

选择图像后，将其另存为`image`文件夹中的`small-profile.jpg` 。

Paste the following `<img>` element in between the opening and closing `<div>` tags you created in the [last tutorial][] like so:

将以下`<img>`元素粘贴到在上[一教程中][last tutorial]创建的开始和结束`<div>`标签之间，如下所示：

...
    <div style="background-image: url('ImageLocation');
      background-size: cover; height:540px;">
    <img src="ImageFilePath" style="height:150px;">
    </div>
    ...

Make sure to switch out the highlighted `src` address with the file path of your profile image. Note that we are also using the style attribute to specify the height of the image to 150 pixels. The `<img>` element does not require a closing tag.

确保使用个人资料图片的文件路径切换突出显示的`src`地址。 请注意，我们还使用style属性将图像的高度指定为150像素。 `<img>`元素不需要结束标记。

Save and reload the page in the browser to check your results. You should receive the following:

在浏览器中保存并重新加载页面以检查结果。 您应该收到以下信息：

Next, let’s add properties to our `style` attribute that will give our image a circular shape, a yellow border, and a top margin that push our image 80 pixels down from the top of the page.

接下来，让我们向`style`属性添加属性，这些属性将使图像为圆形，黄色边框和顶部边距，从而将图像从页面顶部向下推80个像素。

Add the highlighted properties to your `<img>` element:

将突出显示的属性添加到您的`<img>`元素中：

Make sure you still have the correct file path of your image listed as the `src` address. Save the file and reload it in the browser. You should receive something like this:

确保您仍将图像的正确文件路径列为`src`地址。 保存文件并将其重新加载到浏览器中。 您应该会收到以下信息：

Before moving on, let’s briefly pause to study the code modifications we just made. Setting the `border-radius` value to 50% gives the image a circular shape. Setting the border value to `10px solid #FEDE00` gives the image a solid border that is 10 pixels wide and has the hexadecimal color value `#FEDE00.` The `margin-top` property sets the top margin to 80 pixels.

在继续之前，让我们暂时停下来研究一下我们刚刚进行的代码修改。 将`border-radius`值设置为50％可使图像呈圆形。 将边框值设置为`10px solid #FEDE00`将为图像提供10像素宽的实心边框，并具有十六进制颜色值`#FEDE00.` `margin-top`属性将上边距设置为80像素。

You should now know how to add and style a profile image to your website with HTML. We are now ready to add a title and subtitle to the webpage in the next tutorial.

现在，您应该知道如何使用HTML向您的网站添加个人资料图像并为其设置样式。 现在，我们准备在下一个教程中向网页添加标题和副标题。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-add-and-style-a-profile-image-to-your-webpage-with-html][https_www.digitalocean.com_community_tutorials_how-to-add-and-style-a-profile-image-to-your-webpage-with-html]

echarts 图像样式

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[demonstration site]: https://html.sammy-codes.com/
[Getavataaars.com]: https://Getavataaars.com
[here]: https://html.sammy-codes.com/images/small-profile.jpeg
[HTML Images]: https://www.digitalocean.com/community/tutorials/html-images
[last tutorial]: https://www.digitalocean.com/community/tutorials/adding-a-background-image-to-the-top-section-of-your-webpage-with-html
[https_www.digitalocean.com_community_tutorials_how-to-add-and-style-a-profile-image-to-your-webpage-with-html]: https://www.digitalocean.com/community/tutorials/how-to-add-and-style-a-profile-image-to-your-webpage-with-html