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