這篇文章將為大家詳細講解有關如何使用HTML5做的導航條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

首先準備網頁背景圖片和導航背景圖片，放在同一目錄下的images文件夾中

編寫html文件

接下來寫樣式表，常規放在同一目錄下的styles文件夾中
看看樣式帶來的變化
給網頁添加背景圖片

@charset "utf-8";
 body{
     margin:0px;
     background-image:url(../images/bg.jpg);
     background-repeat:no-repeat;
     width:800px;
}

加個導航

nav{
    float: left;
    width:920px;
    height:40px;
    background-image:url(../images/nav.jpg);
    margin: 100px 0 0 0;
    padding: 0 ;
}

無序列表

nav ul {
    float:left;
    margin: 0px;
    padding: 0 0 0 0;
    width: 920px;
    list-style: none;
}

讓鏈接橫排

nav ul li {
    display: inline;
}

nav ul li a {
    float: left;
    padding: 11px 20px; 
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    background: url(../images/templatemo_menu_divider.png)        center right no-repeat;
    color: #fff;    
    font-family: Tahoma;
    outline: none;
}

鼠標經過該鏈接，呈現深綠色

nav li a:hover {
    color: #2a5f00;
}

關于“如何使用HTML5做的導航條”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。