html+css实现页面顶部导航栏(html-css)

编辑：rootadmin

html+css实现页面顶部导航栏

推荐整理分享html+css实现页面顶部导航栏(html-css)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:html如何用css,html-css,html-css,html网页css,html+css制作网页,html页面写css,html页面写css,html-css,内容如对您有帮助，希望把文章链接给更多的朋友！

最终效果如下：

接下来，我将从html和css两大部分，逐步为您讲解制作过程

Html 实现布局

创建父栏目

创建子栏目

插入外部样式表，为接下来的css编辑做准备

Css 实现样式

排布文本，设置背景

交互效果的实现

实现子栏的隐藏与显示

实现当鼠标移动到子栏时的视觉互动

Html 实现布局创建父栏目<body> <ul id="ulfather"> <li class="lifather"> <h4>栏目一</h4> </li> <li class="lifather"> <h4>栏目二</h4> </li> <li class="lifather"> <h4>栏目三</h4> </li> <li class="lifather"> <h4>栏目四</h4> </li> <li class="lifather"> <h4>栏目五</h4> </li> </ul></body>

创建子栏目

因为有五个父栏目，每个父栏我都打算设置3个子栏；如果把全部五个栏目的代码都贴上来，则太过冗长了。下面仅展示在“栏目一”创建子栏目的代码

<li class="lifather"> <h4>栏目一</h4> <ul class="ulson"> <li class="lison">子栏</li> <li class="lison">子栏</li> <li class="lison">子栏</li> </ul></li> html+css实现页面顶部导航栏(html-css)

插入外部样式表，为接下来的css编辑做准备

这步操作的代码我就不放了，因为每个人存放css文件的位置不同，如果不知道如何从外部插入样式表，可以参考以下方法：

<head><link rel="stylesheet" href="外部样式表的位置"></head>Css 实现样式排布文本，设置背景*{ margin: 0;/*清除外边距*/ padding: 0;/*清除内边距*/ list-style: none;/*删除<li>标签生成的点*/}body{ background-image: url('https://www.yuucn.com/wp-content/uploads/2023/05/1684753161-f8c2113278c8b38.png');/*插入背景图片*/ background-repeat: repeat-x;/*让背景图仅在x轴重复*/ display: flex;/*设置为弹性盒*/ justify-content: center;/*导航栏居中*/}#ulfather{ display: flex;/*设置为弹性盒*/ background-color: rgb(40, 44, 100);/*设置栏目背景为深紫色*/ box-shadow: 2px 5px 15px rgba(0, 0, 0, .7);/*阴影效果*/ border-radius: 5px;/*圆角效果*/ width: 350px;/*导航栏宽度*/ height: 30px;/*导航栏长度*/ line-height: 30px;/*文字垂直居中*/}.lifather{ width: 70px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/ text-align: center;/*文字水平居中*/ color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/}.ulson{ background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/ border-radius: 0px 0px 5px 5px;/*圆角效果*/ color: rgb(250, 250, 250);/*设置字体颜色为白色*/}

交互效果的实现实现子栏的隐藏与显示

隐藏：在.ulson中添加一行代码即可

.ulson{ background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/ border-radius: 0px 0px 5px 5px;/*圆角效果*/ color: rgb(250, 250, 250);/*设置字体颜色为白色*/ display: none;/*初始状态为隐藏*/}

显示：当鼠标移动到栏目上时，显示对应的子栏

.lifather:hover .ulson{ display: block;}

实现当鼠标移动到子栏时的视觉互动

当鼠标指向子栏时，子栏颜色变深

.lison:hover{ background-color: rgba(0, 0, 0, .3);}

总结

以上就是利用html和css实现页面顶部导航栏的过程了，实际使用时，把文本适当修改，并插入链接即可实现完整的功能了。

本文链接地址:https://www.jiuchutong.com/zhishi/295159.html 转载请保留说明！

上一篇：马卡雷纳山脉中的卡诺克里斯塔尔斯河，哥伦比亚 (© Jorge Iván Vásquez Cuartas/Getty Images)(马卡雷纳大教堂)

下一篇：VSCode创建Vue项目完整教程(使用vscode开发vue例子)