トップナビゲーションバーメニューを作成するためのHTML+CSS

ナビゲーションバーの作成:

技術要件:

CS
HTMLタグ

達成目的:

ナビゲーションバーメニューの作成

コード分析:

ベーシックスタイルクリア
順序なしのオリジン削除
下線削除
テキストはデフォルトで中央に配置されます
aタグはブロックレベル要素を設定する
擬似クラスセレクタはa状態を変更する

ステップバイステップの実装:

3列レイアウト: フロートの使用

ロゴ用に 1 列、選択用に 1 列、検索用に 1 列

ロゴ部分:

imgタグ、画像のインポート、タグハイパーリンク、img画像のインポート、画像の歪みを防ぐには、幅と高さを1つだけ設定する

<div class="logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Noodles.jpg" width="150" alt="Huizhou Hakka Noodles">
              </a>
          </div>

列を選択: ul>li タグ

リストタグ、タグハイパーリンク

<ul class="list">
              <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>
              <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>

検索バー:

フォントフォーム、入力属性、入力ボックス、ボタン

<div class="検索">
              <フォーム>
                   <input type="submit" value="検索" class="search1">
                  <入力タイプ="テキスト" クラス="コンテンツ1">
                 
              </フォーム>
  </div>

実装分析:

まず、本文にサイトヘッダーボックスを設定し、ヘッダーボックス内にセンターボックスを配置します。

<div class="header">
      <div class="container" クリアフィックス>
</div>
      </div>

ロゴ、選択バー、検索バーを中央のボックスに配置する

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>恵州客家麺</title>
</head>
<本文>
 <div class="header">
     <div class="container" クリアフィックス>
         <div class="logo">
             <a href="#">
                 <img src="D:\Desktop\Internet+ 起業コンテスト/恵州客家麺素材/WeChat Picture_20210423194229.jpg" width="150" alt="恵州客家麺">
             </a>
         </div>
         <ul class="リスト">
             <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>
             <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>
         <div class="検索">
             <フォーム>
                  <input type="submit" value="検索" class="search1">
                 <入力タイプ="テキスト" クラス="コンテンツ1">
                
             </フォーム>
 </div>
     </div>

 </div>
</本文>
</html>

実装1:

ここに画像の説明を挿入

ちょっと綺麗さが足りない気がします？CSSを使ってみましょう！

CSSコード:

a タグの下線を削除し、li タグの順序なしオリジンを削除して、1 行に表示します。

。ヘッダ{
    幅: 100%;
    高さ: 100px;
    背景色: rgb(207, 238, 238);
    位置: 相対的;
}

。容器{
    幅: 1226ピクセル;
    高さ: 20px;
    マージン: 0 自動;
}

.ヘッダー .ロゴ{
    フロート: 左;
    上マージン: 25px;
}

.logo a{
    表示: ブロック;
    幅: 150ピクセル;
    高さ: 150px;
}

.ヘッダー .リスト{
    フロート: 左;
    幅: 820ピクセル;
    高さ: 88px;
    パディング: 12px 0 0 30px;
}

クリアフィックス::後{
    コンテンツ： '';
    クリア: 両方;
    表示: ブロック;
}

{
    テキスト装飾: なし;
}

.ヘッダー li{
    フロート: 左;
    リストスタイル: なし;
}

.リスト li{
    パディング: 28px 10px 38px ;
    表示: ブロック;
    色: rgb(68, 57, 5);
}

 。検索{
    フロート: 右;
    幅: 296ピクセル;
    上マージン: 10px;
    位置: 絶対;
    上: 28px;
    右: 53px;
}
.検索フォーム{
    高さ: 50px;
    幅: 296ピクセル;
} 

 .content1{
     表示: ブロック;
    幅: 223px;
    高さ: 48px;
    境界線: 1px 実線 #e0e0e0;
    パディング: 0 10px;
    フロート:右;
    
}

.検索1{
    幅: 49px;
    高さ: 49px;
    フロート: 右;
} 

.list li:hover{
    色: rgb(168, 81, 81);
    フォントサイズ:大きい;
}

外部インポートを使用する:

<link rel="stylesheet" href="恵州客家麺.css">

最後に、整理してみましょう。

HTMLファイルを作成し、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <link rel="stylesheet" href="恵州客家麺.css">
  <title>恵州客家麺</title>
</head>
<本文>
  <div class="header">
      <div class="container" クリアフィックス>
          <div class="logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Noodles.jpg" width="150" alt="Huizhou Hakka Noodles">
              </a>
          </div>
          <ul class="リスト">
              <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>
              <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>
          <div class="検索">
              <フォーム>
                   <input type="submit" value="検索" class="search1">
                  <入力タイプ="テキスト" クラス="コンテンツ1">
                 
              </フォーム>
  </div>
      </div>

  </div>
</本文>
</html>

CSS ファイルを作成し、次のコードを入力します。

。ヘッダ{
  幅: 100%;
  高さ: 100px;
  背景色: rgb(207, 238, 238);
  位置: 相対的;
}

。容器{
  幅: 1226ピクセル;
  高さ: 20px;
  マージン: 0 自動;
}

.ヘッダー .ロゴ{
  フロート: 左;
  上マージン: 25px;
}

.logo a{
  表示: ブロック;
  幅: 150ピクセル;
  高さ: 150px;
}

.ヘッダー .リスト{
  フロート: 左;
  幅: 820ピクセル;
  高さ: 88px;
  パディング: 12px 0 0 30px;
}

クリアフィックス::後{
  コンテンツ： '';
  クリア: 両方;
  表示: ブロック;
}

{
  テキスト装飾: なし;
}

.ヘッダー li{
  フロート: 左;
  リストスタイル: なし;
}

.リスト li{
  パディング: 28px 10px 38px ;
  表示: ブロック;
  色: rgb(68, 57, 5);
}

 。検索{
  フロート: 右;
  幅: 296ピクセル;
  上マージン: 10px;
  位置: 絶対;
  上: 28px;
  右: 53px;
}
.検索フォーム{
  高さ: 50px;
  幅: 296ピクセル;
} 

.content1{
   表示: ブロック;
  幅: 223px;
  高さ: 48px;
  境界線: 1px 実線 #e0e0e0;
  パディング: 0 10px;
  フロート:右;
  
}

.検索1{
  幅: 49px;
  高さ: 49px;
  フロート: 右;
} 

.list li:hover{
  色: rgb(168, 81, 81);
  フォントサイズ:大きい;
}

実装2:

ここに画像の説明を挿入

アイコン上でマウスを動かすとフォントが拡大します。

制作ガイド:

ロゴの位置を画像の位置に変更します。alt 属性は、Web ページ上の画像を表示できない場合に使用される単語です。
「li」タグのa属性はリンク先のウェブページをハイパーリンクし、「li」タグ内のテキストはリンク先のテキストに置き換えられます。
CSS **.header background-color:** の背景色を希望の色に変更します。
「li」タグ内のフォント効果については、CSS の **.list li:hover** を変更します。

色の変化:

。ヘッダ{
  幅: 100%;
  高さ: 100px;
  背景色: rgb(207, 238, 238);
  位置: 相対的;
}

ラベル効果:

.list li:hover{
  色: rgb(168, 81, 81);
  フォントサイズ:大きい;
}

HTML+CSS を使用してトップナビゲーションバーメニューを作成する方法については、これで終わりです。HTML CSS トップナビゲーションバーメニューの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS 極座標のサンプルコード

>>: HTML CSS3は画像表示効果を引き伸ばさない