HTML+CSS 实现顶部导航栏菜单制作 游戏攻略

导航栏的制作：

技术要求：

•  CSS
• HTML各类标签

实现目的：

制作导航栏菜单

代码分析：

•  基本样式清除
• 无序列原点删除
• 下划线删除
• 文字默认居中
• a标签设置块级元素
• 伪类选择器对a状态修饰

分步实现：

分三栏布局：使用浮动

logo一栏；选择栏一栏；搜索栏一栏

logo部分：

img标签，导入图片，a标签超链接 ，img导入图片，防止图片失真width和height设置一个就可以了

选择栏：ul>li标签

列表标签，a标签超链接

              

                  猪脚面
              
              

                  叉烧面
              
              

                  肉丸面
              
              

                  卤蛋面
              
              

                  斋面
              
              

                  樱花面
              
              

                  猪脚叉烧面
              
              

                  猪脚卤蛋面
              
              

                  猪脚肉丸面
              
              

                  叉烧肉丸面
              
          

搜索栏：

font表单，input属性，输入框和按钮

实现分析：

首先在body内设置一个站点的头部盒子，头部盒子里面有一个中心的盒子。

把logo，选择栏，搜索栏放入中心盒子中

 
 
 
 


 

     

         

             
                 
             
         
         

             

                 猪脚面
             
             

                 叉烧面
             
             

                 肉丸面
             
             

                 卤蛋面
             
             

                 斋面
             
             

                 樱花面
             
             

                 猪脚叉烧面
             
             

                 猪脚卤蛋面
             
             

                 猪脚肉丸面
             
             

                 叉烧肉丸面
             
         
         

             

                  
                 
                
             
 
     

 

实现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;
}

使用外部式引入：

最后梳理一下：

创建一个HTML文件，输入以下代码

  
  
  
  
  


  

      

          

              
                  
              
          
          

              

                  猪脚面
              
              

                  叉烧面
              
              

                  肉丸面
              
              

                  卤蛋面
              
              

                  斋面
              
              

                  樱花面
              
              

                  猪脚叉烧面
              
              

                  猪脚卤蛋面
              
              

                  猪脚肉丸面
              
              

                  叉烧肉丸面
              
          
          

              

                   
                  
                 
              
  
      

  

创建一个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;
}

实现2：

鼠标动一下图标，字体可以变大哦。

制作攻略：

• 把logo的位置换成你图片的位置，alt属性是网页图片展示不出来时的字。
• “li”标签里的a属性超链接想要链接的网页，“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;
}

到此这篇关于HTML+CSS 实现顶部导航栏菜单制作的文章就介绍到这了,更多相关HTML CSS 顶部导航栏菜单内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！