时间：2023-10-01 00:00:01 | 来源：网站运营
时间：2023-10-01 00:00:01 来源：网站运营
超实用！网页中常见的导航栏布局：在网页开发中关于导航栏的布局相信各位小伙伴都碰到过吧，接下来我给大家整理了在网页中常见的几种导航栏的布局，大家看看有没有自己需要的。
在线咨询
<div class="nav"> <ul class="center"> <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>css样式：/* 清除掉默认的内外间距 */* { padding: 0; margin: 0; } /* 导航条定高度和背景色，宽度不定，大通栏 */ .nav{ height: 58px; background-color: #000; } .center { width: 1000px; list-style: none; margin: 0 auto; background-color: pink; } /* 利用浮动让每一个选项横向排列 */ li{ float: left; border-right: 1px solid rgb(161, 158, 158); } /* 鼠标滑过编一个背景色 */ li:hover{ background-color: violet; } /* 转块元素是为了让选项的点击范围变大，左右通过内间距挤开，行高和大通栏高度一样 */ a{ display: block; padding: 0 20px; line-height: 58px; text-decoration: none; color: white; } /* 取消最后一个选项的右侧线 */ .nav li:last-child{ border-right: 0; }<div class="nav"> <ul class="center"> <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>css样式：* { padding: 0; margin: 0; } .nav{ height: 58px; background-color: #000;}.center { width: 1000px; list-style: none; margin: 0 auto; background-color: pink;}li{ color: rgb(224, 9, 9); float: left;}li:hover{ background-color: violet;}a{ /* 一定注意要把a转成行内块元素， 如果转的是块元素那么短竖线会掉下去， 因为块级元素是独占一行的 */ display:inline-block; padding: 0 20px; line-height: 58px; text-decoration: none; color: white;} <div class="nav"> <ul class="center"> <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>css样式： * { padding: 0; margin: 0; } .nav{ margin-top: 50px; height: 58px; } .center { width: 1000px; height: 100%; list-style: none; margin: 0 auto; border-bottom: 1px solid #000; } li{ background-color: #ccc; float: left; border: 1px solid red; border-bottom: 0; margin-right: 10px; } /* 鼠标滑过的时候让li高度加大，再往上走一点， 将底边线的颜色加成白色，这样就会覆盖掉那条黑色的线 */ li:hover{ height: 60px; margin-top: -3px; border-bottom: 1px solid #fff; } a{ display:block; padding: 0 20px; height: 57px; line-height: 57px; text-decoration: none; color: rgb(231, 108, 108); } li:last-child{ margin-right: 0; }<nav> <ul> <li>精选</li> <li>首页</li> <li>男装</li> <li>女装</li> <li>童装</li> <li>高跟鞋</li> <li>笔记本</li> <li>笔记本2</li> <li>笔记本3</li> </ul> <!-- 这是更多的图标，利用iconfont写的 --> <div class="iconfont icon-gongzuo"></div></nav>::-webkit-scrollbar { display: none;}* { padding: 0; margin: 0;}ul { list-style: none;}nav { height: 35px; display: flex; border-bottom: 1px solid gray;}nav>ul { flex: 1; height: 100%; display: flex; align-items: center; overflow: auto;}nav>ul>li { flex-shrink: 0; padding: 0 10px;}nav>div { text-align: center; width: 35px; height: 100%; line-height: 35px;}场景五：二级菜单的制作<ul class="nav clear-fix"> <li>小米手机</li> <li>红米手机</li> <li>电视</li> <li>笔记本</li> <li>平板</li></ul><div class="bigBox"> <ul> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> </ul></div>css样式：* { padding: 0; margin: 0; box-sizing: border-box;}.clear-fix::after { display: block; content: " "; width: 0; height: 0; visibility: hidden; overflow: hidden; clear: both;}ul { list-style: none;}.nav { width: 800px; margin: 0 auto; margin-top: 50px;}.nav li { width: 150px; height: 40px; background: pink; border-right: 1px solid purple; float: left; text-align: center; line-height: 40px;}.bigBox { height: 200px; background: red; display: none;}.bigBox ul { width: 1000px; height: 100%; margin: auto; background: rosybrown;}.bigBox ul li { width: 200px; height: 100%; border-right: 1px solid blue; background: blueviolet; float: left;}js代码：let oLis = document.querySelectorAll(".nav li");let oBigBox = document.querySelector(".bigBox");lis2 = document.querySelectorAll(".bigBox>ul>li")for (let i = 0; i < oLis.length; i++) { oLis[i].onmouseover = function (e) { oBigBox.style.display = "block"; for (let j = 0; j < lis2.length; j++) { lis2[j].innerHTML = oLis[i].innerHTML + j } } oLis[i].onmouseout = function (e) { oBigBox.style.display = "none"; }}oBigBox.onmouseover = function (e) { oBigBox.style.display = "block";}oBigBox.onmouseout = function (e) { oBigBox.style.display = "none";}好了，今天就分享到这里了。希望今天的分享能帮到大家，有什么疑问可以在评论中留言分享。关键词：导航,布局,中常,实用
