1.精灵图

1.1为什么需要精灵图

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标签中

第四步：

css中给使用文字图标的标签声明字体 (复制上面)

        span {
            font-family: 'icomoon';
        }

参考示例：

    <style>
        /* 字体声明（复制） */
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?hugv7x');
            src: url('fonts/icomoon.eot?hugv7x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?hugv7x') format('truetype'), url('fonts/icomoon.woff?hugv7x') format('woff'), url('fonts/icomoon.svg?hugv7x#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span {
            /* 给使用文字图标的标签声明字体 */
            font-family: 'icomoon';
            font-size: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 复制html文件中想要的文字图标 -->
    <span></span>
</body>

展示效果：

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

3.CSS三角

3.1三角的实现

        div {
            width: 0;
            height: 0;
            /* 下两行代码为照顾低版本浏览器 */
            line-height: 0;
            font-size: 0;
            border: 50px solid transparent;
            border-left-color: pink;
        }

3.2京东三角

三角+子绝父相定位

    <style>
        .sanjiao {
            position: absolute;
            top: -10px;
            right: 10px;
            width: 0;
            height: 0;
            /* 下两行代码为照顾低版本浏览器 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
        
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="jd">
        <div class="sanjiao"></div>
    </div>
</body>