day11-图标库&后台

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

html css 专栏收录该内容

11 篇文章

订阅专栏

图标库本地使用：

    <style>
        /* 第一步:拿到对应的模块 */
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont/iconfont.woff2?t=1665193418490') format('woff2'),
                url('iconfont/iconfont.woff?t=1665193418490') format('woff'),
                url('iconfont/iconfont.ttf?t=1665193418490') format('truetype');
        }

        /* 第二步:图标需要有修饰有样式 */
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            color: pink;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        i:hover{
            color: red
        }
    </style>
</head>

<body>
    <!-- 第三步:拿到相应的图标结构 -->
    <i class="iconfont">&#xe643;</i>
    <i class="iconfont">&#xe786;</i>
    <i class="iconfont">&#xeabb;</i>
</body>

2.、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 把第一种的第一步和第二步简化了 -->
    <link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
    <!-- 不成文的规定 -->
    <!-- 第一个iconfont是固定写法 表示当前需要css样式修饰 -->
    <i class="iconfont icon-shoujitaobao"></i>
</body>
</html>

    <!-- 脚本语言 html+css -->
    <script src="iconfont/iconfont.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- svg H5中新增加的图片格式 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jingdong-"></use>
    </svg>
</body>

图标库在线使用：

    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('http://at.alicdn.com/t/c/font_3690121_sxuikxk628m.woff2?t=1665198247827') format('woff2'),
                url('http://at.alicdn.com/t/c/font_3690121_sxuikxk628m.woff?t=1665198247827') format('woff'),
                url('http://at.alicdn.com/t/c/font_3690121_sxuikxk628m.ttf?t=1665198247827') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <span class="iconfont">&#xe643;</span>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3690121_rh8gmc15vn8.css">
</head>
<body>
        <span class="iconfont icon-shouye"></span>
</body>
</html>

    <script src="http://at.alicdn.com/t/c/font_3690121_rh8gmc15vn8.js"></script>
    <style>
            .icon {
              width: 1em;
              height: 1em;
              vertical-align: -0.15em;
              fill: currentColor;
              overflow: hidden;
            }
            </style>
</head>
<body>
        <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qqgoutou"></use>
              </svg>
</body>
</html>

总结

1.在工作中OA后台是非常常见的需求需要使用多种单位混合实现布局

2.在OA中会有很多的bug

- 当浏览器的可视区域变小的时候,会有部分的盒子掉下来

- 当父级没有设置高度,但是子级元素脱离文档流(高度塌陷)

- 当右侧的内容较多的时候不会出现滚动条