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

这几天一直都理不清bootstrap布局，然后引用导航栏菜单还需要运用到媒体查询才能解决，一直不想面对的到最后还是需要面对。

1、今天把首页重新再写了一遍。

导航栏上面的还好用的是flex来写的，我在查看师兄的代码的时候，发现原来用bootstrap栅格也是可以直接给最大的div设col-xs-12（所有的屏幕分辨率sm md lg），然后在用div嵌套直接给div设置flex就行了，不需要再通过调margin值来实现，比我做第一遍的时候要快了不少。其实很多地方都会可以用flex，都有很多种方法实现，可以多多尝试。

例如：

2、对于媒体查询稍稍有点理解了，只是在不同的px分辨率下可能需要断点来达到你想要隐藏的多余样式或者网页效果。想要谁变就给谁设类名，这是我理解的。（简单直接。。囧）

所以这里就需要用到媒体查询。

就是在小于768px是需要触发它，让它怎么样显示出来。大于768px的时候触发它变成什么样式。所以768px就是一个断点。

 html代码：                                                      

你只需要修改你想改的样式就行。能覆盖就覆盖不能覆盖就重新设css样式就可以。

这里有一个max-width：768px，max-width是当大与等于768px时导航栏会变成一行并列且靠右展示。反着也可以理解为小于768px就会隐藏内容变成汉堡菜单。

当然相反还有，min-width：768px。

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

明天回家拿厚衣服准备迎接武汉的冬天。后天开始轮播图的制作，真的是每天都有很多新知识点在欢迎我到它的怀抱，啾啾啾。。。

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

今天在引用导航栏那里卡了好久。

就是在小于768px值的时候变成汉堡菜单，但是下拉菜单的内容不居中，给它设了text-align：center后可以居中，但是当屏幕大于768px时候，导航栏菜单有个默认的向左float的属性，所以就陷入了死循环，要么给ul设float：right，下拉菜单字体不能居中同时也跟着靠右浮动，要么就是居中不能靠右。所以请教师兄，这里就只能要媒体查询来解决。让它在768px值有一个触发效果。

因为不太理解媒体查询，所以我就套用一个一个是效果，才算是摸到一点门道。总算是弄好了这个问题。因为是ul的width只有那么大，所以不管怎么设置width它也不会改变，所以这里就需要用到媒体查询给它一个触发点，给ul设width，然后在设text-align：center让下拉菜单文字内容居中。然后在大于px值是给它设float就行，之前发现组件自带了float：left的属性，通过覆盖设了float：right一直没有改变，后面发现是弄错了权重。因为懒得找权重，就直接粗暴的使用！important权重级别最高，后面师兄建议少用，因为后期不好找到维护，就给我推荐了两个方法。

这个是就近原则，因为设置后会自己找最近的父级，所以就不要一层套一层来写了。

2、还有一个方法如上，或者设id，但是这里就有不知道怎么设，是和媒体查询的那个写法一样吗。

3、对于max-width和min-width之间的含义区别有点容易弄混淆，不知道我上面理解的对不对，师兄帮忙看下。

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

收获了媒体查询和权重的设置修改样式。