本文总结了两种常见的HTML导航栏实现方法：面包屑导航栏和简单下拉菜单。面包屑导航利用li+li选择器和伪类添加“/”符号，而下拉菜单通过CSS控制display属性实现展开与隐藏效果。
1、 面包屑导航栏（很多网站的头部会用这种）
思路是利用了选择器li+li选择第一个li后的所有元素，
并利用伪类选择器在li+li的所有元素之前加上“/”
<!doctype html>
<head>
<meta charset="UTF-8">
<title>面包屑导航栏</title>
<style>
*{
padding:0px;
margin:0px;
}
div{
background-color:#f5f5f5;
text-align:center;
}
ul{
display:inline-block;
padding: 8px 16px;
list-style: none;
background-color:#f5f5f5;
}
ul li{
display: inline;
color:#6f5056;
}
ul li+li:before{
padding: 8px;
color: #6f5056;
content: "/\00a0";
}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>我的订单</li>
<li>签到</li>
<li>客户服务</li>
<li>我的收藏</li&
最低0.47元/天 解锁文章
扫一扫
1296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
