HTML 方面，导航栏的每个 <li>元素里面包含 <a> 和 <ul> ，将 <li> 设置为相对定位， 将 <ul> 设置为绝对定位，并将 <ul> 的 display 属性设置为 none 。通过 js 给导航栏的每个 <li> 添加事件监听器，当鼠标覆盖 <li> 时，令 <ul> 的display 属性值为 block；当鼠标离开<li> 时，令 <ul> 的display 属性值为 n

轮播图的效果有很多种，做起来也挺有意思。本文所做的轮播图没有添加动画效果，适合不会动画的初学者参考。如果对动画感兴趣，之后我也会分享添加了动画效果的轮播图。

高斯模糊亦称为毛玻璃效果，这里提供一种可行的背景图片高斯模糊效果的解决方案，适用于大部分情况。其原理是通过 ::before 伪元素制作一个遮罩层的效果。

HTML 方面，导航栏的每个 <li>元素里面包含 <a> 和 <ul> ，将 <li> 设置为相对定位， 将 <ul> 设置为绝对定位，并将 <ul> 的 display 属性设置为 none 。通过 js 给导航栏的每个 <li> 添加事件监听器，当鼠标覆盖 <li> 时，令 <ul> 的display 属性值为 block；当鼠标离开<li> 时，令 <ul> 的display 属性值为 n

在深入理解定时器前，我们需要了解一下 JavaScript 的单线程。因为 JavaScript 是单线程的，所以每次只能执行一段代码。JavaScript 中的任务执行有一个队列的概念，即任务会被排进队列按先入先出的顺序执行。

轮播图的效果有很多种，做起来也挺有意思。本文所做的轮播图没有添加动画效果，适合不会动画的初学者参考。如果对动画感兴趣，之后我也会分享添加了动画效果的轮播图。