自学前端——第十一天

最新推荐文章于 2024-07-25 11:52:08 发布

m0_74758366

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量44

点赞数

分类专栏：自学前端文章标签： html 前端 css html5 css3

本文链接：https://blog.csdn.net/m0_74758366/article/details/128686414

版权

自学前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术。其原理是：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要接受请求、发送一次图片即可。

精灵技术主要针对于背景图片的使用。

使用方法：

利用background-position来移动图片，将精灵图上需要的部分移到对应的格子里即可。

注意事项：

在移动精灵图时，要记住向右是x轴的正方向，向下是y轴的正方向。所以一般情况下background-position都是负值。

实践：

素材：

<!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: 56px;
            height: 56px;
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat -183.7px 0px;
        }

        .box2 {
            width: 23px;
            height: 23px;
            margin: 200px auto;
            background: url(images/sprites.png) no-repeat -157px -107px;
        }
    </style>
</head>

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

</html>

2.字体图标（iconfont）

字体图标可以避免精灵图存储空间大、失真、不宜更换等缺点，它展示的是图标，但是本质上属于字体。一般页面中一些简单的小图标都是使用字体图标。

2.1 字体图标下载

推荐下载网站：

icomoon字库：http://icomoon.io

阿里iconfont字库：http://www.iconfont.cn/

2.2 字体图标的引入

0.进入网站后，点击右上角的应用程序按钮：

然后就可以选择自己想要的图标了

之后选择下载：

1.在上面网站下载之后会生成一个压缩包，将其解压到本地，然后寻找到其中的fonts文件夹

2. 将fonts文件放入页面文件的根目录下

3.在css样式中全局声明字体

在压缩包自带的css文件里复制如图所示的代码，将其放到css文件中

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

4.在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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?uddjma');
            src: url('fonts/icomoon.eot?uddjma#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?uddjma') format('truetype'),
                url('fonts/icomoon.woff?uddjma') format('woff'),
                url('fonts/icomoon.svg?uddjma#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .box1 {
            font-family: 'icomoon';
            font-size: 100px;
            /* font-weight: 900; */
            color: skyblue;
        }
    </style>
</head>

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

</html>

2.3字体图标的追加

有时在工作中我们需要额外添加新的字体图标，此时我们并不需要从头开始选择，可以往原有的文件中添加所需的新图标即可。

来到网站，先进入应用程序，再点击左上角的按钮：

然后找到刚刚下载的压缩包解压到的地方，选择如图框选的文件

会弹出对话框询问是否保留以及下载的字体图标，按需选择之后就可以自行添加其它图标并下载了。

3.CSS三角

网页中常见一些三角，这些三角可以直接使用CSS画出来。

<!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: 0;
            height: 0;
            border-top: 10px pink solid;
            border-left: 10px blue solid;
            border-right: 10px green solid;
            border-bottom: 10px red solid;

        }
    </style>
</head>

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

</html>

如上面的代码，将一个盒子的长宽均设为0，然后设定