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

1、今天的重点主要是下拉菜单的代码编写，因为这里没有引用bootstrap的组件，需要自己写出下拉菜单的样式，然后再通过触发这个下拉菜单。

因为这次是需要自己写出下拉菜单的样式，所以就查了下资料，css也有很多种方法可以写出下拉菜单，这里参考了资料，运用的是block和none的转换，通过hover效果来实现。其实看资料并没有很理解，所以通过在写的过程来学习这个。

      首先还是按照前面运用组件的html框架，这里用的是<ul>元素和<li>元素来写的，通过li便签的嵌套，第一层写出整体一列的样式，并分成三个单独的div，然后写上div内容，然后再通过在li标签里的再嵌套一个ul标签写下拉后的div内容。

       html代码如下所示：

这样看着很清楚，把框架写出来后再开始写样式就很清楚了。这里的内容其实是重复的，所以只要写一次样式后套用就可以了。

     给最大的父级li的类名设置下拉框的样式，并用百分比分成三个框，所以这里用的是相对定位，然后再写下拉菜单的内容时，给a标签定义block，再给其设置相应的样式就可以，大体上的下拉框基本能成型了。

css代码：

下拉菜单的样式写完后用display：none隐藏，然后就是通过hover效果来触发block，写出来的效果是差不多的，css还是很强大的，很多基本上都能用css来写。

2、任务12的第二个页面的主体基本上写的差不多了。

因为内容也是重复的，所以只要把第一个div写出来，后面跟着套用就行，再次重新写一遍的感觉和第一次写的感觉就在于代码量的减少、时间成本的减少，唯一不同的是这次是写pc端，然后还要适应手机端，运用rem单位来做到自适应的布局，而且这次要自己写下拉菜单的样式不引用组件，现在写出来发现其实很简单，就几行代码可以解决的事情，当时用组件弄的我头晕，但是熟悉bootstrap组件后发现它也是有它的优势的，熟悉后改起来快很多。

3、熟悉rem这个单位，还有通过rem来达到自适应网页的布局。

rem实现自适应有两种方法，一种是运用js，另一种就是运用媒体查询来实现不同分辨率的字体大小的改变。

这里因为js还没有学过，只能运用媒体查询来解决。

rem是根据html的font-size大小来变化的。所以我们可以在不同的屏幕宽度下设置相应的字号从而来实现自适应的布局。

用媒体查询来改变不同屏幕下的html根目录的字号大小就能实现。

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

1、完善修改任务11和12第一个页面的自适应效果。

2、完成任务12的第二个页面的编码。

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

1、在写下拉菜单时，遇到一个问题，因为我给li设了相对定位的同时又给li设了float：left，给所有a标签设了绝对定位，所以就出现了下拉菜单的文字并排在一起，如下图所示：

后面通过师兄的指点发现，原来是因为没有设置宽度的原因，所以就要找出是哪个的宽度影响，前面说了我用最大父级<li>标签写的下拉菜单框，所以分成三个单独的div，所以我给li设了width：33.3%，但是下拉菜单的li标签我没有设width就会导致字体并排在一起。字体并排在一起是因为我设了左浮动的原因，所以解决方法就是给下图红框中的li标签设width：100%就能解决了。

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

1、学会运用less中通过import插入文件的方法。如当color的颜色比较多的时候，为了后期的维护和修改把color单独放在一个less文件中，通过import来引入文件，这种方法是好用的。

2、了解了什么是属性选择器和后代选择器还有子选择器。

（1）属性选择器：

        是一种特殊类型的选择器，它根据元素的 属性 和属性值来匹配元素。它们的通用语 法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。

a[href] {color：red} 

可以让带这个属性值的颜色改变。也可以同时多个属性进行选择，只需要将选择器链接在一起。

a[href] [title] {color:red;}

（2）后代选择器：

         又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

我们可以通过后代选择器来定义一些规则，例如：我只想让某元素中的文本颜色发生改变，其他的相同文本颜色不变，可以这样写：

h1 a {color：red；}

语法可以这样理解，h1元素下的a元素的文本颜色变成红色。

但是这样有个弊端，如果是重复的内容，同时都用了h1嵌套a元素，那用后代选择器就会让相同的后代a元素的文本颜色全都发生改变。所以同样的内容你要分成不同的元素来嵌套就会增加你的代码量。

语法解释：

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

（3）子选择器：

        只能选择作为某元素子元素的元素。

子选择器能比后代选择器更加缩小选择范围，只选择某个元素的子元素。写法：

h1 > a  {color：red；}

所以相比后代选择器，子选择器在相同h1元素下的a元素，它只能选择h1下面的a元素，并不是所有的h1下面的a元素。所以重点就是子选择器是只能选择h1下的a元素，让它的颜色变成红色，所以就算设置相同的标签嵌套也不会影响到其他的元素。而后代选择器是让所有的h1元素下的a元素字体颜色发生改变。相较于后代选择器，子选择器更加好用。