コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

水平ナビゲーションと垂直ナビゲーション バーを実装する CSS メソッド (コード)

不言
リリース： 2018-08-21 10:53:43
オリジナル
17549 人が閲覧しました

この記事の内容はCSSで水平ナビゲーションと垂直ナビゲーションバーを実装する方法(コード)です。必要な方は参考にしていただければ幸いです。

1. 垂直ナビゲーション 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}

a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>
ログイン後にコピー

実行結果:

水平ナビゲーションと垂直ナビゲーション バーを実装する CSS メソッド (コード)

2. 水平ナビゲーション: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>
ログイン後にコピー

実行結果:

水平ナビゲーションと垂直ナビゲーション バーを実装する CSS メソッド (コード)

注:

1. タグの display=block により、リンクテキストではなくクリック可能な領域です。

2. ブロック要素としてリンクを指定した後、各リンクの幅が同じになるように幅を設定できます。

関連する推奨事項:

div CSS ナビゲーション バー (全画面 CSS ナビゲーション バー)_html/css_WEB-ITnose

CSS 画像ナビゲーション_html/css_WEB-ITnose

以上が水平ナビゲーションと垂直ナビゲーション バーを実装する CSS メソッド (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css导航
ソース：php.cn
前の記事：CSS3でテキストのグラデーションを実装するにはどうすればよいですか? CSS3でテキストグラデーションを実装する3つの方法（コード） 次の記事：CSSでドロップダウンメニューを実装するにはどうすればよいですか? CSSでドロップダウンメニューを実装する方法（完全なコード）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
から 2024-04-06 15:04:41
0
2
347
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート