html5 菜单栏 html 菜单布局 css

转载

mob6454cc74c0fc 2023-07-24 18:05:59

文章标签 html5 菜单栏 CSS html 导航栏 文章分类 HTML5 移动开发

导航栏针对一切网址都很重要，文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作，具备一定的参考价值，感兴趣的小伙伴们能够参照一下

导航栏的制作：
技术要求：
CSS
HTML各类标签
实现目的：

制作导航栏菜单

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

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

logo部分：

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

选择栏：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>

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

把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:\桌面\互联网+创业大赛/惠州客家面素材/微信图片_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>

实现1：

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

是不是感觉不够美观，我们使用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文件，输入以下代码

<!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="http://www.qlyl1688.com/product_dzxyj.html" class="search1">
                  <input type="text" class="content1">
                  
              </form>
  </div>
      </div>
 
  </div>
</body>
</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：

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

电脑鼠标动一下标志，字体样式能够增大哦。
制做攻略大全：
把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 完成顶端导航栏菜单制作的文章就详细介绍到这了

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：android背景虚化安卓背景虚化相机

下一篇：LM算法的BP神经网络 bp神经网络与lstm

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

html5 菜单栏 html 菜单布局 css

html5 菜单栏 html 菜单布局 css

51CTO博客