本文介绍了CSS中的精灵技术，包括其原理、优点和缺点，如减少HTTP请求，提高页面加载速度。接着讨论了如何使用CSS创建小箭头，并详细解释了滑动门技术的基本概念，这种技术利用精灵图和padding来适应文字内容变化。
一、精灵技术
英文名css sprites
精灵技术也叫做精灵图、雪碧图、css贴图定位、css图像拼合
1、技术原理
将很多的小图片拼合到一张大图上，通过background-image、background-repeat、background-position属性将需要显示的小图标正确显示出来就可以了
2、优缺点
（1）优点
- 减少网页htttp请求次数，提高页面的响应速度（加载速度）
- 减少命名困扰
- 更换风格比较方便
（2）缺点
必须要限制显示容器的尺寸，需要计算
二、css小箭头
制作思路：制作两个一模一样的小三角，让他们不完全重叠就可以实现小箭头
- 制作两个三角形
- 通过定位让两个三角形完全重叠
- 调整上方的三角形的偏移属性，让他们不完全重叠，同时给这个三角形的边框颜色调整为跟大背景一致的颜色
以下代码是制作朝左的三角形的代码：
<!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>
.wrap {
position
最低0.47元/天 解锁文章
扫一扫
2460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
