CSSナビゲーションバー
CSS ナビゲーション バー
ナビゲーション バー
ナビゲーション バーを上手に使用することは、どの Web サイトにとっても非常に重要です。
CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。
ナビゲーション バー = リンクのリスト
標(biāo)準(zhǔn)の HTML ベースとして、ナビゲーション バーは必須です
この例では、標(biāo)準(zhǔn)の HTML リスト ナビゲーション バーを構(gòu)築します。
ナビゲーションバーは基本的にリンクされたリストなので、<ul> 要素と <li> 要素を使用するのは非常に理にかなっています:
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>注意:我們用 href="#"作為測試連接.用在一個真正的web站點(diǎn)的url。</p> </body> </html>
次に、リストからマージンとパディングを削除しましょう:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>分析例:
- list-style-type:none - リストの前にある小さなマークを削除します。ナビゲーション バーにはリスト マークアップは必要ありません
- ブラウザのマージンとパディングのデフォルト設(shè)定を 0 に削除します
上の例のコードは、垂直および水平ナビゲーション バーに使用される標(biāo)準(zhǔn)コードです。
垂直ナビゲーションバー
上記のコードでは、垂直ナビゲーションバーを作成するために <a> 要素のスタイルのみが必要です:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>例の説明:
- display:block - ブロック要素へのリンクを表示し、(テキストだけでなく) リンク領(lǐng)域全體をクリック可能にし、幅を指定できます
- width:60px - ブロック要素はデフォルトで最大幅を持ちます。幅を 60 ピクセルに指定したいと考えています
注: 垂直ナビゲーション バーの 要素の幅を必ず指定してください。
水平ナビゲーション バー
水平ナビゲーション バーを作成するには 2 つの方法があります。リスト項(xiàng)目には inline または float を使用します。
どちらの方法でも問題ありませんが、リンクを同じサイズにしたい場合は、float メソッドを使用する必要があります。
インライン リスト項(xiàng)目
水平ナビゲーション バーを作成する方法の 1 つは、
要素を指定することです。上記のコードは標(biāo)準(zhǔn)のインラインです:Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>分析例:
- display:inline; - デフォルトでは、
- 要素はブロック要素です。ここでは、各リスト項(xiàng)目の前後の改行を削除して 1 行を表示します。
フローティングリスト項(xiàng)目
上の例では、リンクの幅が異なります。
すべてのリンクを同じ幅にするには、<li> 要素を浮動小數(shù)點(diǎn)にして、<a> 要素の幅を指定します:
分析例:
- float:left - フローティングブロック要素を隣り合わせて使用??するスライド
- display:block - ブロック要素のリンクを表示し、全體をクリック可能なリンクエリア (テキストだけでなく) にし、指定できるようにしますwidth
- width:60px - ブロック要素はデフォルトで最大幅です。幅を60ピクセルに指定したいです
