效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/PdaNXw互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c3MV9Sa源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，navigation包含一个无序列表，listitem中嵌入一个span，span中写正文：居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#333;}隐藏列表项前面的引导符号：navul{padding:0;list-style-type:none;}设置按钮的大小和颜色：navli{width:8em;高度：2em；字体大小：25px；color:orange;}设置文字样式，注意高度为120%，span高于其parentli:navlispan{position:relative;框大小：边框框；宽度：继承；高度：120%；前10名％;背景色：#333；边框：2px实心；字体系列：无衬线；文本转换：大写；显示：弹性；转换：translateX(4px);}在列表项li的左边框画1条垂直线：navli{box-sizing:border-box;border-left:2pxsolid;}用列表项的伪元素多画2条竖线，它们按钮的高度依次递减，至此，按钮左边有3条竖线：navli{position:relative;}navli::before,navli::after{content:'';位置：绝对；宽度：继承；左边框：2px实心；z-index:-1;}navli::before{height:80%;前10名％;left:-8px;}navli::after{height:60%;20%；left:-14px;}逐渐加深伪元素两条竖线的颜色，增加层次感：navli::before{filter:brightness(0.8);}navli::after{filter:brightness(0.6);}增加鼠标悬停效果，默认状态下按钮覆盖3条竖线，当鼠标悬停时，按钮向右移动，露出3条竖线：navli:hoverspan{transform:translateX(4px);}navlispan{/*transform:translateX(4px);*/转换：translateX(-16px);transition:0.3s;}因为按钮的默认位置是靠左的，为了抵消这个offset，让listitem稍微向右移动：navul{transform:translateX(16px);}再加几个dom中的按钮：设置按钮的间距：navli{margin-top:0.8em;}大功告成！
