HTML(Basic) Chapter7(Pink) CSS高级技巧1

最新推荐文章于 2023-09-26 07:15:00 发布

FeverTwice

最新推荐文章于 2023-09-26 07:15:00 发布

阅读量155

点赞数

分类专栏： CSS之路 HTML之路

本文链接：https://blog.csdn.net/LeungSr/article/details/118938321

版权

CSS精灵图字体图标网页图标背景定位资源优化

关键词由CSDN通过智能技术生成

HTML之路同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS之路

27 篇文章 0 订阅

订阅专栏

文章目录

1.CSS精灵图
2.字体图标
写在最后

1.CSS精灵图

为什么使用精灵图？

网页有许多图片，但网页的图像过多时候，服务器就会频繁发送和接收信息请求，使得服务器的压力过大
将网页中的许多小图片整合到一张大的图片中，使得浏览器一次请求就足够了

精灵图使用的核心

针对于一些小的背景图片使用，就是把多个小的背景图片整合到一张大的图片中
这个大的图片也称为sprites 精灵图或者雪碧图
移动背景图片的位置，使用background-position，移动x轴，y轴
左负右正
上负下正

案例一(网页图标.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background-color: pink;
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat;
            background-position: -182px 0;
        }

        .box2 {
            width: 27px;
            height: 25px;
            background-color: pink;
            margin: 200px;
            background: url(images/sprites.png) no-repeat -155px -106px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

最终效果

案例二（英文找字母.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
        }

        .p {
            width: 100px;
            height: 112px;
            background: url(images/abcd.jpg) no-repeat -493px -273px;
        }

        .i {
            width: 60px;
            height: 108px;
            background: url(images/abcd.jpg) no-repeat -327px -142px;
        }

        .n {
            width: 108px;
            height: 109px;
            background: url(images/abcd.jpg) no-repeat -215px -141px;
        }

        .k {
            width: 105px;
            height: 114px;
            background: url(images/abcd.jpg) no-repeat -495px -142px;
        }
    </style>
</head>

<body>
    <span class="p"></span>
    <span class="i"></span>
    <span class="n"></span>
    <span class="k"></span>
</body>

</html>

2.字体图标

使用精灵图的缺点

图片文件有大小
图片放大缩小会失真
一旦图片制作完成则更换会十分复杂

字体图标看起来是图标，但是其本身是个文字，放大缩小不失真

字体图标的优点

轻量级
灵活性
兼容性

简单的文字用字体图标，复杂的用精灵图

字体图标的下载

下载网址：

icomoon字库 https://icomoon.io/
阿里字库 https://www.iconfont.cn/

一定要把下载包里面的东西放到根目录下

复制以下CSS代码

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

或者打开文件夹下面的CSS包，复制里面的第一段

字体图标的使用

找到demo.html里面有所有的索引
打开后复制小方框到html的正文盒子中去

注意，一定要把iconmoon里面的fonts文件夹放到根目录下，不然难以显示，没有整出来的同志可以回去看看自己的目录文件夹有没有错

源代码（overflow_1.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nwbxhf');
            src: url('fonts/icomoon.eot?nwbxhf#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nwbxhf') format('truetype'),
                url('fonts/icomoon.woff?nwbxhf') format('woff'),
                url('fonts/icomoon.svg?nwbxhf#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>