CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧

「已注销」

已于 2022-02-26 10:44:04 修改

阅读量371

点赞数

文章标签： css css3 html

于 2022-02-21 00:36:18 首次发布

本文链接：https://blog.csdn.net/weixin_62302666/article/details/123010520

版权

2.4字体图标的引用（以icomoon为例）

2.5字体图标的追加（以icomoon为例）

5.vertical-align 属性应用

1.精灵图

1.1为什么需要精灵图

精灵技术目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

1.2精灵图（sprites）的使用

1.3精灵图使用案例

参考代码：

    <style>
        div {
            display: inline-block;
            margin-left: 10px;
            background-repeat: no-repeat;
            background-image: url(../jpgs/精灵图.png);
        }
        
        .letter1 {
            width: 110px;
            height: 115px;
            background-position: -491px -272px;
        }
        
        .letter2 {
            width: 61px;
            height: 113px;
            background-position: -326px -136px;
        }
        
        .letter3 {
            width: 123px;
            height: 118px;
            background-position: -249px -270px;
        }
        
        .letter4 {
            width: 109px;
            height: 116px;
            background-position: -491px -141px;
        }
    </style>
</head>

<body>
    <div class="letter1"></div>
    <div class="letter2"></div>
    <div class="letter3"></div>
    <div class="letter4"></div>
</body>

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引用（以icomoon为例）

第一步：

下载压缩文件后把fonts文件夹放在页面根目(建议把全部文件放在页面根目录下面，否则可能demo.html页面出错)

录下

font文件中的4个字体文件：

第二步：

字体文件引入到CSS样式中

以上样式可以在压缩文件中style.css记事文本中复制

第三步：

打开压缩文件中的demo.html复制想要的图标到html标签中

第四步：

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧

目录1.精灵图1.1为什么需要精灵图1.2精灵图（sprites）的使用1.3精灵图使用案例2.字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的下载2.4字体图标的引用（以icomoon为例）2.5字体图标的追加（以icomoon为例）3.CSS三角3.1三角的实现3.2京东三角4.CSS用户界面样式4.1什么时界面样式4.2鼠标样式4.3轮廓线outline4.4防止拖拽文本域resize5....
复制链接

扫一扫