CSS コードを使用して Web サイトのナビゲーションバーを作成するにはどうすればよいですか? （例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS コードを使用して Web サイトのナビゲーションバーを作成するにはどうすればよいですか? （例）

藏色散人

Aug 25, 2018 am 09:40 AM

この記事では、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>

ログイン後にコピー

上記の効果は次のとおりです:

CSS コードを使用して Web サイトのナビゲーションバーを作成するにはどうすればよいですか? （例）

2.の効果は次のとおりです。画像:

CSS コードを使用して Web サイトのナビゲーションバーを作成するにはどうすればよいですか? （例）
ここで必要となる主な重要な知識:

display: その属性は、要素が生成するボックスのタイプを指定します。この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメントタイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

display:inline; - デフォルトでは、

要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して 1 行を表示します。

つまり、上記は、Web ページで CSS ナビゲーションを使用する方法の問題への関連した紹介であり、一定の参考価値があります。お役に立てれば幸いです。

以上がCSS コードを使用して Web サイトのナビゲーションバーを作成するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。