横向的导航条
鼠标单击可切换。
代码:
<style>
.box{
/*容器*/
display: flex;
}
.box div{
/*块参数*/
font-size: 16px;
color: #000000;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid orangered;
border-right: 0;
cursor: default;
}
.box div:last-child{
border-right: 1px solid orangered;
}
.box .cur_box{
/*当前块*/
color: #ffffff;
background-color: orangered;
position: relative;
}
.box .cur_box::before{
/*下三角*/
content: "";