中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › HTML+CSS 实现顶部导航栏菜单制作

[前端] HTML+CSS 实现顶部导航栏菜单制作

1723 0
Honkers 2022-10-19 16:05:20 | 显示全部楼层 |阅读模式
导航栏的制作：

技术要求：

    CSSHTML各类标签
实现目的：
制作导航栏菜单
代码分析：

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

分三栏布局：使用浮动
logo一栏；选择栏一栏；搜索栏一栏
logo部分：
img标签，导入图片，a标签超链接 ，img导入图片，防止图片失真width和height设置一个就可以了
  1. <div class="logo">
  2.               <a href="#">
  3.                   
  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">
  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">
  54.              </form>
  55. </div>
  56.      </div>
  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. }
  8. .container{
  9.     width: 1226px;
  10.     height: 20px;
  11.     margin: 0 auto;
  12. }
  14. .header .logo{
  15.     float: left;
  16.     margin-top: 25px;
  17. }
  19. .logo a{
  20.     display: block;
  21.     width: 150px;
  22.     height: 150px;
  23. }
  25. .header .list{
  26.     float: left;
  27.     width: 820px;
  28.     height: 88px;
  29.     padding: 12px 0 0 30px;
  30. }
  32. clearfix::after{
  33.     content: '';
  34.     clear: both;
  35.     display: block;
  36. }
  38. a{
  39.     text-decoration: none;
  40. }
  42. .header li{
  43.     float: left;
  44.     list-style: none;
  45. }
  47. .list li{
  48.     padding: 28px 10px 38px ;
  49.     display: block;
  50.     color: rgb(68, 57, 5);
  51. }
  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. }
  66. .content1{
  67.      display: block;
  68.     width: 223px;
  69.     height: 48px;
  70.     border: 1px solid #e0e0e0;
  71.     padding: 0 10px;
  72.     float:right;
  74. }
  76. .search1{
  77.     width: 49px;
  78.     height: 49px;
  79.     float: right;
  80. }
  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.                   
  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">
  55.               </form>
  56.   </div>
  57.       </div>
  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. }
  8. .container{
  9.   width: 1226px;
  10.   height: 20px;
  11.   margin: 0 auto;
  12. }
  14. .header .logo{
  15.   float: left;
  16.   margin-top: 25px;
  17. }
  19. .logo a{
  20.   display: block;
  21.   width: 150px;
  22.   height: 150px;
  23. }
  25. .header .list{
  26.   float: left;
  27.   width: 820px;
  28.   height: 88px;
  29.   padding: 12px 0 0 30px;
  30. }
  32. clearfix::after{
  33.   content: '';
  34.   clear: both;
  35.   display: block;
  36. }
  38. a{
  39.   text-decoration: none;
  40. }
  42. .header li{
  43.   float: left;
  44.   list-style: none;
  45. }
  47. .list li{
  48.   padding: 28px 10px 38px ;
  49.   display: block;
  50.   color: rgb(68, 57, 5);
  51. }
  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. }
  66. .content1{
  67.    display: block;
  68.   width: 223px;
  69.   height: 48px;
  70.   border: 1px solid #e0e0e0;
  71.   padding: 0 10px;
  72.   float:right;
  74. }
  76. .search1{
  77.   width: 49px;
  78.   height: 49px;
  79.   float: right;
  80. }
  82. .list li:hover{
  83.   color: rgb(168, 81, 81);
  84.   font-size: larger;
  85. }
复制代码
实现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 顶部导航栏菜单内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3147
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天