作者|李娜
*本文為「Java聯盟」原創內容，轉載無需授權，請保留署名來源。
hello，各位小伙伴。不知道最近大家有沒有想我呀，李娜我可是很想大家的哦！
今天李娜給大家帶來了很給力的知識哦！
第一部分
小編在之前的文章中給大家介紹了頁面中加載圖片需要用到img標簽。
復習一下知識點：
具體的就不提了，不知道的可以百度，或看之前的文章。那我們在布局頁面的時候會用到很多的小圖標像這種
我們一般的想法就是把他分割成一塊塊的小圖標并且分別命名然后用img圖像標簽將他們逐一加載到我們的網頁中。
這樣做的話首先我們面臨的問題就是分解圖標的工作量比較大。而且我們分割圖片的美觀也很難保證。
so，今天小編給大家分享的技術就是可以不用分割圖片，直接把我們想要的圖標導進我們的頁面。
第二部分
那么今天小編就給大家演示一下，頁面左側菜單的制作。
首先我們需要一個放滿圖標的圖片，就拿我們上圖為例。然后打開我們的編輯器，新建頁面，小編這里使用ul列表來做這個菜單。
之后就是設計樣式了。頁面格式初始化是必須要做的。然后為我們的頁面設置背景圖片，注意是圖片哦！！！
那么效果如圖：
那么下面我們要做的就是，給圖標定位了讓他可以顯示我們想要的圖標。
第三部分
知識點來了！！！
知識點一：
我們的背景圖片加載的是以左上角為原點顯示的圖標 ，圖標的大小與我們設置的容器大小有關。
只要我們定位左上角這點的位置就可以了（就像我們學過的坐標系）。比如我現在想讓這個二維碼一樣的圖標作為第一個圖標顯示在我的菜單了列表中。通過使用測量工具（說實話我就是用QQ截圖工具來測的）假想這就是個坐標系。那么這個圖標的左上角做標為（0，120px）。想要讓這個二維碼的圖標位于原點的位置，就要把整個圖片向上移動120px單位（就是-120px）。那么我們編寫代碼的時候。設置的原點坐標就是（0，-120px）。
代碼：
效果：
就是這樣逐一設置我們想要的圖標就可以了！！！
知識點二：
cursor:pointer;
在我們的屬性設置中，出現了這樣的一句代碼。他的效果就是：當我們的鼠標滑到圖標上的時候，會變成小手指。
知識點三：
list-style:none;
列表樣式：無。
在之前的文章中有介紹。列表是有默認樣式的。（忘記的小伙伴可以會去看看 ，默認樣式少不說，效果真是懶得吐槽了！！） 于是，我們就可以用這條屬性來清除列表的默認屬性。想想就很開心呢！！
來來大家一起動手試一下，看我們可以利用上面的素材做出什么樣子的效果！（參考如下）
當然有什么問題或者需要李娜我給大家分享講解的地方，可以在留言區留言告訴我，整理后會在公眾號里面分享講解哦！
