html怎么设置顶部导航栏,互联网常识:CSS+HTML如何实现顶部导航栏
本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
导航栏的实现、固定顶部导航栏、二级菜单实现
效果图:
最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下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;
}
- 一级菜单
- 一级菜单
- 一级菜单
- 一级菜单
- 一级菜单
一级菜单
- 二级菜单
- 二级菜单
下面的原来的代码实现(页面放大缩小的时候导航版排版有问题):
.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;
}
- 一级菜单
- 一级菜单
- 一集菜单
- 一级菜单
- 一级菜单
一级菜单
- 二级菜单
- 二级菜单
html怎么设置顶部导航栏,互联网常识:CSS+HTML如何实现顶部导航栏相关推荐
- html如何设置table的宽度,互联网常识:HTML怎么设置table宽度
HTML设置table宽度的方法:1.直接使用table标签的width属性,语法" 本教程操作环境:windows7系统.CSS3&&HTML5版.Dell G3电脑. 给 ...
- css导航滚动到顶部后保持不动,html-使用CSS滚动时,使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部 我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
- css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
- uniapp导航栏自定义图标按钮/搜索|uni-app自定导航条
uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左.居中.搜索条,按钮可传入文字/字体图标/图片 uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义 ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- 手机语音服务器在哪里设置,腾讯地图联合王者荣耀推出妲己语音导航服务(安装设置方法)...
腾讯地图和王者荣耀联合推出了妲己语音包导航,喜欢王者荣耀的玩家想不想在地图导航过程中听听软萌妲己为您指路呢?下面,我们将为大家带来腾讯地图妲己语音导航设置方法,希望能够帮助到大家. 腾讯地图妲己语音包 ...
- 学完css,做了一个csdn导航栏(一步一步做csdn导航栏,内容满满)
学完css,做了一个csdn导航栏,内容满满 步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示 知识点 完整代码 番外:本来打算做 ...
- 导航框架式html播放器的实现以及导航栏的自动更新脚本实现
本人对HTML并没有太多的使用,都是现用现查.今天想要实现一个HTML播放器来播放电脑本机存放的视频文件.经过查资料完成一个简单的导航框架式的HTML播放器以及其导航栏的自动跟新脚本. 导航框架式HT ...
- layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间
做为正确引导客户体验网站的莱单导航栏,从检索视角上而言,也起着关键的功效,莱单导航栏不但联系网站的外界,也联系着网站主页面及其别的网页,是全部网站的"管理中心",因此网站建设中莱单 ...
最新文章
- 可以估计不确定性的神经网络:SDE-Net
- 机器学习也能套模版:在线选择模型和参数,一键生成demo
- Ubuntu如何安装secureCRT
- java进制原码_Java 一一 进制、原码 反码 补码、移位操作
- tomcat启动成功 未加载项目_喜讯!济宁医学院附属医院SPD项目成功启动
- wifi p2p连接 linux,Wi-Fi p2p ap 共存
- 【Unity】8.5 扩展编辑器
- layui表格——table.render(options)(转)
- MySQL忘记root密码--不重启mysqd重置root密码
- G - Ice_cream's world I (并查集)
- 一个OpenMP的学习程序
- java多行注释_Java注释:单行、多行和文档注释
- Delphi POS打印的处理
- ubuntu 18.04安装 远程控制软件 TeamViewer 亲测有效简单
- NPOI导出真正的电子表格,支持 自定义多行表头(表头风格设置),支持多个sheet页面导出
- 小爱mini改aux立体声_DIY移动的智能助手-------将小爱音箱搬到爱车上
- 架构漫谈:什么是架构? - 转
- 微信公众号创建菜单注意问题
- Luat模块应用手册-指南-luat二次开发教程-功能开发教程-HTTP
- Google Bard vs ChatGPT:哪一个更适合创造富有创造性的文学作品?