您当前的位置：首页 > 建站教程 > WordPress 建站

HTML+CSS 实现顶部导航栏菜单制作

时间：2023-12-30 08:43:18 来源：[db:出处] 作者：[db:作者] 阅读：

导航栏的制作：

技术要求：

CSS
HTML各类标签

实现目的：

制作导航栏菜单

代码分析：

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

分步实现：

分三栏布局：使用浮动

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

logo部分：

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

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

实现分析：

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

<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:桌面互联网+创业大赛/惠州客家面素材/微信图片_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/3    1 2 3 下一页 尾页
                    
                    
                        本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载