效果预览按下“点击预览”按钮右键在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/KRbXGe交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/c3e8dCB源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，标准导航布局：居中展示：html,body{height:100%;显示：弹性；对齐项目：居中；证明-内容：中心；background:linear-gradient(cadetblue,darkcyan);}设置容器的样式，声明背景色为变量：nav{width:300px;高度：300px；--bgcolor：柠檬雪纺；背景颜色：var（--bgcolor）；框阴影：05px30pxrgba(0,0,0,0.2);边界半径：10px；填充：30px0；框大小：边框框；项目中心显示：navul{list-style-type:none;保证金：0；填充：0；显示：弹性；对齐项目：居中；证明内容：居中；height:100%;}设置菜单项的文字样式:navulli{color:brown;字体大小：20px；font-family:sans-serif;}为菜单项添加鼠标悬停效果：navulli{padding:0.5em1em;边界半径：0.5em；过渡：0.5sease-out;}navulli:hover{box-shadow:04px4pxrgba(0,0,0,0.1),06px6pxrgba(0,0,0,0.1),08px8pxrgba(0,0,0,0.1),012px12pxrgba(0,0,0,0.1);变换：scale(1.05)translateY(-0.25em)perspective(300px)rotateX(20deg);菜单项：最后,调整菜单项布局：navul{justify-content:space-between;flex-direction:column;}就大功告成了！
