Css如何實現(xiàn)導(dǎo)航欄

發(fā)布時間：2021-11-23 10:22:56 來源：億速云閱讀：115 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)Css如何實現(xiàn)導(dǎo)航欄的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、垂直導(dǎo)航欄

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}

a:active,a:hover{
    background-color: crimson;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導(dǎo)航欄</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

    <ul>
        <li><a href="#">導(dǎo)航1</a></li>
        <li><a href="#">導(dǎo)航2</a></li>
        <li><a href="#">導(dǎo)航3</a></li>
        <li><a href="#">導(dǎo)航4</a></li>
    </ul>

</body>
</html>

二、水平導(dǎo)航欄

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: aqua;
    width: 250px;
    text-align: center;
}

a:link,a:visited{
    font-weight: bold;
    text-decoration: none;
    background-color: aqua;
    color: black;
    width: 50px;
    text-align: center;
}

a:active,a:hover{
    background-color: crimson;
}

li{
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

感謝各位的閱讀！關(guān)于“Css如何實現(xiàn)導(dǎo)航欄”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

Css如何實現(xiàn)導(dǎo)航欄

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽