HTML の第 1 レベルのナビゲーションの作成

今日は簡単なナビゲーション バーの作成方法を共有します:

ステップ 1: CSS スタイル シートを導入し、ID が nav で新しいレイヤーを作成し、

、
• 、 を使用します。タグを使用して完成した効果を作成します。

  nbsp;html>
      
          <meta>
          <title></title>
          <link>
      
      
          <p>
              </p>

                  
  • 首页
                                   
  • 首页
                                   
  • 首页
                                   
  • 首页
                                   
  • 首页
              
               

  2 番目のステップは CSS スタイルを設定することです:

  1. ナビゲーションの属性を設定します

  #nav{
      width: 500px;
      height: 50px;
      border: 1px solid red;
  }

  表示効果は次のとおりです:

  

  2. ;ul>タグを前から

  #nav ul{
  	list-style: none;
  }

  3.

  の下に含まれるタグの属性を設定します
  4. マウスオーバー効果を設定します

  #nav ul li a{
  	width: 98px;
  	height: 50px;
  	float: left;
  	border: 1px solid red;
  	text-align: center;
  	line-height: 50px;
  	text-decoration: none;
  }

  最終効果：

  

  HTMLコード部分の完成：

  CSSスタイルコード部分の完成：

  #nav ul li a:hover{
  	background-color: #ABCDEF;
  }

  HTML関連の記事はこちら第一レベルのナビゲーション制作、 PHP 中国語 Web サイトにご注意ください。