說到CSS導航欄，各種漂亮炫酷的樣式都應有盡有，不過本文要介紹的是簡單卻又很實用的導航欄，分為水平導航欄和垂直導航欄兩種樣式。適合初學者學習使用，以及一些對設計要求不高的網(wǎng)頁使用。

簡單卻實用的CSS水平和垂直導航欄

demodownload

概述

這個簡單的教程將教你如何通過CSS腳本在水平和垂直位置制作導航欄。導航欄是網(wǎng)頁中的一個用戶界面元素，其中包含指向網(wǎng)站其他部分的鏈接。在大多數(shù)情況下，導航欄是主網(wǎng)站模板的一部分，這意味著它會顯示在網(wǎng)站上的大多數(shù)（如果不是全部）頁面上。這意味著無論你正在查看哪個頁面，都可以使用導航欄訪問網(wǎng)站的其他部分。

樣例代碼

創(chuàng)建水平導航欄

HTML：

<h1>水平導航欄</h1>
<nav class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
   <div class="horizontal-menu">
        <ul>
            <li><a href="#" class="active">首頁</a></li>
            <li><a href="#">關(guān)于我們</a></li>
            <li><a href="#">登陸</a></li>
        </ul>
    </div>
    </div>
  </div>
</nav>

CSS腳本：

.horizontal-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0018c3;
}

.horizontal-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.horizontal-menu .active {
    background-color: #1cbb09;
    color: white;
}

.horizontal-menu li {
    float: left;
    border-right: 1px solid #bbb;
}

.horizontal-menu li:last-child {
    border-right: none;
}

.horizontal-menu li a:hover {
    background-color: #111;
}

結(jié)果：

execcodegetcode

創(chuàng)建垂直導航欄

HTML：

<h1>垂直導航欄</h1>
<nav class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
   <div class="vertical-menu">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#" class="active">關(guān)于我們</a></li>
            <li><a href="#">登陸</a></li>
        </ul>
    </div>
    </div>
  </div>
</nav>

CSS腳本：

.vertical-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #0018c3;
    border: 1px solid #555;
}

.vertical-menu li a {
    display: block;
    color: #fff;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

.vertical-menu li a:hover {
    background-color: #111;
}

.vertical-menu li {
    text-align: center;
    border-bottom: 1px solid #555;
}

.vertical-menu li:last-child {
    border-bottom: none;
}

.vertical-menu .active {
    background-color: #1cbb09;
}

結(jié)果：

execcodegetcode

總結(jié)

本文介紹了如何使用CSS來制作簡單的導航欄，代碼不多，樣式設計不復雜，適合初學者學習。本實例導航欄也適合在對設計要求不高的網(wǎng)頁上使用。

相關(guān)文章推薦

• CSS3+JQuery實現(xiàn)的三級下拉導航菜單

標簽: 導航欄  導航菜單