CSSで水平ナビゲーションを設定する方法

ナビゲーション バー

ナビゲーション バーを上手に使用することは、どの Web サイトにとっても非常に重要です。

CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。

ナビゲーション バー = リンク リスト

標準 HTML の基礎として、ナビゲーション バーが必要です。

ナビゲーション バーは基本的にリンクのリストであるため、

要素と
• 要素を使用することは非常に意味があります:

  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>

  

  ## 水平ナビゲーション バーを作成するには 2 つの方法があります。インラインまたはフロート リスト項目を使用します。

  どちらの方法でも問題ありませんが、リンクのサイズを同じにしたい場合は、float メソッドを使用する必要があります。

  インライン リスト項目

  水平ナビゲーション バーを作成する 1 つの方法は、要素
  Instance

  li{
      display:inline;
  }

  display を指定することです。 :inline; - デフォルトでは、
• 要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して 1 行を表示します。

  フローティング リスト項目

  上記の例では、リンクの幅が異なります。
  すべてのリンクを同じ幅にするには、
• 要素をフロートにして、 要素の幅を指定します。
  Example

  li{
      float:left;
  }
  a{
      display:block;
      width:60px;
  }

  float:左 - フローティング ブロック要素を並べてスライドを使用します。
  display:block - ブロック要素へのリンクを表示し、(テキストだけでなく) リンク領域全体をクリック可能にし、幅を指定できます
  width:60px - デフォルトのブロック要素の最大幅。幅を 60 ピクセルに指定したいです

  以上がCSSで水平ナビゲーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。