CSS+HTML 實現頂部導航欄功能

  發布時間:2021-08-24 15:40:09   作者:man_zuo   我要評論
這篇文章主要介紹了CSS+HTML 實現頂部導航欄功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

導航欄的實現、固定頂部導航欄、二級菜單實現
效果圖:

在這里插入圖片描述

2018/11/16更新:
最近在使用這個導航欄的時候,發現頁面在放大和縮小的情況下,導航欄的布局和顯示都有些小問題,所以重新改了一下css部分的代碼,重新貼上來

新的代碼實現(優化布局):

<html>
   <head>
       <style type="text/css">
        .top{
    /* 設置寬度高度背景顏色 */
    height: auto; /*高度改為自動高度*/
    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    position: fixed; /*固定在頂部*/
    top: 0;/*離頂部的距離為0*/
    margin-bottom: 5px;
}
.top ul{
    /* 清除ul標簽的默認樣式 */
    width: auto;/*寬度也改為自動*/
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 5%;
    /* margin-top: 0;          */
    padding: 0;

}
.top li {
    float:left; /* 使li內容橫向浮動,即橫向排列  */
    margin-right:2%;  /* 兩個li之間的距離*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /* 設置鏈接內容顯示的格式*/
    display: block; /* 把鏈接顯示為塊元素可使整個鏈接區域可點擊 */
    color:white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* 去除下劃線 */
    
}
.top li a:hover{
    /* 鼠標選中時背景變為黑色 */
    background-color: #111;
}
.top ul li ul{
    /* 設置二級菜單 */
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* 默認隱藏二級菜單的內容 */

}
.top ul li ul li{
    /* 二級菜單li內容的顯示 */
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* 鼠標選中二級菜單內容時 */
    display: block;
}
body{
    background:#eff3f5;
}

       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">一級菜單</a></li>
                    <li><a href="#">一級菜單</a></li>
                    <li><a href="#">一級菜單</a></li>
                    <li><a href="#"><b>一級菜單</b></a></li>
                    <li><a href="#">一級菜單</a></li>
                    <li>
                        <a href="#">一級菜單</a>
                        <ul>
                            <li><a href="#">二級菜單</a></li>
                            <li><a href="#">二級菜單</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

下面的原來的代碼實現(頁面放大縮小的時候導航版排版有問題):

<html>
   <head>
       <style type="text/css">
        .top{
            /* 設置寬度高度背景顏色 */
            height: 50px;
            width:100%;
            background:rgb(189, 181, 181);
            position: fixed; /*固定在頂部*/
            top: 0;/*離頂部的距離為0*/
        }
        .top ul{
            /* 清除ul標簽的默認樣式 */
            width: 80%;
            list-style-type: none;
            margin: 0;            
            padding: 0;
            overflow: hidden;

        }
        .top li {    
            float:left; /* 使li內容橫向浮動,即橫向排列  */
            margin-right:50px;  /* 兩個li之間的距離*/
        }

        .top li a{
           /* 設置鏈接內容顯示的格式*/
            display: block; /* 把鏈接顯示為塊元素可使整個鏈接區域可點擊 */
            color:white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* 去除下劃線 */
        }
        .top li a:hover{
            /* 鼠標選中時背景變為黑色 */
            background-color: #111;
        }
        .top ul li ul{
            /* 設置二級菜單 */
            width: auto;
            background:rgb(189, 181, 181);
            position: absolute;
            display: none; /* 默認隱藏二級菜單的內容 */

        }
        .top ul li ul li{
            /* 二級菜單li內容的顯示 */
            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /* 鼠標選中二級菜單內容時 */
            display: block;
        }
       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">一級菜單</a></li>
                    <li><a href="#">一級菜單</a></li>
                    <li><a href="#">一集菜單</a></li>
                    <li><a href="#"><b>一級菜單</b></a></li>
                    <li><a href="#">一級菜單</a></li>
                    <li>
                        <a href="#">一級菜單</a>
                        <ul>
                            <li><a href="#">二級菜單</a></li>
                            <li><a href="#">二級菜單</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

到此這篇關于CSS+HTML 實現頂部導航欄功能的文章就介紹到這了,更多相關css頂部導航欄內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • HTML+CSS 實現頂部導航欄菜單制作

    導航對于任何網站都很重要,本文主要介紹了HTML+CSS 實現頂部導航欄菜單制作,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-03
  • CSS 帶搜索導航欄的示例代碼

    這篇文章主要介紹了CSS 帶搜索導航欄的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習
    2021-02-22
  • html+css+js實現導航欄滾動漸變效果

    這篇文章主要介紹了html+css+js實現導航欄滾動漸變效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-28
  • html+css 實現簡易導航欄功能

    這篇文章主要介紹了基于html+css 實現簡易導航欄功能,主要就是css(級聯樣式表)對html的內容做格式化。具體內容詳情大家跟隨小編一起通過本文學習吧
    2021-04-07
  • 純CSS實現導航欄下劃線跟隨的示例代碼

    這篇文章主要介紹了純CSS實現導航欄下劃線跟隨的示例代碼的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-11

最新評論

精品国内自产拍在线观看