CSS+HTML 顶部导航栏实现

导航栏的实现、固定顶部导航栏、二级菜单实现
效果图：

2018/11/16更新：
最近在使用这个导航栏的时候，发现页面在放大和缩小的情况下，导航栏的布局和显示都有些小问题，所以重新改了一下css部分的代码，重新贴上来

新的代码实现（优化布局）：

<html><head><style type="text/css">.top{/* 设置宽度高度背景颜色 */height: auto; /*高度改为自动高度*/width:100%;margin-left: 0;background:rgb(189, 181, 181);position: fixed; /*固定在顶部*/top: 0;/*离顶部的距离为0*/margin-bottom: 5px;
}
.top ul{/* 清除ul标签的默认样式 */width: auto;/*宽度也改为自动*/list-style-type: none;white-space:nowrap;overflow: hidden;margin-left: 5%;/* margin-top: 0;          */padding: 0;}
.top li {float:left; /* 使li内容横向浮动，即横向排列  */margin-right:2%;  /* 两个li之间的距离*/position: relative;overflow: hidden;
}.top li a{/* 设置链接内容显示的格式*/display: block; /* 把链接显示为块元素可使整个链接区域可点击 */color:white;text-align: center;padding: 3px;overflow: hidden;text-decoration: none; /* 去除下划线 */}
.top li a:hover{/* 鼠标选中时背景变为黑色 */background-color: #111;
}
.top ul li ul{/* 设置二级菜单 */margin-left: -0.2px;background:rgb(189, 181, 181);position: relative;display: none; /* 默认隐藏二级菜单的内容 */}
.top ul li ul li{/* 二级菜单li内容的显示 */float:none;text-align: center;
}
.top ul li:hover ul{/* 鼠标选中二级菜单内容时 */display: block;
}
body{background:#eff3f5;
}</style><body><div class="top"><center> <ul><li><a href="#">一级菜单</a></li><li><a href="#">一级菜单</a></li><li><a href="#">一级菜单</a></li><li><a href="#"><b>一级菜单</b></a></li><li><a href="#">一级菜单</a></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li>        </ul></center>      </div></body></head>
</html>

下面的原来的代码实现（页面放大缩小的时候导航版排版有问题）：

<html><head><style type="text/css">.top{/* 设置宽度高度背景颜色 */height: 50px;width:100%;background:rgb(189, 181, 181);position: fixed; /*固定在顶部*/top: 0;/*离顶部的距离为0*/}.top ul{/* 清除ul标签的默认样式 */width: 80%;list-style-type: none;margin: 0;            padding: 0;overflow: hidden;}.top li {    float:left; /* 使li内容横向浮动，即横向排列  */margin-right:50px;  /* 两个li之间的距离*/}.top li a{/* 设置链接内容显示的格式*/display: block; /* 把链接显示为块元素可使整个链接区域可点击 */color:white;text-align: center;padding: 14px 16px;text-decoration: none; /* 去除下划线 */}.top li a:hover{/* 鼠标选中时背景变为黑色 */background-color: #111;}.top ul li ul{/* 设置二级菜单 */width: auto;background:rgb(189, 181, 181);position: absolute;display: none; /* 默认隐藏二级菜单的内容 */}.top ul li ul li{/* 二级菜单li内容的显示 */margin-right:0;float:none;text-align: center;}.top ul li:hover ul{/* 鼠标选中二级菜单内容时 */display: block;}</style><body><div class="top"><center> <ul><li><a href="#">一级菜单</a></li><li><a href="#">一级菜单</a></li><li><a href="#">一集菜单</a></li><li><a href="#"><b>一级菜单</b></a></li><li><a href="#">一级菜单</a></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li>        </ul></center>      </div></body></head>
</html>

CSS+HTML 顶部导航栏实现相关推荐

HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局任务描述本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识使用flex布局实现左右分开布局的方式有多种: 使用 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 导航栏的实现.固定顶部导航栏.二级菜单实现效果图: 最近在使用这个导航栏 ...
页面顶部导航栏css样式布局
项目场景: css样式布局例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述顶部导航栏出现滚动条,滚动条位置在页面底部解决方 ...
HTML+CSS简单实现京东顶部导航栏
效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...

CSS+HTML 顶部导航栏实现

CSS+HTML 顶部导航栏实现相关推荐

最新文章

热门文章