如何使用HTML製作一個簡單美觀的導覽列（程式碼詳解）-html教學-PHP中文網

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

奋力向前

發布： 2021-07-28 22:01:23

原創

14729 人瀏覽過

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

如何使用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製作一個簡單美觀的導覽列（程式碼詳解）

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製作一個簡單美觀的導覽列（程式碼詳解）