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

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

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

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

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

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

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

代碼如下：

 1   <style> 
 2         .box{ 
 3             display: block; 
 4             width: 200px; 
 5             height: 20px; 
 6             background: gold; 
 7             overflow: hidden; 
 8             position: relative; 
 9             top: 100px; 
10             left: 200px; 
11             /*控制小三角的位置*/ 
12         } 
13         .ico{ 
14             font-style: normal; 
15             /*解決菱形傾斜*/ 
16             text-decoration: none; 
17             position: absolute; 
18             top: -8px; 
19             /*控制三角的大小和方向*/ 
20         } 
21     </style> 
22 </head> 
23 <body> 
24     <i class="box"> 
25         <s class="ico">◇</s> 
26     </i> 
27 </body>

網(wǎng)站題目：常見的小圖標(biāo)制作幾種方法
路徑分享：http://www.rwnh.cn/news4/172654.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁設(shè)計(jì)公司、域名注冊(cè)

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

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

中小型企業(yè)網(wǎng)站選擇網(wǎng)絡(luò)營(yíng)銷產(chǎn)品需要考慮哪些因素？ 2022-06-28
網(wǎng)站優(yōu)化人員怎么做才能確保seo搜索引擎快速索引網(wǎng)頁？ 2022-06-28
8個(gè)方面讓你成為優(yōu)秀的產(chǎn)品設(shè)計(jì)師 2022-06-28
網(wǎng)站開發(fā)語言PHP的優(yōu)勢(shì) 2022-06-28
應(yīng)用程序的訪問控制機(jī)制 2022-06-28
平面設(shè)計(jì)重要性 2022-06-28
如何網(wǎng)站優(yōu)化的錨文本鏈接？ 2022-06-28

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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