今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1、今天写导航栏难点问题有两个；

一在于怎么让水平导航栏用媒体查询变成垂直样式，二在于怎么让汉堡菜单隐藏后用媒体查询显示出来，如果用绝对定位该怎么写。

然后查资料垂直的导航栏和水平导航栏的区别就是：

水平导航栏是给li标签设了float：left；

代码如下：

所以写垂直导航栏只需要设置display：block就行了。

这里就可以用媒体查询来写垂直的导航栏，我是设的在max-width：768px以下由水平导航栏转换成垂直导航栏，所以这里有个重点，就是需要用绝对定位，因为是用ul元素嵌套的，所以这里给最大的父级ul设position：absolute就可以隐藏变成下拉菜单。

使用绝对定位会覆盖里面的内容，然后再通过top值固定它的位置。

这里有个有趣的问题，我给ul设width：100%后，本来竖着的下拉菜单就横着排列了，这是因为没有给li设width。如图：

  这个是li元素没有设width的时候。

设了width：100%后如下图：

但是这里ul元素的width也是必不可少的，不设width的话，ul就如下图：

   因为是要铺满整个背景的，所以设width为百分百。

所有的设置完成后，因为设置了absolute后，ul元素就脱离了文档流浮动起来，所以我设了top值后让ul元素往下移，但是左边却又空隙，网页效果如图：

这里就有空隙，原因是设了绝对定位，所以这里要给ul设left：0就能解决这个问题。

2、在写导航栏的时候最重要的是html的框架结构，我在看bootstrap库里的代码捡了重点，只用ul和li元素来写，前面任务12的下拉菜单也是用这两个元素写的，难怪师兄们说自己写导航栏很简单。html代码如下：

样式：

明天计划的事情：（一定要写非常细致的内容） 

开始第二个难点轮播图的制作。

遇到的问题：（遇到什么困难，怎么解决的） 

收获：（通过今天的学习，学到了什么知识）

通过用position：absolute来写下拉菜单的样式，用媒体查询来写垂直的导航栏。