CSS導(dǎo)航欄怎么制作？

猿友 2021-03-26 17:46:34 瀏覽數(shù) (2863)

反饋

我們開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)時(shí)，導(dǎo)航欄開(kāi)發(fā)是重要環(huán)節(jié)之一。它可以將網(wǎng)站的內(nèi)容以模塊劃分，方便用戶查詢搜索。好的導(dǎo)航欄讓頁(yè)面更加簡(jiǎn)潔，增強(qiáng)用戶體驗(yàn)度。那么這篇文章，我們就來(lái)聊一聊 CSS 導(dǎo)航欄怎么制作。

實(shí)現(xiàn)效果：

w3cschool-CSS制作導(dǎo)航欄

實(shí)現(xiàn)思想：

首先我們需要新建一個(gè)無(wú)序列表，將其樣式設(shè)置為無(wú)樣式，去掉標(biāo)記圓點(diǎn)，并就更該為內(nèi)聯(lián)屬性。之后設(shè)置文字的樣式，并設(shè)置鼠標(biāo)滑過(guò)屬性。

具體代碼：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS制作立體導(dǎo)航</title>
        <style>
            .nav{
              width:800px;
              height: 50px;
              font:bold 0/50px Arial;
              text-align:center;
              margin:40px auto 0;
              background:#ebebeb;
              border-radius: 8px;   
            }
        	.nav a{
        		color:#6D6E6A;
              text-decoration: none;
        	}
            .nav li{
              position:relative;
              display:inline-block;
              padding:0 16px;
              font-size: 18px;
              list-style: none outside none;
            }
            .nav a:hover{
              color: #A24937;
              font-size: 20px;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
        <li><a href="">編程入門(mén)教程</a></li>
        <li><a href="">編程課程</a></li>
        <li><a href="">編程實(shí)戰(zhàn)</a></li>
        <li><a href="">編程題庫(kù)</a></li>
        <li><a href="">在線工具</a></li>
        <li><a href="">VIP會(huì)員</a></li>
        </ul>
    </body>
</html>

以上就是 CSS 制作導(dǎo)航欄的全部?jī)?nèi)容。更多 CSS 內(nèi)容請(qǐng)關(guān)注 w3cschool 官網(wǎng)。

CSS

0 人點(diǎn)贊