CSS笔记——精灵图，字体图标，CSS三角

2024-03-07 21:28:45

一、精灵图

1.1 为什么需要精灵图？

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。CSS精灵技术也称为CSS Sprites CSS雪碧。

其原理是：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图sprites的使用

精灵技术针对一些背景小图片，把许多个小图片整合到一张大图片。
这个大图片也成为sprites 精灵图或雪碧图。
移动背景图片位置，backgroung-position。
移动距离就是这个目标图片的x和y轴坐标。注意网页中的坐标有所不同。
因为一般情况是往上往左移，所以是负值。
使用精灵图时，要精准测量图片的距离和大小。(用PS的切片测量，双击看坐标和大小)

1.3 精灵图缺点

图片文件较大。
图片本身放大和缩小会失真。
一旦图片制作完成，更换复杂。

二、字体图标iconfont

1.1 关于字体图标

主要用于显示网页中的通用常用小图标（搜索图片，下拉等）。

字体图标 展示的图标，本质是字体 结构样式简单

优点：

轻量级
灵活性。随意改变大小阴影颜色透明旋转等
兼容性

1.2 下载引用图标

icomoon字库。外服太慢啦
阿里iconfont

1.3 字体图标引用

把下载的fonts文件夹放到项目根目录。
...复制代码

    @font-face {
        font-family: 'icomoon';
        src:  url('fonts/icomoon.eot?p4ssmb');
        src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('fonts/icomoon.woff?p4ssmb') format('woff'),
        url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    span {
        font-family: 'icomoon';
    }

1.4 字体图标追加

把压缩包里的selection.json重新上传，然后选中想要的新图标，重新下载并覆盖文件。(icomoon)

三、CSS三角

        div {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
        }
        .div1 {      
            border-top: 20px solid red;
            border-bottom: 20px solid rebeccapurple;
            border-right: 20px solid black;
            border-left: 20px solid yellow;
        }
        .div2 {      
            border: 20px solid transparent;;
            border-top: 20px solid red;
        }

        .div3 {      
            position: absolute;
            top: -30px;
            border: 20px solid transparent;;
            border-bottom: 20px solid thistle;
        }
        .box {
            position: relative;
            height: 300px;
            width: 300px;
            background-color: thistle;
        }

码农公寓