在小尺寸的屏幕上，我们要让切换按钮显示出来，然后把导航菜单隐藏起来，让它只有在点击切换按钮的时候，才会显示或者隐藏 ….

先把可视窗口的宽度调整为小于 767px ….

然后回到网页的样式表 …. 找到为小尺寸屏幕设计的媒体查询 …. 就是这个 max-width:767px …. 当可视窗口宽度小于等于 767px 的时候，会使用这里定义的样式 …

输入一行注释 … command + / … 切换按钮 …

按钮上都有一个 toggle-btn 类 … .toggle-btn{}

先让它显示出来 … d:ib ….

修改一下大小 .. 因为使用的是 font awesome 小图标 … 所以可以通过设置文字的大小来设置小图标的大小 …

fz25 ….

去掉下划线 … td ..

添加一个黑色的背景 ...bg#000

设置下文字的颜色 … co…. #fff

加点内边距 .. pd7px10px

设置它们的位置为绝对的位置 … posa

右边的位置是 10px r10 …

顶部的位置设置为 50px … t50 ….

现在两个按钮会重叠在一起 …. 关闭按钮会覆盖开启导航菜单的按钮 …

我们要做的是，先隐藏关闭按钮，显示开启按钮 … 点击开启按钮时，再用关闭按钮覆盖开启按钮 …

先把关闭按钮隐藏起来 …

/* 隐藏关闭按钮 */

#nav .close{}

dis:n

然后再设置一下，导航为目标状态的时候，也就是点击了开启按钮的时候 … 把这个关闭按钮显示出来 ..

/* 导航为目标状态时显示关闭按钮 */
#nav:target .close{
display: inline-block;
}

d:ib

到浏览器上预览一下 … 当前显示的是开启按钮 …. 关闭按钮是隐藏的状态 …

点一下这个按钮 … 导航菜单会处于目标状态 … 这样会应用样式 … 把关闭按钮显示出来 …