HTML用户交互图片设置

电脑

webstorm

在header中添加一个类，命名为login，然后在内部添加两个a标签，一个显示个人中心，一个显示退出登录。这两个设置完成之后，点击预览，我们可以看到刚才设置的内容已经显示在header中。

将我们的图片加载到login中显示，并且我们需要将图片分割成上下两部分显示在两个选项中，平铺在左右两侧，需要定位图片的准确坐标。

如果直接将图片设置在login中的话，两个类中会使用同一个图片，所以在我们的网页中会显示同一个笑脸图片而看不到月亮，我们需要再定义两个不同的类来放置我们的图片。

调节图片显示位置，调节margin设置，设置行高，字体颜色，完成设置之后，点击预览我们的设置效果，发现在每一个选项左侧都添加上了我们需要的这个图片。

想要知道我们使用的图片的大小可以打开这个图片，在右上角会有图片大小的显示，如图所示，这样有一个准确的像素大小之后我们可以更加精准的设置图片显示的位置。