常見(jiàn)的小圖標(biāo)制作幾種方法

2022-06-28 分類(lèi)：網(wǎng)站建設(shè)

在我們制作網(wǎng)頁(yè)時(shí)，例如導(dǎo)航等，會(huì)遇到很多的一些小圖標(biāo)，這里以京東的小三角
（如下圖）舉例，來(lái)介紹常用的一些方法。

方法一：也是比較簡(jiǎn)單的一種方法。用background 來(lái)做，
一般用一個(gè)行內(nèi)標(biāo)簽如 i ，s 等先轉(zhuǎn)換顯示方式 display：block；，然后設(shè)置寬高。

如果不是單一的圖片，而是精靈圖，則應(yīng)該設(shè)置background-position 屬性

方法二：我認(rèn)為是一種比較有技巧性的方法，老版jd就這么玩的。

具體來(lái)說(shuō)就是用兩個(gè)標(biāo)簽父標(biāo)簽控制圖標(biāo)的位置，子標(biāo)簽里是一個(gè)菱形依靠定位來(lái)展示大小
和方向，父標(biāo)簽第二作用是依靠overflow：hidden；截掉子標(biāo)簽超出的部分。是不是很巧妙。

代碼如下：

 1    
22  
23  
24      
25         ◇ 
26      
27

分享題目：常見(jiàn)的小圖標(biāo)制作幾種方法
文章URL：http://jinyejixie.com/news/172654.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、電子商務(wù)、軟件開(kāi)發(fā)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

常見(jiàn)的小圖標(biāo)制作幾種方法