コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLでナビゲーションバーを作る方法

迷茫

リリース： 2017-03-25 15:26:46

オリジナル

6180 人が閲覧しました

今日は、簡単なナビゲーションバーの作成方法を共有します:

ステップ 1: CSS スタイルシートを導入し、ID nav で新しいレイヤーを作成し、

、< ;a> タグ完成したエフェクトが生成されます。

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body></html>

ログイン後にコピー

2 番目のステップは CSS スタイルを設定することです:

1. ナビゲーションの属性を設定します

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

ログイン後にコピー

表示効果は次のとおりです:

2.

#nav ul{
	list-style: none;
}

ログイン後にコピー

3 .

タグの属性を設定します

#nav ul li a{
	width: 98px;
	height: 50px;
	float: left;
	border: 1px solid red;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

ログイン後にコピー

最終的な効果:

完全な HTML コード部分:

#nav ul li a:hover{
	background-color: #ABCDEF;
}

ログイン後にコピー

CSS スタイルコード部分を完成させます :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
	</head>
	<body>
		<p id="nav">
			<ul>
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
			</ul>
		</p>
	</body>
</html>

ログイン後にコピー

以上がHTMLでナビゲーションバーを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

html，导航，一级导航

ソース：php.cn

前の記事：HTML フォームに関する包括的な知識次の記事：インライン要素、ブロックレベル要素、空要素の違いの詳細な説明

このウェブサイトの声明

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

著者別の最新記事

mysql実行関数mysql_query()の定義と使用例

1970-01-01 08:00:00
php を mysql データベースに接続するための詳細な手順 (画像とテキスト)

1970-01-01 08:00:00
SQL データベースの追加、削除、変更に関するグラフィカルなチュートリアル (phpMyAdmin の使用方法のチュートリアル)

1970-01-01 08:00:00
SQL データベースのインポートとエクスポートの手順のチュートリアル (図)

1970-01-01 08:00:00
SQLデータテーブルの視覚的な追加・削除・変更チュートリアル（phpMyAdminの使い方チュートリアル）

1970-01-01 08:00:00
SQL ステートメントを使用したデータテーブルの追加、削除、変更、クエリに関するチュートリアル (phpMyAdmin の使用方法のチュートリアル)

1970-01-01 08:00:00
Java マルチスレッドの基本の詳細な説明

1970-01-01 08:00:00
PHPで画像をファイルアップロード

2023-03-06 22:20:01
JS でオブジェクトを作成するいくつかの方法の概要

1970-01-01 08:00:00
JSのthisキーワードを深く理解する

1970-01-01 08:00:00

最新の問題

モバイルビューで、ユーザーがリンクをクリックしたときにこのナビゲーションバーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして 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

Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...

から 2024-04-06 11:35:59

0

1

456

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート