经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
HTML+CSS 实现顶部导航栏菜单制作_HTML/Xhtml
来源：jb51　　时间：2021/6/7 9:23:07　　对本文有异议

导航栏的制作：

技术要求：

  •  CSS
  • HTML各类标签

实现目的：

制作导航栏菜单

代码分析：

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

分步实现：

分三栏布局：使用浮动

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

logo部分：

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

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

选择栏：ul>li标签

列表标签，a标签超链接

  1. <ul class="list">
  2.               <li>
  3.                   <a href="#">猪脚面</a>
  4.               </li>
  5.               <li>
  6.                   <a href="#">叉烧面</a>
  7.               </li>
  8.               <li>
  9.                   <a href="#">肉丸面</a>
  10.               </li>
  11.               <li>
  12.                   <a href="#">卤蛋面</a>
  13.               </li>
  14.               <li>
  15.                   <a href="#">斋面</a>
  16.               </li>
  17.               <li>
  18.                   <a href="#">樱花面</a>
  19.               </li>
  20.               <li>
  21.                   <a href="#">猪脚叉烧面</a>
  22.               </li>
  23.               <li>
  24.                   <a href="#">猪脚卤蛋面</a>
  25.               </li>
  26.               <li>
  27.                   <a href="#">猪脚肉丸面</a>
  28.               </li>
  29.               <li>
  30.                   <a href="#">叉烧肉丸面</a>
  31.               </li>
  32.           </ul>

搜索栏：

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

  1. <div class="search">
  2.               <form>
  3.                    <input type="submit" value="搜索" class="search1">
  4.                   <input type="text" class="content1">
  5.                  
  6.               </form>
  7.   </div>

实现分析：

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

  1. <div class="header">
  2.       <div class="container" clearfix>
  3. </div>
  4.       </div>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  <title>惠州客家面</title>
  8. </head>
  9. <body>
  10.  <div class="header">
  11.      <div class="container" clearfix>
  12.          <div class="logo">
  13.              <a href="#">
  14.                  <img src="D:\桌面\互联网+创业大赛/惠州客家面素材/微信图片_20210423194229.jpg" width="150" alt="惠州客家面">
  15.              </a>
  16.          </div>
  17.          <ul class="list">
  18.              <li>
  19.                  <a href="#">猪脚面</a>
  20.              </li>
  21.              <li>
  22.                  <a href="#">叉烧面</a>
  23.              </li>
  24.              <li>
  25.                  <a href="#">肉丸面</a>
  26.              </li>
  27.              <li>
  28.                  <a href="#">卤蛋面</a>
  29.              </li>
  30.              <li>
  31.                  <a href="#">斋面</a>
  32.              </li>
  33.              <li>
  34.                  <a href="#">樱花面</a>
  35.              </li>
  36.              <li>
  37.                  <a href="#">猪脚叉烧面</a>
  38.              </li>
  39.              <li>
  40.                  <a href="#">猪脚卤蛋面</a>
  41.              </li>
  42.              <li>
  43.                  <a href="#">猪脚肉丸面</a>
  44.              </li>
  45.              <li>
  46.                  <a href="#">叉烧肉丸面</a>
  47.              </li>
  48.          </ul>
  49.          <div class="search">
  50.              <form>
  51.                   <input type="submit" value="搜索" class="search1">
  52.                  <input type="text" class="content1">
  53.                 
  54.              </form>
  55.  </div>
  56.      </div>
  57.  
  58.  </div>
  59. </body>
  60. </html>

实现1：

在这里插入图片描述

是不是感觉不够美观，我们使用CSS试试看吧！

CSS代码：

删除a标签下划线，删除li无序列原点，在一行上显示。

  1. .header{
  2.     width: 100%;
  3.     height: 100px;
  4.     background-color: rgb(207, 238, 238);
  5.     position: relative;
  6. }
  7.  
  8. .container{
  9.     width: 1226px;
  10.     height: 20px;
  11.     margin: 0 auto;
  12. }
  13.  
  14. .header .logo{
  15.     float: left;
  16.     margin-top: 25px;
  17. }
  18.  
  19. .logo a{
  20.     display: block;
  21.     width: 150px;
  22.     height: 150px;
  23. }
  24.  
  25. .header .list{
  26.     float: left;
  27.     width: 820px;
  28.     height: 88px;
  29.     padding: 12px 0 0 30px;
  30. }
  31.  
  32. clearfix::after{
  33.     content: '';
  34.     clear: both;
  35.     display: block;
  36. }
  37.  
  38. a{
  39.     text-decoration: none;
  40. }
  41.  
  42. .header li{
  43.     float: left;
  44.     list-style: none;
  45. }
  46.  
  47. .list li{
  48.     padding: 28px 10px 38px ;
  49.     display: block;
  50.     color: rgb(68, 57, 5);
  51. }
  52.  
  53.  .search{
  54.     float: right;
  55.     width: 296px;
  56.     margin-top: 10px;
  57.     position: absolute;
  58.     top: 28px;
  59.     right: 53px;
  60. }
  61. .search form{
  62.     height: 50px;
  63.     width: 296px;
  64. } 
  65.  
  66.  .content1{
  67.      display: block;
  68.     width: 223px;
  69.     height: 48px;
  70.     border: 1px solid #e0e0e0;
  71.     padding: 0 10px;
  72.     float:right;
  73.     
  74. }
  75.  
  76. .search1{
  77.     width: 49px;
  78.     height: 49px;
  79.     float: right;
  80. } 
  81.  
  82. .list li:hover{
  83.     color: rgb(168, 81, 81);
  84.     font-size: larger;
  85. }

使用外部式引入：

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

最后梳理一下：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <link rel="stylesheet" href="惠州客家面.css">
  8.   <title>惠州客家面</title>
  9. </head>
  10. <body>
  11.   <div class="header">
  12.       <div class="container" clearfix>
  13.           <div class="logo">
  14.               <a href="#">
  15.                   <img src="D:\惠州客家面.jpg" width="150" alt="惠州客家面">
  16.               </a>
  17.           </div>
  18.           <ul class="list">
  19.               <li>
  20.                   <a href="#">猪脚面</a>
  21.               </li>
  22.               <li>
  23.                   <a href="#">叉烧面</a>
  24.               </li>
  25.               <li>
  26.                   <a href="#">肉丸面</a>
  27.               </li>
  28.               <li>
  29.                   <a href="#">卤蛋面</a>
  30.               </li>
  31.               <li>
  32.                   <a href="#">斋面</a>
  33.               </li>
  34.               <li>
  35.                   <a href="#">樱花面</a>
  36.               </li>
  37.               <li>
  38.                   <a href="#">猪脚叉烧面</a>
  39.               </li>
  40.               <li>
  41.                   <a href="#">猪脚卤蛋面</a>
  42.               </li>
  43.               <li>
  44.                   <a href="#">猪脚肉丸面</a>
  45.               </li>
  46.               <li>
  47.                   <a href="#">叉烧肉丸面</a>
  48.               </li>
  49.           </ul>
  50.           <div class="search">
  51.               <form>
  52.                    <input type="submit" value="搜索" class="search1">
  53.                   <input type="text" class="content1">
  54.                  
  55.               </form>
  56.   </div>
  57.       </div>
  58.  
  59.   </div>
  60. </body>
  61. </html>

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

  1. .header{
  2.   width: 100%;
  3.   height: 100px;
  4.   background-color: rgb(207, 238, 238);
  5.   position: relative;
  6. }
  7.  
  8. .container{
  9.   width: 1226px;
  10.   height: 20px;
  11.   margin: 0 auto;
  12. }
  13.  
  14. .header .logo{
  15.   float: left;
  16.   margin-top: 25px;
  17. }
  18.  
  19. .logo a{
  20.   display: block;
  21.   width: 150px;
  22.   height: 150px;
  23. }
  24.  
  25. .header .list{
  26.   float: left;
  27.   width: 820px;
  28.   height: 88px;
  29.   padding: 12px 0 0 30px;
  30. }
  31.  
  32. clearfix::after{
  33.   content: '';
  34.   clear: both;
  35.   display: block;
  36. }
  37.  
  38. a{
  39.   text-decoration: none;
  40. }
  41.  
  42. .header li{
  43.   float: left;
  44.   list-style: none;
  45. }
  46.  
  47. .list li{
  48.   padding: 28px 10px 38px ;
  49.   display: block;
  50.   color: rgb(68, 57, 5);
  51. }
  52.  
  53.  .search{
  54.   float: right;
  55.   width: 296px;
  56.   margin-top: 10px;
  57.   position: absolute;
  58.   top: 28px;
  59.   right: 53px;
  60. }
  61. .search form{
  62.   height: 50px;
  63.   width: 296px;
  64. } 
  65.  
  66. .content1{
  67.    display: block;
  68.   width: 223px;
  69.   height: 48px;
  70.   border: 1px solid #e0e0e0;
  71.   padding: 0 10px;
  72.   float:right;
  73.   
  74. }
  75.  
  76. .search1{
  77.   width: 49px;
  78.   height: 49px;
  79.   float: right;
  80. } 
  81.  
  82. .list li:hover{
  83.   color: rgb(168, 81, 81);
  84.   font-size: larger;
  85. }
  86.  

实现2：

在这里插入图片描述

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

制作攻略：

  • 把logo的位置换成你图片的位置，alt属性是网页图片展示不出来时的字。
  • “li”标签里的a属性超链接想要链接的网页，“li”标签里面的文字换成你想要的的文字
  • 背景颜色在CSS中**.header中的background-color:**进行修改，变成你想要的的颜色。
  • 对于“li”标签中字体的特效，在CSS中**.list li:hover**进行修改。
     

变色：

  1. .header{
  2.   width: 100%;
  3.   height: 100px;
  4.   background-color: rgb(207, 238, 238);
  5.   position: relative;
  6. }

标签特效：

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号