HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作

發(fā)布時間：2021-06-03 17:06:41 作者：一號程序猿

我要評論

導(dǎo)航對于任何網(wǎng)站都很重要，本文主要介紹了HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作，具有一定的參考價值，感興趣的小伙伴們可以參考一下

導(dǎo)航欄的制作：

技術(shù)要求：

CSS
HTML各類標簽

實現(xiàn)目的：

制作導(dǎo)航欄菜單

代碼分析：

基本樣式清除
無序列原點刪除
下劃線刪除
文字默認居中
a標簽設(shè)置塊級元素
偽類選擇器對a狀態(tài)修飾

分步實現(xiàn)：

分三欄布局：使用浮動

logo一欄；選擇欄一欄；搜索欄一欄

logo部分：

img標簽，導(dǎo)入圖片，a標簽超鏈接，img導(dǎo)入圖片，防止圖片失真width和height設(shè)置一個就可以了

<div class="logo">
              <a href="#">
                  <img src="D:\惠州客家面.jpg" width="150" alt="惠州客家面">
              </a>
          </div>

選擇欄：ul>li標簽

列表標簽，a標簽超鏈接

<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>

搜索欄：

font表單，input屬性，輸入框和按鈕

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

實現(xiàn)分析：

首先在body內(nèi)設(shè)置一個站點的頭部盒子，頭部盒子里面有一個中心的盒子。

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

把logo，選擇欄，搜索欄放入中心盒子中

<!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>惠州客家面</title>
</head>
<body>
 <div class="header">
     <div class="container" clearfix>
         <div class="logo">
             <a href="#">
                 <img src="D:\桌面\互聯(lián)網(wǎng)+創(chuàng)業(yè)大賽/惠州客家面素材/微信圖片_20210423194229.jpg" width="150" alt="惠州客家面">
             </a>
         </div>
         <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="search">
             <form>
                  <input type="submit" value="搜索" class="search1">
                 <input type="text" class="content1">
                
             </form>
 </div>
     </div>

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

實現(xiàn)1：

在這里插入圖片描述

是不是感覺不夠美觀，我們使用CSS試試看吧！

CSS代碼：

刪除a標簽下劃線，刪除li無序列原點，在一行上顯示。

.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;
}

使用外部式引入：

<link rel="stylesheet" href="惠州客家面.css">

最后梳理一下：

創(chuàng)建一個HTML文件，輸入以下代碼

<!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="惠州客家面.css">
  <title>惠州客家面</title>
</head>
<body>
  <div class="header">
      <div class="container" clearfix>
          <div class="logo">
              <a href="#">
                  <img src="D:\惠州客家面.jpg" width="150" alt="惠州客家面">
              </a>
          </div>
          <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="search">
              <form>
                   <input type="submit" value="搜索" class="search1">
                  <input type="text" class="content1">
                 
              </form>
  </div>
      </div>

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

創(chuàng)建一個CSS文件，輸入以下代碼。

.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;
}

實現(xiàn)2：

在這里插入圖片描述

鼠標動一下圖標，字體可以變大哦。

制作攻略：

把logo的位置換成你圖片的位置，alt屬性是網(wǎng)頁圖片展示不出來時的字。
“li”標簽里的a屬性超鏈接想要鏈接的網(wǎng)頁，“li”標簽里面的文字換成你想要的的文字
背景顏色在CSS中**.header中的background-color:**進行修改，變成你想要的的顏色。
對于“li”標簽中字體的特效，在CSS中**.list li:hover**進行修改。

變色：

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

標簽特效：

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

到此這篇關(guān)于HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作的文章就介紹到這了,更多相關(guān)HTML CSS 頂部導(dǎo)航欄菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：HTML css 頂部導(dǎo)航欄

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作

導(dǎo)航欄的制作：

技術(shù)要求：

代碼分析：

分步實現(xiàn)：

實現(xiàn)分析：

最后梳理一下：

制作攻略：

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容