今天小编给大家分享一下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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
