首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onJune 03, 2021

导航栏的制作：

技术要求：

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

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

是不是感觉不够美观，我们使用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;
}

使用外部式引入：

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

最后梳理一下：

创建一个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="搜索" 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：

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

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

制作攻略：

  • 把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 顶部导航栏菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

 

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

- Author -

一号程序猿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5中的autofocus（自动聚焦）属性介绍
Apr 23 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
小缇娜的奇幻之地(1) 最终幻想(1) 巫师(1) 守望先锋(1) 战锤40K(1) 东方异文石(1) 我的世界(1) 艾尔登法环(1) 暴雪(1) LOL(1)
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php的ddos攻击解决方法
2015/01/08 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
es6的数字处理的方法（5个）
2017/03/16 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Random 在 Python 中的使用方法
2018/08/09 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
如何在Python对Excel进行读取
2020/06/04 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
MONNIER Frères英国官网：源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
安全生产汇报材料
2014/02/17 职场文书
职业生涯规划书范文
2014/03/10 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
人事任命书范文
2014/06/04 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs