ホームページ >ウェブフロントエンド >CSSチュートリアル >ul タグと li タグを使用して CSS 水平ナビゲーション メニューを作成します
ul タグと li タグを使用して CSS 水平ナビゲーション メニューを作成します
- 高洛峰オリジナル
- 2016-11-24 11:45:492264ブラウズ
おそらく、CSS スタイルのテキスト ナビゲーション バーを作成する最も簡単な解決策は、すべてのリンクをテキスト行に配置することです。この方法は合理的で直感的だと思われます。しかし問題は、すべてのリンクを 1 行のテキストに入れると、リンク間およびリンクの前後の空白を制御するのが難しくなるということです。したがって、すべてのリンクが混雑するのを避けるために、通常は、テキストを分離し、混在しないようにするために、区切り文字として何かまたは改行以外の空白文字を挿入する必要があります。
現在の通常のアプローチは、ul タグと li タグを使用してリンクを順序なしリストとして識別することです。次に、CSS スタイルを適用してそれを制御し、予想どおりコンテナーに表示します。ナビゲーション バーに順序なしリストを使用することは直観に反しているように思えます。なぜなら、順序なしリストを垂直方向に押し上げられたリスト項目として、それぞれの前にリスト プリセット マークが配置されるものと考えることに慣れているからです。これは、ナビゲーション バーの水平方向と矛盾しているように見えます。ただし、独立したリスト アイテムのコレクションとしてのリストの論理構造は、ナビゲーション バーのリンクに適用できます。また、CSS ルールを使用すると、リスト アイテムのデフォルトの表示を強制的に削除して、コンテナ内でリスト アイテムを水平に配置することができます。 、トップダウンのルールではなく。次に、順序なしリストに基づいて CSS スタイルと XHTML タグを使用して水平ナビゲーション メニューを作成する例を見てみましょう。
<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; 値を変更して試してみてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WebCSSの優先度次の記事：WebCSSの優先度