ホームページ > 記事 > ウェブフロントエンド > CSS コードを使用して Web サイトのナビゲーション バーを作成するにはどうすればよいですか? （例）
CSS コードを使用して Web サイトのナビゲーション バーを作成するにはどうすればよいですか? （例）
- 藏色散人オリジナル
- 2018-08-25 09:40:195544ブラウズ
この記事では、CSSを使用してナビゲーションバーを作成する方法に関する関連知識を主に紹介します。必要としている友人に役立つことを願っています。 Web サイトにとってナビゲーション バーの存在は非常に重要です。HTML を使用してつまらないナビゲーション メニューを作成した場合、効果は確実に低くなります。このとき、css属性の重要性が反映されます。
以下は CSS ナビゲーション コードの具体的な例です:
垂直ナビゲーション バー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css垂直导航代码示例</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>
</body>
</html>上記の効果は次のとおりです:
2.の効果は次のとおりです。 画像:
ここで必要となる主な重要な知識:
display: その属性は、要素が生成するボックスのタイプを指定します。この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。
display:inline; - デフォルトでは、
つまり、上記は、Web ページで CSS ナビゲーションを使用する方法の問題への関連した紹介であり、一定の参考価値があります。お役に立てれば幸いです。
以上がCSS コードを使用して Web サイトのナビゲーション バーを作成するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。