今天完成的：

        完成了任务十的响应式设计并通过任务。

        安装了Ruby，配置了sass环境。

        看了一些sass（scss）的入门知识，了解了简单的使用。

明天计划的：

        使用sass完成任务四的页面，尽量精简自己的css样式。

        为JS做一些前期准备，了解下变量、函数、对象、数组、作用域、循环的含义；以及HTTP相关知识。

遇到的问题：

  >>>在布局表单的尺寸栏的时候，改变屏幕宽度会使布局混乱，字和输入框错位。

        解决方法：在两排尺寸的外面加上一个div，给长、宽、高每个子项包上span变成一个块，然后使用flex布局。这样屏幕变窄，布局移动的时候也会成块移动，再使用margin、padding控制起来就好控制了。

  >>>关于在表单中 input 和 select 的布局问题：初始布局使用flex将两块分散在了两边，这样在屏幕变窄之后左列会变得比较长，右边一个下拉列表显得留白会很多。

        解决办法：在 768px 一下，将下拉列表放在 input 下边。

  >>>头部导航栏按钮布局：

        初始是 flex-end，在缩小到一定程度会超出屏幕，然后设置flex-wrap，不过自然被挤下来会很难看，然后我让480px一下变成了两列对齐的布局。

        <!-- 今天没有敲太多代码，完成任务十之后，就准备了一下sass的环境，之后学习了一下sass的一些入门知识。-->

今日收获：

        因为遇到了一点伪元素的小问题，就查看了一些资料。看了一下关于before、after的内容。了解了一下before、after插入的内容、位置、特点，以及使用时的注意事项。（参考链接：https://blog.csdn.net/bingkingboy/article/details/47093525）

        安装了Ruby和Sass，安装就很简单了，度娘一下就ok了。

        关于使用sass时，环境的配置。webstorm中可以直接自动编译sass。

        （教程链接：https://www.cnblogs.com/cshi/p/5622650.html）

        关于sass和scss的区别：sass里没有花括号和分号，全靠tab控制格式；scss除了声明一些复用的样式外，跟css基本一致。

        关于编译的方法有好几种：命令编译，GUI界面工具编译，自动化编译。不过因为上面配置好环境之后，在webstorm下会自动进行编译，暂时也不去对其他编译方法进行了解了。

        一些需要注意的地方：Sass编译不支持“GBK”，使用“utf-8”就好了。路径里不要出现中文。

        还了解了不同风格的输出方法，关于 混合宏、继承、占位符 的一些内容；以及混合宏、继承、占位符的区别和适用场景；和sass中的各种运算。

任务总结：

    任务名称：CSS任务10
    成果链接：https://hanxiaoran906.github.io/testgit/Project/Tasks/Task10.html
    任务耗时：6.30~7.1  共计2天
    技能脑图：
        个人脑图：

       官方脑图：

        任务总结：

        a.任务进度符合预期，无延期。

        b.任务10主要就是对表单元素的使用。其中input有type属性值，可以有各种功能，比如文本输入框，密码框，单选、多选按钮等等。其中 radio 就是单选框，将多个 radio 的 name属性设置为一样的值，便会成为一组，在这些选项中只能选择其中一个。在单选框这部分还使用了一个 label 标签，用 for 来指向表单元素，可以在鼠标点击 label 元素的时候，光标聚焦在指向的表单元素上。checkbox 是多选框，不过在这次的任务中没有用到；与单选框用法基本相同，默认样式一般为方块。还使用了一个 select 元素，用来下拉然后可以进行选择，使用 option 进行添加选项。select 元素也有一些属性可供选择，其中任务中用到了 disable、selected、hidden，添加之后，该选项会默认被选中显示在下拉框中，在点击之后消失，可用来做下拉列表的提示信息。

        c.关于任务中遇到的一些问题：

        >>>制作footer的时候，三列布局，使用flex进行布局，因为三个元素的宽度的原因，使用space-between中间的元素会偏右不少，看上去有点别扭。之后想要采用float布局，不过float浮动、position定位之后，元素不能撑起容器的高度，最下边的那行文字会向上浮动一点距离，虽然能通过padding、margin使效果看上去差不多，不过试着缩放了一下，在响应式的时候问题很大（因为给固定定位了。。。）。

        解决方法：通过调整宽度、字体大小等样式，用flex进行布局，达到了想要的效果。后面做响应式也会方便很多。

        >>>在做流程图（进度图）的时候，开始没什么思路，主要是在想怎么把小圆圈给放到条上去。

        解决方法：开始想用定位来做，不过感觉会有点麻烦，就放弃了（现在想想好像该试一下来着。。。）。之后想到了用多个div给拼起来。之后看了师兄的又知道了一种办法，将圆圈（div）放到长条（div）里面，然后flex将其居中。我觉得这个思路很棒。

        >>>关于input（radio）按钮的自定义样式：这个样式是百度找的方法，然后稍作修改制作出来的。

        其主要原理时：先将原按钮大小变成0，然后添加before、after伪元素，对两个元素进行样式设置达到改变样式的效果。

        >>>关于select下拉选项的自定义样式：其原理就是在select元素外包一层div，然后清除掉select一系列的默认样式，对容器进行自定义样式的设置（border、background、font、margin/padding）。

        >>>在进行自适应设计的时候，有些元素在宽度变化下会变得很混乱，比如input（text）什么的。因为他是会自动打断，导致字和文本框在屏幕窄的时候错位。解决思路就是让那些想让他成块出现的东西，变成块元素，然后在文档流中流动的时候就会成块出现，控制位置也变得很简单。

        在这个任务中，改变radio自定义样式的时候，还用到了before、after伪元素，然后去了解了一下，明白了其插入的位置、能插入的内容、以及其插入内容的一些特点和使用时要注意的地方。主要就是伪元素用来制作一些样式，美化html结构，不能用来放重要的内容。