' また ' <セクション> ” タグも使用できますが、” を使用することをお勧めします。 <ヘッダー> ' 鬼ごっこ。次に、「 ヘッダ 」ヘッダー セクションに CSS スタイルを適用するクラス。その後、「

」タグを付けて、「」のクラスを割り当てます 見出し 」 コンテンツ「Linuxhint へようこそ!」を表示するには:

<ヘッダー クラス = 'ヘッダ' >

< h1 クラス = '見出し' > Linuxhint へようこそ! < / h1 >

< / ヘッダー>

その後、「 <ヘッダー> 」 タグ クラスを作成し、次のスタイルを割り当てます。

---

---

。ヘッダ {

背景画像: url ( 「../bg.jpg」 ) ;

バックグラウンド- サイズ ： カバー;

バックグラウンドリピート: リピートなし;

色 ： 白い煙;

背景位置: 上;

パディング: 0px 20px 20px 20px;

}

上記のコードの説明は次のとおりです。

• まず、画像を設定します」 bg.jpg 」を使用してヘッダー セクションの背景として 背景画像 ' 財産。
• 次に、「 背景サイズ ' と ' バックグラウンドリピート 」プロパティは、それぞれ画像サイズを設定し、画像の繰り返しを停止するために使用されます。
• その後、「 色 ' と ' 背景位置 ' プロパティ。
• 結局、「 パディング 」プロパティは、ヘッダー コンテンツと境界線の間のスペースを設定するために使用されます。

上記のコードを実行すると、Web ページは次のようになります。

上記の出力は、ヘッダー セクションが作成され、CSS スタイルが適用されていることを示しています。

ステップ 2: ナビゲーション バーを作成する

ほとんどの場合、ヘッダーにはナビゲーション バーも含めることができます。ナビゲーションバーを作成するための HTML「 <なし> 」タグは非常に便利です。そのため、「 」タグを付け、「」のクラスを割り当てます 活動 」：

<ヘッダー クラス = 'ヘッダ' >

<なし>

< a クラス = '活動' href = 「#」 >ホーム< / a >

< a クラス = '活動' href = 「#」 >サービス< / a >

< a クラス = '活動' href = 「#」 >私たちについて< / a >

< a クラス = '活動' href = 「#」 >お問い合わせ< / a >

< a クラス = '活動' href = 「#」 >新着情報< / a >

< / いいえ>

< br >< br >

< h1 クラス = '見出し' > Linuxhint へようこそ! < / h1 >

< / ヘッダー>

上記のコードを実行すると、Web ページは次のようになります。

上記の出力は、navbar 項目が「 家 」、「 サービス 」、「 私たちに関しては 」、「 お問い合わせ ' と ' 新着 」が作成されました。

ステップ 3: スタイルを Navbar 項目に適用する

ナビゲーションバー項目のスタイルを設定するには、「 活動 」 クラスを作成し、次の CSS スタイル プロパティを割り当てます。

。活動 {

テキスト装飾: なし;

色 ： 白;

表示ブロック;

パディング:15px;

フォント- サイズ ： 大きい;

フロート: 左;

マージン: 0px 20px;

}

上記のコードの説明は次のとおりです。

• まず、「 テキスト装飾 」プロパティは「none」に設定され、「 ' 鬼ごっこ。
• ユーザーのテキストの視認性を高めるために、「 白 ' と ' 大きい 」値は「 色 ' そしてその ' フォントサイズ ' 財産。
• その後、「 画面 ' と ' 浮く 」プロパティは「 」タグを同じ行に表示します。
• 結局、「 パディング ' と ' マージン 」プロパティ値は、各「 」タグ間にスペースを作成するために使用されます。

上記のコードを実行すると、Web ページは次のようになります。

上記の出力は、navbar アイテムのスタイルが設定されたことを示しています。

ステップ 4: Navbar アイテムにホバー効果を追加する

上記の出力のように、ホバー効果は navbar アイテムでは使用できません。両方を追加するには、「 見出し 」に割り当てられたクラス

' 鬼ごっこ。その後、「 :ホバー ” セレクター 活動 」 ナビゲーションバー項目にホバー効果を適用するクラス:

.act:ホバー {

国境 : 2px ベタ白;

色 ： 青紫色;

}

。見出し {

文章- 整列する ： 中心;

マージン： 18 % 0px;

}

上記のコードの説明は次のとおりです。

• まず、「 国境 」 2px タイプのソリッドの「」を割り当て、白の「 色 」。それに伴い、「 青紫色 」 ユーザーがナビゲーションバーの項目にマウスを置いたときにのみ色を付けます。
• 次に、「 見出し ” クラスを作成し、その配置を “ 中心 セクションが大きく見えるようにマージンを設けます。

上記のコードを実行すると、ヘッダーの最終的な外観は次のようになります。

上記の出力は、ヘッダーが HTML と CSS を使用して作成されていることを示しています。

結論

HTML ファイルでは、「

」タグを使用してヘッダーのセクションを作成します。その後、ユーザーはパディングや背景画像などの CSS プロパティを適用して、ヘッダー セクションを強化できます。ナビゲーション バーなどのすべてのヘッダー要素に適用されます。ナビゲーション バーを作成するには、ユーザーは「