成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)側(cè)邊欄工具（2）使用圖標(biāo)字體方式

Yangder / 2473人閱讀

摘要：前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是結(jié)構(gòu)簡(jiǎn)單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點(diǎn)就是使用了大量的圖片，對(duì)性能有一定的影響，并且不利于

前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是

HTML結(jié)構(gòu)簡(jiǎn)單，容易閱讀和理解

使用圖片瀏覽器兼容性好，可以兼容ie6等低版本瀏覽器

缺點(diǎn)就是使用了大量的圖片，對(duì)性能有一定的影響，并且不利于修改。

下面介紹一種使用圖標(biāo)字體來(lái)實(shí)現(xiàn)側(cè)邊欄工具條

HTML結(jié)構(gòu)

html結(jié)構(gòu)外層寫一個(gè)toolbar類div
每一個(gè)內(nèi)部工具條寫一個(gè)a標(biāo)簽，內(nèi)部包含兩個(gè)span，一個(gè)span用來(lái)包含圖標(biāo)字體和具體的文字，另一個(gè)span用來(lái)包含二維碼，如果不需要顯示二維碼，則只需一個(gè)span

CSS樣式

首先需要去網(wǎng)上下載所需的字體圖標(biāo)樣式，這類網(wǎng)站有很多，這里使用https://icomoon.io/app/#/select/font
網(wǎng)站具體界面如下

在selection中查看所選擇的字體圖標(biāo)，選好之后，Generate Font
打包下載選擇的字體圖標(biāo)

解壓縮，查看文件目錄結(jié)構(gòu)，將其中的fonts文件夾和style.css樣式文件復(fù)制到css文件夾下面

打開style.css，將里面的內(nèi)容復(fù)制到自己的SCSS文件中

將其中的字體圖標(biāo)類復(fù)制到上面的html結(jié)構(gòu)中

外部工具條總體樣式固定定位

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

a標(biāo)簽樣式

.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    margin-top: 10px;
    z-index: 1000;
//a標(biāo)簽hover時(shí)產(chǎn)生的效果
    &:hover{
        .toolbar-icon{
            top: -$toolbar-height;
        }
        .toolbar-text{
            top: 0;
        }
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

a標(biāo)簽的子元素，相對(duì)于a標(biāo)簽絕對(duì)定位，用來(lái)包含圖標(biāo)字體和文本字體，設(shè)置溢出隱藏

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

圖標(biāo)字體樣式

.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);

}

二維碼公共部分設(shè)置

.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
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49777.html

相關(guān)文章

  • 實(shí)現(xiàn)側(cè)邊欄工具（2）使用圖標(biāo)字體方式

    摘要：前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是結(jié)構(gòu)簡(jiǎn)單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點(diǎn)就是使用了大量的圖片，對(duì)性能有一定的影響，并且不利于 前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是 HTML結(jié)構(gòu)簡(jiǎn)單，容易...

    kycool 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄

    摘要：本章集中介紹四個(gè)重要的小功能回到頂部浮動(dòng)按鈕矢量圖標(biāo)頁(yè)腳沉底和粘性側(cè)邊欄。因?yàn)槲覀兿朐谌径紦碛羞@個(gè)按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。 本章集中介紹四個(gè)重要的小功能：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄。 這幾個(gè)功能與Django基本沒(méi)啥關(guān)系，更多的是前端知識(shí)，但是對(duì)博客網(wǎng)站都很重要，問(wèn)的讀者也比較多，因此也集中講一下好了。 回到頂...

    lovXin 評(píng)論0 收藏0

  • 絕對(duì)定位(Absolute positioning)

    摘要：絕對(duì)定位的特性包裹性包裹性展示跟一樣也具有包裹性兩者的包裹性都類似于使元素化破壞性破壞性展示相對(duì)于引起父元素塌陷要更進(jìn)一步上面的例子就可以看出元素完全脫離文檔流并且被其它盒子以及盒子內(nèi)的文本無(wú)視替代方案由于濫用會(huì)降低擴(kuò)展性和維護(hù)性所以需要 絕對(duì)定位的特性 包裹性 absolute包裹性展示 跟float一樣,absolute也具有包裹性,兩者的包裹性都類似于使元素inline-bloc...

    gaomysion 評(píng)論0 收藏0

  • [譯] 幫你高效使用 VS Code 的秘訣

    摘要：當(dāng)你處于文件管理器中，你可以像在的中那樣用相同的快捷鍵進(jìn)行常規(guī)操作，比如用方向鍵導(dǎo)航用鍵給文件或文件夾重命名用打開當(dāng)前文件等。 原文地址：Tips to use VSCode more efficiently 原文作者：sudolabs 譯文出自：掘金翻譯計(jì)劃 本文永久鏈接：github.com/xitu/gold-m… 譯者：Baddyo 校對(duì)者：xionglong58, hzdaqo ...

    cgspine 評(píng)論0 收藏0

  • 莫閑前端之路學(xué)習(xí)markdown使用，html和css的編寫順序以及class命名規(guī)范

    摘要：屬性順序標(biāo)簽標(biāo)簽標(biāo)簽必須加上命名命名規(guī)范名稱中只能出現(xiàn)小寫字符和破折號(hào)使用有意義的名稱，使用有組織的或目的明確的名稱名稱應(yīng)當(dāng)盡可能短，并且意義明確，避免過(guò)度任意的簡(jiǎn)寫。而是一個(gè)尚未被改變過(guò)的也是屬于的元素。 html屬性順序 class id data-*,name src, for, type, href title, alt aria-*, role /*a標(biāo)簽*/ Ex...

    mo0n1andin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<