實現側邊欄工具（2）使用圖標字體方式

Yangder 發布于2019-08-01 15:07 / 2462人閱讀

摘要：前面講了一下使用背景圖片來實現側邊工具欄的一個實現效果，實現側邊欄工具使用背景圖片方式，可以看出這種方式的優缺點是結構簡單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點就是使用了大量的圖片，對性能有一定的影響，并且不利于

前面講了一下使用背景圖片來實現側邊工具欄的一個實現效果，實現側邊欄工具（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側邊欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49777.html

實現側邊欄工具（2）使用圖標字體方式

摘要：前面講了一下使用背景圖片來實現側邊工具欄的一個實現效果，實現側邊欄工具使用背景圖片方式，可以看出這種方式的優缺點是結構簡單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點就是使用了大量的圖片，對性能有一定的影響，并且不利于前面講了一下使用背景圖片來實現側邊工具欄的一個實現效果，實現側邊欄工具（1）使用背景圖片方式，可以看出這種方式的優缺點是 HTML結構簡單，容易...

kycool 2019-08-21 13:33 評論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