溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下html頁面怎么引入小圖標的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
角標的實現可以直接使用定位去將角標定位到右上角，不過這樣的方式并不好看（而且角標內的字體可能是特殊定制過的藝術字）。
另外兩種圖標本質上是一張圖片，也是利用將圖片絕對定位到相應的地方就可以實現了（也可以使用background屬性去實現，這種方法更好（因為減少了html標簽））
最基本的實現方式只要學習了HTML與CSS就會操作，所以小編就放源代碼了（如果連最基本的方式都不會，建議先前往W3Cschool學習相關的前端知識吧）
在基礎方式上你會發現一個頁面要用到的圖片實在是太多了，加載這些圖片需要與瀏覽器進行很多·次的請求。這時侯出現了一種新的技術（其實只是對原有技術的更好的使用）。就是雪碧圖，雪碧圖的精髓就是將這些小圖標合在一張圖片中，在請求數據的時候就避免了多次請求。這樣在早期有助于降低帶寬和服務器的壓力，同時也對渲染有所幫助（一次獲取全部小圖標進行渲染）（上述的三種小圖標統統都可以用雪碧圖實現）。
這是一張雪碧圖，在調用圖的時候本質上還是使用background屬性去進行圖片的切割和定位。源代碼如下（相關css為了展示方便卸載了style標簽中）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg-icon_diamond{width: 34px; height: 32px;background: url('css_sprites.png') -10px -10px;}
.bg-icon_fire{width: 30px; height: 36px;background: url('css_sprites.png') -118px -10px;}
.bg-icon_bag {width: 28px; height: 34px;background: url('css_sprites.png') -168px -10px;}
.bg-icon_game {width: 34px; height: 32px;background: url('css_sprites.png') -64px -10px;}
.bg-icon_person {width: 32px; height: 34px;background: url('css_sprites.png') -10px -62px;}
.bg-icon_time {width: 32px; height: 32px;background: url('css_sprites.png') -62px -62px;}
</style>
</head>
<body>
<div class="bg-icon_diamond"></div>
<div class="bg-icon_fire"></div>
<div class="bg-icon_bag"></div>
<div class="bg-icon_game"></div>
<div class="bg-icon_person"></div>
<div class="bg-icon_time"></div>
</body>
</html>以上就是“html頁面怎么引入小圖標”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
