トップナビゲーションバーメニュー作成用HTML+CSS

2022-01-21 09:25:03

でナビゲーションバーが作成されます。

技術的要件

CSS
HTML各種タグ

実装の目的。

ナビゲーションバーメニューを作る

コード解析

基本スタイルのクリア
シーケンス原点削除なし
アンダースコア削除
デフォルトでテキストを中央揃えにする
タグはブロックレベル要素を設定します。
ステートモディファイアの擬似クラスセレクタ

ステップ・バイ・ステップで実装する。

3列でのレイアウト：floatの使用

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

ロゴの部分です。

imgタグ、画像取り込み、aタグハイパーリンク、img画像取り込み、画像の歪み防止幅・高さ設定on

<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="#">pork feet noodles</a>
              </li>
              <li>
                  <a href="#">BBQ pork noodles</a>
              </li>
              <li>
                  <a href="#">Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Lo Mein Noodles</a>
              </li>
              <li>
                  <a href="#">Saison</a>
              </li>
              <li>
                  <a href="#">Sakura Noodles</a>
              </li>
              <li>
                  <a href="#">Pork feet and barbecued pork noodles</a>
              </li>
              <li>
                  <a href="#">Pork Feet Marinated Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Pork Feet Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">BBQ pork ball noodles</a>
              </li>
          </ul>

検索バーです。

フォントフォーム、入力プロパティ、入力ボックス、ボタン

<div class="search">
              <form>
                   <input type="submit" value="search" class="search1">
                  <input type="text" class="content1">
                 
              </form>
  </div>

実装の解析。

まずボディ内にサイトヘッダーボックスを設置し、ヘッダーボックスの内側にセンターボックスを設置します。

<div class="header">
      <div class="container" clearfix>
</div>
      </div>

ロゴ、選択バー、検索バーを中央のボックスに入れる

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Huizhou Hakka Noodles</title>
</head>
<body>
 <div class="header">
     <div class="container" clearfix>
         <div class="logo">
             <a href="#">
                 <img src="D:\Desktop\Internet+EntrepreneurshipCompetition/Huizhou Hakka Noodle Material/WeChat Picture_20210423194229.jpg" width="150" alt="Huizhou Hakka Noodle">
             </a>
         </div>
         <ul class="list">
             <li>
                 <a href="#">pork feet noodles</a>
             </li>
             <li>
                 <a href="#">BBQ pork noodles</a>
             </li>
             <li>
                 <a href="#">Meatball Noodles</a>
             </li>
             <li>
                 <a href="#">Lo Mein Noodles</a>
             </li>
             <li>
                 <a href="#">Saison</a>
             </li>
             <li>
                 <a href="#">Sakura Noodles</a>
             </li>
             <li>
                 <a href="#">Pork feet and barbecued pork noodles</a>
             </li>
             <li>
                 <a href="#">Pork Feet Marinated Egg Noodles</a>
             </li>
             <li>
                 <a href="#">Pork Feet Meatball Noodles</a>
             </li>
             <li>
                 <a href="#">BBQ pork ball noodles</a>
             </li>
         </ul>
         <div class="search">
             <form>
                  <input type="submit" value="search" class="search1">
                 <input type="text" class="content1">
                
             </form>
 </div>
     </div>

 </div>
</body>
</html>

実装1．

これではダメだ、CSSでやってみよう!

CSSのコードです。

タグのアンダースコアを削除、liの配列の原点を削除、1行に表示。

.header{
    width: 100%;
    height: 100px;
    background-color: rgb(207, 238, 238);
    position: relative;
}

.container{
    width: 1226px;
    height: 20px;
    margin: 0 auto;
}

.header .logo{
    float: left;
    margin-top: 25px;
}

.logo a{
    display: block;
    width: 150px;
    height: 150px;
}

.header .list{
    float: left;
    width: 820px;
    height: 88px;
    padding: 12px 0 0 30px;
}

clearfix::after{
    content: '';
    clear: both;
    display: block;
}

a{
    text-decoration: none;
}

.header li{
    float: left;
    list-style: none;
}

.list Final combinations.
Create an HTML file and enter the following code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Huizhou Hakka Noodles.css">
  <title>Huizhou Hakka Noodles</title>
</head>
<body>
  <div class="header">
      <div class="container" clearfix>
          <div class="logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Noodles.jpg" width="150" alt="Huizhou Hakka Noodles">
              </a>
          </div>
          <ul class="list">
              <li>
                  <a href="#">pork feet noodles</a>
              </li>
              <li>
                  <a href="#">BBQ pork noodles</a>
              </li>
              <li>
                  <a href="#">Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Lo Mein Noodles</a>
              </li>
              <li>
                  <a href="#">Saison</a>
              </li>
              <li>
                  <a href="#">Sakura Noodles</a>
              </li>
              <li>
                  <a href="#">Pork feet and barbecued pork noodles</a>
              </li>
              <li>
                  <a href="#">Pork Feet Marinated Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Pork Feet Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">BBQ pork ball noodles</a>
              </li>
          </ul>
          <div class="search">
              <form>
                   <input type="submit" value="search" class="search1">
                  <input type="text" class="content1">
                 
              </form>
  </div>
      </div>

  </div>
</body>
</html>

Create a CSS file and enter the following code.
.header{
  width: 100%;
  height: 100px;
  background-color: rgb(207, 238, 238);
  position: relative;
}

.container{
  width: 1226px;
  height: 20px;
  margin: 0 auto;
}

.header .logo{
  float: left;
  margin-top: 25px;
}

.logo a{
  display: block;
  width: 150px;
  height: 150px;
}

.header .list{
  float: left;
  width: 820px;
  height: 88px;
  padding: 12px 0 0 30px;
}

clearfix::after{
  content: '';
  clear: both;
  display: block;
}

a{
  text-decoration: none;
}

.header li{
  float: left;
  list-style: none;
}

.list li{
  padding: 28px 10px 38px ;
  display: block;
  color: rgb(68, 57, 5);
}

 .search{
  float: right;
  width: 296px;
  margin-top: 10px;
  position: absolute;
  top: 28px;
  right: 53px;
}
.search form{
  height: 50px;
  width: 296px;
} 

.content1{
   display: block;
  width: 223px;
  height: 48px;
  border: 1px solid #e0e0e0;
  padding: 0 10px;
  float:right;
  
}

.search1{
  width: 49px;
  height: 49px;
  float: right;
} 

.list li:hover{
  color: rgb(168, 81, 81);
  font-size: larger;
}



Implementation 2.
If you move the icon with the mouse, the font will be bigger.
Tips for making.
Change the location of the logo to the location of your image. The alt attribute is the word used when the web image is not displayed.
The a attribute in the "li" tag hyperlinks to the page you want to link to, and the text in the "li" tag is replaced with the text you want.
The background color is modified in the CSS **.header with background-color:** to the color you want.
For the effects of the font in the "li" tag, modify it in the CSS **.list li:hover**.


Color change.
.header{
  width: 100%;
  height: 100px;
  background-color: rgb(207, 238, 238);
  position: relative;
}


Tag effects.
.list li:hover{
  color: rgb(168, 81, 81);
  font-size: larger;
}

This article about HTML + CSS top navigation bar menu production is introduced here, more related HTML CSS top navigation bar menu content please search the script home previous articles or continue to browse the following related articles, I hope you support the script home more in the future!

トップナビゲーションバーメニュー作成用HTML+CSS

でナビゲーションバーが作成されます。

技術的要件

コード解析

ステップ・バイ・ステップで実装する。

実装の解析。

Final combinations.

Tips for making.

関連

最新

おすすめ