考え
ナビゲーションバー（一般順不同リストを使用します）
ナビゲーション構造を作成します。
1、（まだ存在している、ちょうど隠されたポイントの前ではなく、順不同リスト）デフォルトのスタイルをクリア
2、弾丸へ
リストスタイル：なし。
3、ULの背景色を設定します
図4に示すように、バックグラウンドの幅が提供される（IE6で、要素の指定された幅は、デフォルトhasLayoutによってオープンになる場合）
図5に示すように、素子の中心部に設けられています
図6に示すように、横方向へのLi、（フローティングリードが親要素の崩壊に、で解決されます）
7、ハイパーリンク指定された幅（あなたが指定した幅のIiクリックして対応するだけ揃え単語をクリックすると、幅の範囲内でクリックしない）ので、ハイパーリンク指定された幅のために行きます
しかし、線要素がハイパーリンクであるリンクが変換される前に、それがスーパーブロック要素であるので、幅が（それはセットの幅は、親要素は、Li、ないULであることに留意すべきである）、指定することはできません
8、テキスト整列、テキストの中心を設定します
図9は、上下の余白（外観）を設定しました
10、下線、テキスト装飾を削除します
11、太字、フォントの色を設定します
12、マウス（提供擬似クラス）への色の変化
。1 <！DOCTYPE HTML > 2 < HTML > 3 < ヘッド> 4 < メタ文字セット= "UTF-8" > 5 < タイトル>ナビゲーションの練習</ タイトル> 6 < スタイルタイプ= "テキスト/ CSS" > 7 / * クリアデフォルトのレイアウト（順不同リストだけ除去隠された弾丸の前ではなく）* / 8 * { 9。 マージン：0 ; 10 パディング：0 。 11 } 12 / * 背景色、幅、高さキルトスプレッダー要素コンテンツのナビゲーションを設定する* / 13である .nav { 14 幅：1000px ; 15 背景色：＃6495ed ; 16 / * 除去が高崩壊*を/ 17 オーバーフロー：隠された、 18である * / ナビゲーションセンター、余白上* / 19。 マージン：20ピクセル自動; 20は 21であり、 22は } 23である * / クリア弾丸のLiの前* / 24 リチウム.nav { 25 リストスタイル：なし; 26である * / 横方向の内容を設定したが、親要素の高さの崩壊をもたらすであろう* / 27 フロート：左; 28 / * 各コンテンツの指定された幅* / 29 幅：25％; 30 31である } 32 .nav { 33れる / * ブロック要素に変換する* / 34で 表示：ブロック; 35 / * ハイパーリンク下線、フォント変更や白太字を削除* / 36 テキスト装飾：なし; 37 [ フォント："マイクロソフトyahei" ; 38である カラー：ホワイト、 39 フォント重量：太字; 40 幅：100％; 41である / * センタリング* / 42である テキストALIGN =左：センター; 43である / * セットパディング* / 44は、 パディング：5pxの0 ; 45 46である } 47 / * 鼠标移入换颜色* / 48 .nav：ホバー{ 49 背景色：＃1 C00 。 50 } 51 </ スタイル> 52 </ ヘッド> 53 < ボディ> 54 < UL クラス= "NAV" > 55 < リチウム> < HREF = "＃" >首页</ A > </ 李> 56 < リー> < >内容</ A > </ 李> 57 < リチウム> < HREF = "＃" >联系</ A > </ 李> 58 < リチウム> < HREF = "＃" >关于</ A > </ 李> 59 </ UL > 60 </ ボディ> 61 </ HTML >
結果の写真
マウスが移動した赤の色
あなたは、いくつかのより多くのリンクを追加したい場合は、幅を変更することができます