前端笔记记录---精灵图的实现

最新推荐文章于 2024-04-29 13:34:43 发布

兰兰的风。。。

最新推荐文章于 2024-04-29 13:34:43 发布

阅读量534

点赞数

分类专栏： # html # css 文章标签： html css

本文链接：https://blog.csdn.net/pilgrim_121/article/details/111219700

版权

css 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

8 篇文章 1 订阅

订阅专栏

声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！

为什么使用精灵图？

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。所以，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

原理

将网页中的一些背景图像整合到一张大图中（精灵图），当网页元素需要使用时，定位到精灵图中不同位置的某个小图即可。
如：我们使用这样一张精灵图作为背景图：在这里插入图片描述

实现

效果：图标横排显示在页面，当点击图标后，可进入相应的页面
在这里插入图片描述
代码：

<!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>
		.list {
			/*使列表显示在屏幕右上方*/
			position: absolute;
			right: 100px;
			top: 5px;
		}
		.list li {
			/*使列表水平排列*/
			list-style: none;
			width: 30px;
			height: 30px;
			float: left;
			margin-right: 20px;
		}
		.list li a {
			display: inline-block;
			width: 30px;
			height: 30px;
		}
		.list .qq {
			background: url(imgs/sprite.png) no-repeat -20px -15px;
		}
		.list .post {
			background: url(imgs/sprite.png) no-repeat -20px -80px;
		}
		.list .wechat {
			background: url(imgs/sprite.png) no-repeat -20px -145px;
		}
		.list .sina {
			background: url(imgs/sprite.png) no-repeat -20px -208px;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li class="qq"><a href="https://www.qq.com/"></a></li>
		<li class="post"><a href="https://tieba.baidu.com/"></a></li>
		<li class="wechat"><a href="https://web.wechat.com/"></a></li>
		<li class="sina"><a href="https://www.sina.com.cn/"></a></li>
	</ul>
</body>
</html>

兰兰的风。。。

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端笔记记录---精灵图的实现

声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！为什么使用精灵图？一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。所以，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。原理将网页中的一些背景图像整合到一张大图中（精灵图），当网页元素需要使用时，定位到精灵图中不同位置的某个小图即可。如：我们使用这样一张精灵图作为背景图：实现效果：点击图标后，可以进入相应的页面。.
复制链接

扫一扫