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 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
You might like
php学习 函数 课件
2008/06/15 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
土地转让协议书范本
2014/04/15 职场文书
大学生社团活动总结
2014/04/26 职场文书
班级课外活动总结
2014/07/09 职场文书
三好生演讲稿
2014/09/12 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL