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&