实现侧边栏工具（2）使用图标字体方式

kycool 发布于2019-08-21 13:33 / 585人阅读

摘要：前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具使用背景图片方式，可以看出这种方式的优缺点是结构简单，容易阅读和理解使用图片浏览器兼容性好，可以兼容等低版本浏览器缺点就是使用了大量的图片，对性能有一定的影响，并且不利于

前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具（1）使用背景图片方式，可以看出这种方式的优缺点是

HTML结构简单，容易阅读和理解

使用图片浏览器兼容性好，可以兼容ie6等低版本浏览器

缺点就是使用了大量的图片，对性能有一定的影响，并且不利于修改。

下面介绍一种使用图标字体来实现侧边栏工具条

HTML结构

html结构外层写一个toolbar类div
每一个内部工具条写一个a标签，内部包含两个span，一个span用来包含图标字体和具体的文字，另一个span用来包含二维码，如果不需要显示二维码，则只需一个span

CSS样式

首先需要去网上下载所需的字体图标样式，这类网站有很多，这里使用https://icomoon.io/app/#/select/font
网站具体界面如下

在selection中查看所选择的字体图标，选好之后，Generate Font
打包下载选择的字体图标

解压缩，查看文件目录结构，将其中的fonts文件夹和style.css样式文件复制到css文件夹下面

打开style.css，将里面的内容复制到自己的SCSS文件中

将其中的字体图标类复制到上面的html结构中

外部工具条总体样式固定定位

.toolbar{
    position: fixed;
    right: 10%;
    top: 50%;    
}

a标签样式

.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    margin-top: 10px;
    z-index: 1000;
//a标签hover时产生的效果
    &:hover{
        .toolbar-icon{
            top: -$toolbar-height;
        }
        .toolbar-text{
            top: 0;
        }
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

a标签的子元素，相对于a标签绝对定位，用来包含图标字体和文本字体，设置溢出隐藏

.tooblar-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    overflow: hidden;
}

图标字体样式

.toolbar-icon{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #6F6F6F;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: $toolbar-height;
    @include transition(top 0.5s);
}

文本字体样式

.toolbar-text{
    position: absolute;
    left: 0;
    top: $toolbar-height;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #BE0201;
    padding-top: 8px;
    font-size: 14px;
    font-family: "微软雅黑";
    color: #fff;
    text-align: center;
    line-height: 1.2;
    @include transition(top 0.5s);

}

二维码公共部分设置

.toolbar-layer{
    cursor: pointer;
    position: absolute;
    right: $toolbar-width;
    bottom: -1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    transform: scale(0.01);
    z-index: 1000;
    transform-origin: right bottom;
    transition: all 1s;
    opacity: 0;
    filter: alpha(opacity=0);

}

.toolbar-layer-app{
    height: 112px;
    background-position: 0 -198px; 
}
.toolbar-layer-channel{
    height: 112px;
    background-position: 0 -198px
}

GPU云服务器云服务器动态侧边栏显示隐藏侧边栏 html侧边栏 jquery侧边栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87721.html

实现侧边栏工具（2）使用图标字体方式

摘要：前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具使用背景图片方式，可以看出这种方式的优缺点是结构简单，容易阅读和理解使用图片浏览器兼容性好，可以兼容等低版本浏览器缺点就是使用了大量的图片，对性能有一定的影响，并且不利于前面讲了一下使用背景图片来实现侧边工具栏的一个实现效果，实现侧边栏工具（1）使用背景图片方式，可以看出这种方式的优缺点是 HTML结构简单，容易...

Yangder 2019-08-01 15:07 评论0 收藏0
Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

摘要：本章集中介绍四个重要的小功能回到顶部浮动按钮矢量图标页脚沉底和粘性侧边栏。因为我们想在全站都拥有这个按钮，所以将刚写好的模块引用到中在后面引入注意模块用到了，因此要在后面引入。本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。这几个功能与Django基本没啥关系，更多的是前端知识，但是对博客网站都很重要，问的读者也比较多，因此也集中讲一下好了。回到顶...

lovXin 2019-07-31 10:17 评论0 收藏0
绝对定位(Absolute positioning)

摘要：绝对定位的特性包裹性包裹性展示跟一样也具有包裹性两者的包裹性都类似于使元素化破坏性破坏性展示相对于引起父元素塌陷要更进一步上面的例子就可以看出元素完全脱离文档流并且被其它盒子以及盒子内的文本无视替代方案由于滥用会降低扩展性和维护性所以需要绝对定位的特性包裹性 absolute包裹性展示跟float一样,absolute也具有包裹性,两者的包裹性都类似于使元素inline-bloc...

gaomysion 2019-08-29 12:36 评论0 收藏0
[译] 帮你高效使用 VS Code 的秘诀

摘要：当你处于文件管理器中，你可以像在的中那样用相同的快捷键进行常规操作，比如用方向键导航用键给文件或文件夹重命名用打开当前文件等。原文地址：Tips to use VSCode more efficiently 原文作者：sudolabs 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Baddyo 校对者：xionglong58, hzdaqo ...

cgspine 2019-05-23 17:35 评论0 收藏0
莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范

摘要：属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称，使用有组织的或目的明确的名称名称应当尽可能短，并且意义明确，避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

mo0n1andin 2019-08-29 10:54 评论0 收藏0