HTMLを使ってシンプルで美しいナビゲーションバーを作成する方法（詳細なコード説明）

前回の記事「css Tips:画像にマスクを追加する方法(共有)」では、CSS画像を使ってマスクを追加する方法を紹介しました。次の記事では、HTML でシンプルで美しいナビゲーション バーを作成する方法を紹介します。一緒に作り方を見てみましょう。困っている友達は参考にしてください。お役に立てれば幸いです。

#少し前に基本を学んだ後（すぐに忘れてしまいましたが）、数か月前に読み始めました。自分のスキルをテストして向上させるために独自の Web ページを作成し始めましたが、ナビゲーション バーを正しく表示するのに苦労しています。

ナビゲーション バーの 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 中国語 Web サイトの他の関連記事を参照してください。