ナビゲーション バー
ナビゲーション バーを上手に使用することは、どの Web サイトにとっても非常に重要です。
CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。
ナビゲーション バー = リンク リスト
標準の HTML ベースとして、ナビゲーション バーは必須です
。この例では、標準の HTML リスト ナビゲーション バーを構築します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>
垂直ナビゲーションバー
上記のコードでは、垂直ナビゲーションバーを作成するために <a> 要素のスタイルのみが必要です
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>例の説明:
display:block - ブロック要素のリンクを表示します, リンク領域全体が (テキストだけでなく) クリック可能になり、幅を指定できるようになります
width:60px - ブロック要素はデフォルトで max-width です。幅を 60 ピクセルに指定する必要があります
注: 垂直ナビゲーション バーの <a> 要素の幅を必ず指定してください。 width を省略すると、IE6 で予期しない影響が生じる可能性があります。
水平ナビゲーション バー
水平ナビゲーション バーを作成するには 2 つの方法があります。インラインまたはフローティング リスト項目を使用します。
どちらの方法でも問題ありませんが、リンクを同じサイズにしたい場合は、float メソッドを使用する必要があります。
インライン リスト項目
水平ナビゲーション バーを作成する方法の 1 つは、
要素を指定することです。上記のコードは標準のインラインです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>フローティング リスト項目
上の例では、リンクの幅が異なります。
すべてのリンクを同じ幅にするには、<li> 要素をフロートにして、<a> 要素の幅を指定します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>分析の例:
float:left - それぞれに対して float 要素を使用してスライドします。その他
display:block - ブロック要素のリンクを表示し、リンク領域全体 (テキストだけでなく) をクリック可能にし、幅を指定できます
width:60px - ブロック要素はデフォルトで最大幅を持ちます。幅を60ピクセルに指定したいです
次のセクション