CSS導航欄怎么制作？

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

反饋

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

實現(xiàn)效果：

w3cschool-CSS制作導航欄

實現(xiàn)思想：

首先我們需要新建一個無序列表，將其樣式設置為無樣式，去掉標記圓點，并就更該為內聯(lián)屬性。之后設置文字的樣式，并設置鼠標滑過屬性。

具體代碼：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS制作立體導航</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="">編程入門教程</a></li>
        <li><a href="">編程課程</a></li>
        <li><a href="">編程實戰(zhàn)</a></li>
        <li><a href="">編程題庫</a></li>
        <li><a href="">在線工具</a></li>
        <li><a href="">VIP會員</a></li>
        </ul>
    </body>
</html>

以上就是 CSS 制作導航欄的全部內容。更多 CSS 內容請關注 w3cschool 官網。

CSS

0 人點贊