html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
类别:Web前端 浏览量:1591
时间:2021-10-28 10:34:30 html和css制作导航条
使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色Ⅰ、问题描述:使用html+css实现简易导航栏;
**要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色;
1、运行软件VScode,亲测可实现;
2、运行代码:
<!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>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } /* 上语句意思:将li盒子外边距和内边距清零,防止系统会默认值; 有没有此语句不太影响结果; */ ul { list-style: none; } /* 上语句意思:将ul列表的默认样式取消; 如果没有此语句,则结果在导航栏中很可能有小黑点; */ .box { width: 960px; height: 40px; margin: 100px auto; } /* 上语句意思:给li盒子定义 宽度为960px; 高度为40px; 在屏幕居中,外边距为100px的居中; */ .box ul { overflow: hidden; } /* 上语句意思:给li盒子下的ul盒子来设置隐藏属性; 隐藏属性作用:清除子盒子可能产生的浮动,以便按照要求设置导航栏为8个部分; */ .box ul li { width: 120px; height: 40px; float: left; font-size: 18px; text-align: center; font-family: "Microsoft Yahei"; line-height: 40px; } /* 上语句意思:设置li盒子的ul盒子的子盒子li的属性值; 宽度为120px; 高度为40px; 浮动值为靠左浮动; 子号为18px; 文字对齐为居中; 文字类型为“微软雅黑” 行高为40px; */ .box ul li a { display: block; background-color: #ccc; color: #666; text-decoration: none; } /* 上语句意思:设置li盒子的ul盒子的li盒子的子盒子li的属性值; " display: block;":将行内元素变成块级元素; 设置背景颜色为"#ccc"; 字体颜色为"#666"; 文本修饰为无; */ .box ul li a:hover { background-color: yellowgreen; color: #fff; font-weight: bold; } /* 上语句意思:设置li盒子的ul盒子的li盒子的子盒子li的属性值;(设定当鼠标放在导航栏背景颜色变化值) 变化后的背景颜色为"yellowgreen"【黄绿色】; 变化后的字体颜色为"#fff"【白色】; 变化后的字体粗细为"bold"【加粗】; */ </style> </head> <body> <li class="box"> <ul> <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> </li> </body> </html>
3、结果展示:
放鼠标之前:
当鼠标放在导航栏第一个“首页”之后:
到此这篇关于使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)的文章就介绍到这了,更多相关html 导航栏内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- layui触碰提示框(layui禁用侧边导航栏点击事件的处理方法)
- layui导航栏(使用layui实现左侧菜单栏及动态操作tab项的方法)
- javascript弹出菜单(Javascript实现简易导航栏)
- 导航栏制作步骤详细(导航栏的多样设置简单实例)
- css导航栏字怎么分开设置(纯CSS实现导航栏Tab切换效果)
- html5导航栏跳转(Html5跳转到APP指定页面的实现)
- html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)
- css怎么设置div边框(div+css实现带箭头的面包屑导航栏)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- 自制cssdiv导航栏(css利用transform skewX制作平行四边形导航菜单)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- uni-app搜索框源代码(如何用uni-app实现顶部导航栏显示按钮和搜索框)
- html5 布局设计(Html5导航栏吸顶方案原理与对比实现)
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- css导航栏特效(CSS导航栏及弹窗示例代码)
- app开发自定义导航栏(AmazeUI底部导航栏与分享按钮的示例代码)
- 文莱旅游攻略(文莱旅游攻略介绍)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
热门推荐
- dockerfile挂载目录(解决docker run中使用 ./ 相对路径挂载文件或目录失败的问题)
- vmware虚拟机与本机共享(vmware16虚拟机如何设置共享本机的文件夹)
- CSS网页布局的几个建议
- pythonhash使用(详解python中的hashlib模块的使用)
- docker容器的创建启动和停止操作(docker版es、milvus、minio启动命令详解)
- python类定义(浅谈python新式类和旧式类区别)
- docker容器重启配置没了(docker修改未启动容器的配置信息操作)
- ASP.NET给图片加图片水印
- 云服务器租用的因素(云服务器租用都需要注意什么?如何选择好的云服务器商?)
- sqlserver中有几种锁定模式(SQL Server 开窗函数 Over代替游标的使用详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9