今天完成的事

1，对任务二页面css样式的基本构建：

2，使用伪元素：before插入合适的内容；

3，新学习的dom操作方法

var x = document.querySelectorAll(".example");

var x = document.querySelector("input[type="range"]");

4，兼容性更好的文字竖排方法：div+css和<br>标签；

明天的计划

1，为页面添加背后事件代码；

2，学习如何完成参数传递和跳转的；

遇到的问题

   原本计划今天为页面添加上背后事件代码，但由于有许多计划外的琐事打乱计划，因此，下次再完成琐事后要及时调整状态，进入学习状态；

收获

1，：before伪元素使用的惊喜效果:

   （1） 在以前在元素前插入小图片之类的，往往因为图片与文字的默认对其方式，会让图片与文字不好在同一水平线对齐，往往需要加上一个弹性盒子，               或者设置line-height之类的；

   （2）现在将小图标图片在伪元素中当作背景图使用，还可以为其添加定位效果，调整图片的位置，然后对图片的位置调整非常方便；

2，特殊的操作dom方法;

document.querySelector("input[type="range"]")

（1）可以选中元素的属性来获取元素是其一，一般我们通过id，class，tag标签；（原本我想要获取伪元素的，后来发现伪元素并不在dom，只是一种               html附加信息，所以不能选中它，当然还有其他办法选中，但目前未掌握）

（2）更加强大的是它可以获取相同class的所有元素，比如任务一是我想选中九个同class的格子。发现通过类名不能全部获取元素，我需要找到其直接父元 素获取父节点间接获取全部的其同类名子元素；使用querySelector这样一来就省了很多操作。而且更加简洁；

 3，文字竖排：

（1）一开始换行和使用特殊属性来实现的，然后发现竖排属性 writing-mode 对一些浏览器兼容性不好；然后放弃使用；

（2）后来使用<br>插入文字间最方便，最省力，而且作为一个使用多年的标签，兼容事没有问题的；

（3）当然也有为文字容易设置一个只能容纳一个字大小的办法，让文字换行显示；