亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實(shí)現(xiàn)移動(dòng)端橫向滾動(dòng)導(dǎo)航條(PC端也適用)

  發(fā)布時(shí)間：2021-03-17 12:01:30   作者：小周子1015   我要評(píng)論
這篇文章主要介紹了CSS實(shí)現(xiàn)移動(dòng)端橫向滾動(dòng)導(dǎo)航條(PC端也適用)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

功能由來(lái)

近期在做一個(gè)H5需要一個(gè)橫向滾動(dòng)條，查看了一些文檔最后還是決定自己寫(xiě)一個(gè)，一個(gè)可以兼容Mobile、PC的。

HTML

<body>
    <div class="nav">
        <a href="#">Nav1</a>
        <a href="#">Nav2</a>
        <a href="#">Nav3</a>
        <a href="#">Nav4</a>
        <a href="#">Nav5</a>
        <a href="#">Nav6</a>
        <a href="#">Nav7</a>
        <a href="#">Nav8</a>
        <a href="#">Nav9</a>
        <a href="#">Nav10</a>
        <a href="#">Nav11</a>
        <a href="#">Nav12</a>
        <a href="#">Nav13</a>
        <a href="#">Nav14</a>
        <a href="#">Nav15</a>
    </div>
    <div>
        內(nèi)容區(qū)域
    </div>
</body>

CSS

.nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    /*段落中文本不換行*/
    white-space: nowrap;
    /*陰影*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    /*設(shè)置橫向滾動(dòng)*/
    overflow-x: scroll;
    /*禁止縱向滾動(dòng)*/
    overflow-y: hidden;
    /*文本平鋪*/
    text-align: justify;
    /*背景顏色*/
    background: #F4F5F6;
    padding: 0px 5px;
    margin-bottom: 10px;
    /*設(shè)置邊距改變效果為內(nèi)縮*/
    box-sizing: border-box;
}
.nav a {
    color: #505050;
    /*取消超鏈接下劃線*/
    text-decoration: none;
    margin: auto 10px;
}
.nav::-webkit-scrollbar {
    /*隱藏滾動(dòng)條*/
    display: none;
}

這樣就實(shí)現(xiàn)了橫向滾動(dòng)導(dǎo)航是不是很簡(jiǎn)單

到此這篇關(guān)于CSS實(shí)現(xiàn)移動(dòng)端橫向滾動(dòng)導(dǎo)航條(PC端也適用)的文章就介紹到這了,更多相關(guān)CSS橫向滾動(dòng)導(dǎo)航條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css scroll-snap控制滾動(dòng)元素的實(shí)現(xiàn)

    本文主要介紹了css scroll-snap控制滾動(dòng)元素的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2023-02-22

  • 微信小程序純CSS實(shí)現(xiàn)無(wú)限彈幕滾動(dòng)效果

    這篇文章主要介紹了微信小程序純CSS實(shí)現(xiàn)無(wú)限彈幕滾動(dòng)效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-08-31

  • 使用CSS設(shè)置滾動(dòng)條樣式

    這篇文章介紹了使用CSS設(shè)置滾動(dòng)條樣式，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-12-20

  • CSS完成視差滾動(dòng)效果

    這篇文章主要介紹了CSS如何完成視差滾動(dòng)效果，幫助大家更好的理解和學(xué)習(xí)使用CSS，感興趣的朋友可以了解下
    2021-04-27

  • CSS實(shí)現(xiàn)滾動(dòng)高度自動(dòng)變小的粘滯效果實(shí)現(xiàn)思路

    粘滯效果是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的特效之一，在這篇文章中，我們介紹了如何使用JavaScript監(jiān)聽(tīng)窗口滾動(dòng)事件，并根據(jù)滾動(dòng)高度和下一個(gè)區(qū)域的高度來(lái)控制導(dǎo)航欄的表現(xiàn)方式，本文結(jié)合
    2023-06-13

最新評(píng)論