作者|李娜

*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。

hello，各位小伙伴。不知道最近大家有没有想我呀，李娜我可是很想大家的哦！

今天李娜给大家带来了很给力的知识哦！

第一部分

小编在之前的文章中给大家介绍了页面中加载图片需要用到img标签。

复习一下知识点：

具体的就不提了，不知道的可以百度，或看之前的文章。那我们在布局页面的时候会用到很多的小图标像这种

我们一般的想法就是把他分割成一块块的小图标并且分别命名然后用img图像标签将他们逐一加载到我们的网页中。

这样做的话首先我们面临的问题就是分解图标的工作量比较大。而且我们分割图片的美观也很难保证。

so，今天小编给大家分享的技术就是可以不用分割图片，直接把我们想要的图标导进我们的页面。

第二部分

那么今天小编就给大家演示一下，页面左侧菜单的制作。

首先我们需要一个放满图标的图片，就拿我们上图为例。然后打开我们的编辑器，新建页面，小编这里使用ul列表来做这个菜单。

之后就是设计样式了。页面格式初始化是必须要做的。然后为我们的页面设置背景图片，注意是图片哦！！！

那么效果如图：

那么下面我们要做的就是，给图标定位了让他可以显示我们想要的图标。

第三部分

知识点来了！！！

知识点一：

我们的背景图片加载的是以左上角为原点显示的图标 ，图标的大小与我们设置的容器大小有关。

只要我们定位左上角这点的位置就可以了（就像我们学过的坐标系）。比如我现在想让这个二维码一样的图标作为第一个图标显示在我的菜单了列表中。通过使用测量工具（说实话我就是用QQ截图工具来测的）假想这就是个坐标系。那么这个图标的左上角做标为（0，120px）。想要让这个二维码的图标位于原点的位置，就要把整个图片向上移动120px单位（就是-120px）。那么我们编写代码的时候。设置的原点坐标就是（0，-120px）。

代码：

效果：

就是这样逐一设置我们想要的图标就可以了！！！

知识点二：

cursor:pointer;

在我们的属性设置中，出现了这样的一句代码。他的效果就是：当我们的鼠标滑到图标上的时候，会变成小手指。

知识点三：

list-style:none;

列表样式：无。

在之前的文章中有介绍。列表是有默认样式的。（忘记的小伙伴可以会去看看 ，默认样式少不说，效果真是懒得吐槽了！！） 于是，我们就可以用这条属性来清除列表的默认属性。想想就很开心呢！！

来来大家一起动手试一下，看我们可以利用上面的素材做出什么样子的效果！（参考如下）

当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！

有疑问？请留言！关注Java联盟微信公众号，看Java要闻！