如何使用HTML製作一個簡單美觀的導覽列（程式碼詳解）

之前的文章《css技巧：怎麼為圖片添加蒙版（分享）》中，為大家介紹了怎樣使用css圖片添加蒙版的方法。以下這篇文章跟大家介紹如何在 HTML 一個簡單美觀的導覽欄，我們一起看怎麼做，有需要的朋友可以參考一下，希望對你們有所助。

在不久前學習了基礎知識（並很快忘記了它們）後，幾個月前我開始閱讀它。我已經開始製作自己的網頁以測試和提高我的技能，但是我在讓導覽列正確顯示時遇到了問題。

我的導覽列的 HTML 

#程式碼如下：

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

程式碼運行附原圖：

HTML搭導航骨架的效果附程式碼範例

<nav>
    <ul class="navbar">
        <li class="nav-item selected"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Coffee</a></li>
        <li class="nav-item"><a href="#">Food</a></li>
        <li class="nav-item"><a href="#">Catering</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

<style>
nav{
   position:fixed;
}

.nav-item{
   color: #000;
   border: 1px solid blue;
   background-color: rgba(255, 255, 255, .6 ) 
}

.nav-item:hover
{
        background-color: rgba(0, 255, 255, .6 ) 
}

.selected{
   color: #058;
   border: 1px solid red;
   background-color: rgba(255, 0, 255, .6 ) 
}

程式碼運行附效果圖：

在寫HTML 程式碼方面，我是一個絕對的初學者，如果做得不好，我深感抱歉。

推薦學習：Html影片教學

#

以上是如何使用HTML製作一個簡單美觀的導覽列（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！