CSS+HTML實(shí)現(xiàn)頂部導(dǎo)航欄的方法

這篇文章主要介紹了CSS+HTML實(shí)現(xiàn)頂部導(dǎo)航欄的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于臨邑企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。臨邑網(wǎng)站建設(shè)公司,為臨邑等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

html有什么特點(diǎn)

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

導(dǎo)航欄的實(shí)現(xiàn)、固定頂部導(dǎo)航欄、二級菜單實(shí)現(xiàn)

效果圖：

CSS+HTML實(shí)現(xiàn)頂部導(dǎo)航欄的方法

最近在使用這個(gè)導(dǎo)航欄的時(shí)候，發(fā)現(xiàn)頁面在放大和縮小的情況下，導(dǎo)航欄的布局和顯示都有些小問題，所以重新改了一下css部分的代碼，重新貼上來

新的代碼實(shí)現(xiàn)（優(yōu)化布局）：

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

}
.top li {
    float:left; /* 使li內(nèi)容橫向浮動(dòng)，即橫向排列  */
    margin-right:2%;  /* 兩個(gè)li之間的距離*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /* 設(shè)置鏈接內(nèi)容顯示的格式*/
    display: block; /* 把鏈接顯示為塊元素可使整個(gè)鏈接區(qū)域可點(diǎn)擊 */
    color:white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* 去除下劃線 */
    
}
.top li a:hover{
    /* 鼠標(biāo)選中時(shí)背景變?yōu)楹谏?nbsp;*/
    background-color: #111;
}
.top ul li ul{
    /* 設(shè)置二級菜單 */
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* 默認(rèn)隱藏二級菜單的內(nèi)容 */

}
.top ul li ul li{
    /* 二級菜單li內(nèi)容的顯示 */
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* 鼠標(biāo)選中二級菜單內(nèi)容時(shí) */
    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>

下面的原來的代碼實(shí)現(xiàn)（頁面放大縮小的時(shí)候?qū)Ш桨媾虐嬗袉栴}）：

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

        }
        .top li {    
            float:left; /* 使li內(nèi)容橫向浮動(dòng)，即橫向排列  */
            margin-right:50px;  /* 兩個(gè)li之間的距離*/
        }

        .top li a{
           /* 設(shè)置鏈接內(nèi)容顯示的格式*/
            display: block; /* 把鏈接顯示為塊元素可使整個(gè)鏈接區(qū)域可點(diǎn)擊 */
            color:white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* 去除下劃線 */
        }
        .top li a:hover{
            /* 鼠標(biāo)選中時(shí)背景變?yōu)楹谏?nbsp;*/
            background-color: #111;
        }
        .top ul li ul{
            /* 設(shè)置二級菜單 */
            width: auto;
            background:rgb(189, 181, 181);
            position: absolute;
            display: none; /* 默認(rèn)隱藏二級菜單的內(nèi)容 */

        }
        .top ul li ul li{
            /* 二級菜單li內(nèi)容的顯示 */
            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /* 鼠標(biāo)選中二級菜單內(nèi)容時(shí) */
            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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS+HTML實(shí)現(xiàn)頂部導(dǎo)航欄的方法”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章標(biāo)題：CSS+HTML實(shí)現(xiàn)頂部導(dǎo)航欄的方法
網(wǎng)頁路徑：http://muchs.cn/article22/ihgdcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、云服務(wù)器、建站公司、關(guān)鍵詞優(yōu)化、網(wǎng)站排名、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容