ul タグと li タグを使用して CSS 水平ナビゲーションメニューを作成します-CSSチュートリアル-php.cn

ul タグと li タグを使用して CSS 水平ナビゲーションメニューを作成します

高洛峰

リリース： 2016-11-24 11:45:49

オリジナル

2273 人が閲覧しました

おそらく、CSS スタイルのテキストナビゲーションバーを作成する最も簡単な解決策は、すべてのリンクをテキスト行に配置することです。この方法は合理的で直感的だと思われます。しかし問題は、すべてのリンクを 1 行のテキストに入れると、リンク間およびリンクの前後の空白を制御するのが難しくなるということです。したがって、すべてのリンクが混雑するのを避けるために、通常は、テキストを分離し、混在しないようにするために、区切り文字として何かまたは改行以外の空白文字を挿入する必要があります。

現在の通常のアプローチは、ul タグと li タグを使用してリンクを順序なしリストとして識別することです。次に、CSS スタイルを適用してそれを制御し、予想どおりコンテナーに表示します。ナビゲーションバーに順序なしリストを使用することは直観に反しているように思えます。なぜなら、順序なしリストを垂直方向に押し上げられたリスト項目として、それぞれの前にリストプリセットマークが配置されるものと考えることに慣れているからです。これは、ナビゲーションバーの水平方向と矛盾しているように見えます。ただし、独立したリストアイテムのコレクションとしてのリストの論理構造は、ナビゲーションバーのリンクに適用できます。また、CSS ルールを使用すると、リストアイテムのデフォルトの表示を強制的に削除して、コンテナ内でリストアイテムを水平に配置することができます。、トップダウンのルールではなく。次に、順序なしリストに基づいて CSS スタイルと XHTML タグを使用して水平ナビゲーションメニューを作成する例を見てみましょう。

CSS コード

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

ログイン後にコピー

この CSS コードをもう一度見てみましょう:

CSS コード

#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    whitewhite-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

ログイン後にコピー

上記のコードの完全な HTML を見て、コピーして HTML に入れてみましょう。効果を確認できます:

XML/HTML コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>www.52css.com</title>  
<style type="text/css">  
<!--    
#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    white-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}   
-->  
</style>  
</head>  
<body>  
<div id="nav">  
  <ul>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

ログイン後にコピー

上記のコードを分析してみましょう:

xhtml コードは、最初にコンテナ div id="nav" を定義します。このコンテナは、この順序なしリストの水平ナビゲーションメニューのコンテンツを配置するために使用されますが、このコンテナは冗長であると考えて、単に ul id="nav" を定義するだけの人もいます。これを行うことはお勧めしません。当社のサイトはスケーラブルであり、ナビゲーションスタイルがより複雑になるように設計されている場合、UL だけではニーズを満たせないことを知っておいてください。このようなコンテナの定義は、コーディングの習慣にもより一致しています。

#nav はウィンドウの幅、高さ、背景色を定義します。 #nav ul には、マージンとパディングの宣言、フォントと色の宣言が含まれます。 line-height: 30px; は非常に重要な定義です。行の高さの定義がキャンセルされると、リンクテキストの垂直方向のセンタリングが影響を受ける可能性があります。これは、テキストが終了するか br オブジェクトに遭遇するまで、すべてのテキストが強制的に同じ行に表示されることを定義しています。

List-style-type: none in #nav li は、リスト項目で使用されるデフォルトのタグを削除します。リストマークアップのないプレーンテキストに近づけます。 display: inline; ステートメントを使用すると、各項目を別の行に表示して上から下に配置するのではなく、リスト項目をページ上で左から右にフローティングできます。これら 2 つのステートメントは、順序なしリストの水平ナビゲーションメニューの実装の鍵となります。

#nav li a と #nav li a:hover はリンクのスタイルを定義します。内容については詳しく説明しません。padding: 7px 10px; 値を変更して試してみてください。