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

css實(shí)現(xiàn)電梯導(dǎo)航的項目實(shí)踐

  發(fā)布時間:2023-05-06 15:51:15   作者: Mr-Wang-Y-P   我要評論
CSS梯形導(dǎo)航圖是一種使用 CSS 布局實(shí)現(xiàn)的導(dǎo)航設(shè)計,可以根據(jù)需要靈活調(diào)整導(dǎo)航菜單的上下位置和大小,本文主要介紹了css實(shí)現(xiàn)電梯導(dǎo)航,具有一定的參考價值,感興趣的可以了解一下

啥叫電梯導(dǎo)航呢?

直接上圖

image.png

當(dāng)我們點(diǎn)擊左邊的小導(dǎo)航欄的時候,頁面會自動滑動到我們所要看到部分。也許你可能猜到了實(shí)現(xiàn)這樣的主要關(guān)鍵點(diǎn),就是錨點(diǎn)。讓我們接著看。

京東(JD.COM) 官網(wǎng),大家可以自己嘗試一下看一下效果。

平常大多數(shù)人都會使用js語法進(jìn)行控件綁定,然后實(shí)現(xiàn)其相對效果,可是在css中也可以做到。

命名[錨點(diǎn)]的作用:在同一頁面內(nèi)的不同位置進(jìn)行跳轉(zhuǎn)。

通俗理解:可以通過錨點(diǎn)跳轉(zhuǎn)到頁面中的其他位置,當(dāng)頁面過長時,可以將頁面分為幾部分,通過頂部設(shè)置一些錨點(diǎn),點(diǎn)擊可以方便瀏覽者快速定位到相應(yīng)的位置。

使用語法

1)給元素定義命名錨記名 
語法:
<標(biāo)記 id="命名錨記名"> </標(biāo)記> 
2)命名錨記連接 
語法:
<a href="#命名錨記名稱"></a>

注意

  • href屬性的屬性值最前面要加**#**(href="#id名)
  • 在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加的是id屬性

可是單純只是用錨點(diǎn)并沒有那種滑動的效果,錨點(diǎn)是直接跳轉(zhuǎn)到指定的位置,并不會有動作。那么怎么用css實(shí)現(xiàn)自動滑動呢?

css電梯滑動實(shí)現(xiàn)

scroll-behavior

在HTML中有這樣一個屬性。 scroll-behavior 屬性規(guī)定當(dāng)用戶單擊可滾動框中的鏈接時,是否平滑地(具動畫效果)滾動位置,而不是直線跳轉(zhuǎn)。

scroll-behavior: auto|smooth|initial|inherit;
描述
auto 默認(rèn)值。允許在滾動框內(nèi)的元素間直接跳轉(zhuǎn)的“滾動效果”。
smooth 允許在滾動框內(nèi)的元素間平滑的“滾動效果”。
initial 將此屬性設(shè)置為其默認(rèn)值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

 實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css電梯導(dǎo)航</title>
</head>
<body>
    <div style="display: flex;">
    <div>
        <div class="box1" id="box1">服飾</div>
        <div class="box2" id="box2">家電</div>
        <div class="box3" id="box3">生鮮</div>
    </div>
    <div class="slidebar">
        <a href="#box1">服飾</a>
        <a href="#box2">家電</a>
        <a href="#box3">生鮮</a>
    </div>
</div>
</body>
</html>
.box1{
            width: 80vw;
            height: 800px;
            background-color: aqua;
        }
        .box2{
            width:80vw ;
            height: 800px;
            background-color:chartreuse;
        }
        .box3{
            width: 80vw;
            height: 800px;
            background-color:red
        }
        .slidebar{
            display: flex;
            flex-direction: column;
            margin-left: 85vw;
            margin-top: 50px;
            position: fixed;
        }
        .slidebar a{
            text-align: center;
            width: 50px;
            height: 50px;
            font-size: 10px;
        }
        .slidebar a:nth-child(1) {
            background-color: aqua;
        }
        .slidebar a:nth-child(2) {
            background-color: chartreuse;
        }
        .slidebar a:nth-child(3) {
            background-color: red;
        }
        html{
            /* 頁面滾動條滑動 */
            scroll-behavior: smooth;
        }

到此這篇關(guān)于css實(shí)現(xiàn)電梯導(dǎo)航的項目實(shí)踐的文章就介紹到這了,更多相關(guān)css電梯導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • css旋轉(zhuǎn)導(dǎo)航的示例代碼

    本文主要介紹了css旋轉(zhuǎn)導(dǎo)航的示例代碼,文中通過示例代碼介紹的非常詳細(xì),該導(dǎo)航可用在一些網(wǎng)站首頁導(dǎo)航欄中,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-27
  • CSS+HTML 實(shí)現(xiàn)頂部導(dǎo)航欄功能

    這篇文章主要介紹了CSS+HTML 實(shí)現(xiàn)頂部導(dǎo)航欄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-24
  • 教你做個可愛的css滑動導(dǎo)航條

    今天來帶大家做一個可愛的滑動導(dǎo)航欄效果,這個demo很基礎(chǔ),但是使用場景非常廣泛,感興趣的小伙伴們可以參考一下
    2021-06-15
  • CSS實(shí)現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用)

    這篇文章主要介紹了CSS實(shí)現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編
    2021-03-17
  • CSS 帶搜索導(dǎo)航欄的示例代碼

    這篇文章主要介紹了CSS 帶搜索導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-02-22
  • 不可思議的CSS導(dǎo)航欄下劃線跟隨效果

    這篇文章主要介紹了純CSS實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨效果,本文圖文并茂實(shí)例代碼詳解,給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2019-12-09
  • css實(shí)現(xiàn)流程導(dǎo)航效果(三種方法)

    本文通過三種方法給大家介紹css實(shí)現(xiàn)流程導(dǎo)航效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下
    2019-11-13
  • html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能

    這篇文章主要介紹了基于html+css 實(shí)現(xiàn)簡易導(dǎo)航欄功能,主要就是css(級聯(lián)樣式表)對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧
    2021-04-07
  • css實(shí)現(xiàn)導(dǎo)航切換的實(shí)例代碼

    本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)導(dǎo)航切換效果,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-08-15

最新評論