1. 此篇文章讲解目录：

• 案例和由此案例重点讲解的知识点介绍

• 案例代码实现

• 行内标签知识点详解

2. 案例和相关知识点介绍

今天跟大家分享的是，网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~

因为任何导航栏的实现都离不开我们今天即将学习的HTML列表标签。现在我们来看一下，即将用HTML列表标签写出的效果图是怎样的吧！

在写出上述效果之前，先来给大家介绍一下，基本的列表元素有哪些吧？

无序列表

最近在做一个商用网站，看着现在的网站导航条，自己想能不能有点新鲜的变化呢？当点击主菜单任意项时，会向下滑出所属的二级菜单组，同时网页的其它内容变暗，当操作完菜单后，跳转至指定链接页面。效果图如下：

部分源码如下：

特效全部代码

做全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：这是HTML课程的第七课，在这节课程中主要做一个小项目，那就是通过以前我们一起学习的知识点，制作一个360导航页。

上节回顾

web前端学习教程，今天分享的是一个炫酷大气多功能多级导航菜单案例源码

项目效果截图

部分项目源码截图，代码有点多就不全部截图了，完整的项目源码可以找我领取

ps：需要相关学习视频教程、项目源码、开发工具等学习资料可以关注我头条号，然后私信我‘前端学习资料

本篇文章将教大家如何编写导航栏，如果大家掌握之后，通过自定义样式，完全可以实现个性化的导航栏。

效果图

首先我们看下效果图，后面的编辑和查看导航也是相同的效果。

效果图