HTMLの<br>ラベルのli横並び

第一歩、横メニューを作成するHTMLコードアーキテクチャ
以下のコードをHTMLドキュメントのナビゲーションバー領域に追加してください.

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

ステップ2、CSSコードの作成
1、共通スタイルの設定
以下のCSSコードをHTMLドキュメントの……ラベル範囲.

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /*             */
}
#menu, #menu li {
list-style:none; /*            */
padding:0; /*           */
margin:0; /*           */
}
</style>

ご存知のように、

の各エントリ
• のデフォルトは縦に並べられており、CSSを定義して横に並べ替える必要があります.
  Tips:ナビゲーションバーを独立して説明するため、bodyや他の場所でデフォルトの効果をリセットした場合は、上記のコードを削除できます.
  2、文字を横並びにする
  
  ラベルの下の項目
  • のデフォルトは縦方向に配列されていることはよく知られていますが、追加のCSSプロパティを定義して横方向に配列する必要があります.

    <style type="text/css">
    #menu li { 
    float:left; /*      */
    }
    </style>

    
    3、リンクスタイルを設定する:

    <style type="text/css">
    #menu li a {
    display:block; /*           */
    padding:8px 50px; /*       */
    background:#3A4953; /*       */
    color:#fff; /*        */
    text-decoration:none; /*       */
    border-right:1px solid #000; /*          */
    }
    </style>

    
    内側の余白(padding)で、各メニューを広くします.メニューが中国語と英語で混在している場合は、単一のメニューの高さと幅を設定することをお勧めします.これにより、中国語と英語の文字列の高さの一致による高さの誤差を避けることができます.固定高さの設定方法:

    <style type="text/css">
    #menu li a {
    display:block; /*           */
    width:150px; /*      */
    height:30px; /*      */
    line-height:30px; /*     ，            ，            */
    text-align:center; /*        */
    background:#3A4953; /*       */
    color:#fff; /*        */
    text-decoration:none; /*       */
    border-right:1px solid #000; /*          */
    }
    </style>

    
    4、リンクサスペンション効果:
    以上のステップの総合的な役割により,横ナビゲーションバーの初歩的なフレームワークが現れた.このステップでは、主にリンクのサスペンション効果を定義し、ナビゲーションバーをより美しくします.もちろん、ナビゲーションバーをよりスマートにするには、CSSサスペンションプロパティで背景画像を定義できます.

    <style type="text/css">
    #menu li a:hover {
    background:#146C9C; /*       */
    color:#fff; /*        */
    }
    </style>

    
    ここのコードには欠陥があり、右端に枠線が1つ増えます.first-child擬似クラスはIEシリーズブラウザでサポートされていないため、私たちは単独でスタイルを書くしかありません.最後の枠線を削除し、HTMLコードに追加の選択子を追加します.

    <ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
    <li><a href="http://www.google.com" class="last">Google.com</a></li>
    </ul>
    
    <style type="text/css">
    #menu li a.last {
    border-right:0; /*        */
    }
    </style>

    
    さあ、ここまで簡単な横ナビゲーションメニューができましたが、簡単ではないでしょうか.完全なコードは次のとおりです.

    <style type="text/css">
    #menu { 
     font:12px verdana, arial, sans-serif; 
    }
    #menu, #menu li {
     list-style:none;
     padding:0;
     margin:0;
    }
    #menu li { 
     float:left; 
    }
    #menu li a {
     display:block;
     /*            ，       
     width:150px;
     height:30px;
     line-height:30px;
     text-align:center;
     */
     padding:8px 50px;
     background:#3A4953;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a:hover {
     background:#146C9C;
     color:#fff;
     text-decoration:none;
     border-right:1px solid #000;
    }
    #menu li a.last {
     border-right:0; /*        */
    }
    </style>
     
    <ul id="menu">
    <li><a href="http://www.baidu.com">Baidu.Com</a></li>
    <li><a href="http://www.Code52.Net">Code52.Net</a></li>
    <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
    <li><a href="http://www.google.com" class="last">Google.com</a></li>
    </ul>

    
    私たちが作成したオンラインプレゼンテーションと、この文書で提供されているインスタンスパッケージをダウンロードすることができます.
    上のCSSスタイルを修正しました.次のようになります.