今天我們來學習如何使用純CSS制作一個漂亮的網頁導航欄。首先,我們需要使用HTML代碼來構建導航欄的框架,然后使用CSS來進行樣式設計。
以下是基本的HTML代碼:
<nav> <ul class="menu"> <li><a href="#">首頁</a></li> <li><a href="#">產品介紹</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav>我們使用了HTML5中的新標簽<nav>來包含導航欄。在該標簽內,我們使用<ul>和<li>標簽來創建導航欄,其中<ul>使用了一個名為“menu”的class來為CSS提供樣式選擇器。 現在我們來添加CSS樣式代碼:
nav { background-color: #333; height: 50px; width: 100%; position: fixed; top: 0; overflow: hidden; } .menu { margin: 0; padding: 0; list-style: none; text-align: center; } .menu li { display: inline-block; margin: 0; padding: 0; } .menu li a { display: block; color: #fff; font-size: 16px; font-weight: 600; padding: 15px 20px; text-decoration: none; } .menu li a:hover { background-color: #111; }在上述代碼中,我們設置了導航欄的背景顏色、高度、寬度、位置等基本樣式屬性。我們還應用了一個名為“menu”的class來選擇導航欄中的所有項目,并使用CSS設置它們的樣式,例如刪除了項目標記、設置文本居中、改變項目之間的空白以及將鏈接樣式應用于項目等等。 最后,我們在CSS代碼中添加了:hover偽類,以為鼠標懸停在導航欄上時添加一個反色背景顏色的效果。 通過上面的代碼,我們成功地創建了一個漂亮的網頁導航欄,而不需要使用任何JavaScript或其他外部框架。這不僅可以加快網頁的加載速度,還可以提高網頁的可訪問性和可維護性。
上一篇dockerlumen
下一篇dockerls被拒絕