今日完成的事

      完成任务十三 一二页面

明日完成的事

      完成任务十三，进入任务十四

遇到的问题

      任务十三其他页面没什么问题，在做侧边栏的时候，遇到了一些问题，首先是label嵌套的问题，我开始是这样的，因为在做任务十的时候就是这么做的，想扩大可点击的区域，但是这次死活出不来效果，进行了大规模的页面改动还是不行，最后求助师兄，师兄讲解了一下最外层嵌套的<label>内部只有一个input的时候不需要附给他id，去掉for class等属性之后果然就有效果了。然后想给左边栏划出划入添加过渡动画，然而出了新的bug，页面再加载的时候会进行一次动画的过渡效果，网上查了半天也没个答案，我自己想了下，transition过渡动画，侧边栏出来进去都会有效果，页面加载，相关属性渲染比如margin-left：-37%，这时候transition会被触发。

    收获

          查询了transition的相关文档，学会了几个新的属性，比如控制动速度的：

           ease：（逐渐变慢）默认值

           linear：（匀速）

           ease-in：(加速)

           ease-out：（减速）

           ease-in-out：（加速然后减速）

任务总结

      任务名称：CSS-task10     

      任务成果：https://tarzanshen.github.io/eighth-project/html/mission8.html

     任务耗时：2019.6.18-6.19

官网脑图

个人脑图

任务总结

       学习了如何自定义input样式，任务十的难点就是自定义表单按钮，有两种方案实现，一种是用自定义的label标签覆盖掉原来的radio圆点，以此来实现，这种方法好处是代码可以少写点，缺点就是兼容性有问题。另一种就是隐藏掉原来的radio的样式，重新设计label标签，这种方法虽然代码多写点，但是效果是最好的。重设选项必然先设定label标签，label本身无任何样式，当鼠标点击的时候焦点会转到这个属性相关的表单属性，需要使用for来绑定input，所以当我们隐藏掉默认样式时，就需要设置checked伪类，点击label触发checked 引出事先设置好的圆点样式，来实现切换。 select更简单点直接在属性上面设置就行了，使用outline取消焦点边框，难点在于自己画的方框位于流的上方，点击方块触发不了select选框，后来查阅资料的时候发现pointer-events这个css3属性，把他设为none时，他会无视上方元素，直接触发下方的元素。appearance 属性使元素看上去像标准的用户界面元素。将他设置成normal就可以去除掉select选框的默认样式，比如默认下右边的三角形。

任务总结

      任务名称：CSS-task十一

      任务成果：https://tarzanshen.github.io/ninth-project/html/mission9.html

     任务耗时：2019.6.19-6.20

官网脑图

个人脑图

个人总结

 在任务十一中，学习到了sass，看到这个有点蒙，没想到css里面还细分了这个，不过简单过了一遍文档后，上手也是极快的，而且编写速度更快了，css全名叫层叠样式表，顾名思义他只是一个设定样式的，本身并不具备任何编程语言的特性，比如函数、变量等等。所以出现了sass，这是css的扩展语言，也叫css预处理器，可以进行网页样式设计，并转换成css文件，他的扩展文件名为scss，意思是sassy css，他补足了css和编程语言之间的短板，给css添加了更多强大的功能，使得他可以完成一些更为复杂的功能而不依靠js。sass是基于ruby语言编写的，但是和ruby语言没有关系，但是依赖ruby的运行环境，可以在http://www.ruby-lang.org/zh_cn/downloads/下载安装。

命名规范问题，代码往往不止一个人看，如果自己随心所欲，没有规律而言的话，不仅别人看不懂，隔一段时间自己回来看的时候也会变得很麻烦，随意合理的代码规范是很有必要的，css书写规范先按顺序位置、大小、文字系列、背景、其他（annimation，transition）。命名规范使
用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

任务总结

      任务名称：CSS-task十二    

      任务成果：https://tarzanshen.github.io/tenth-project/html/mission10.html

     任务耗时：2019.6.21-6.22

官网脑图

个人脑图

总结

      使用sass重写了之前的页面，在熟练使用sass的语言特性后，开发速度明显能加快，重写之前的页面，使用sass重构，优化了部分代码，将原来<img>图标全都改成背景图，这个可以大大加快页面响应速度，减少页面对服务器的请求次数。减少了float的使用，float脱离文档流会对其他元素造成影响，如果之后要对页面改动就会非常麻烦。然后就是不设宽度，充分使用块级单位的流体特性，完成流体布局，可以在改变屏幕分辨率的情况下依旧有较为完整的布局。

    更多的了解代码命名规范

 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母
-避免使用中文拼音，应该采用更简明的英文单词进行组合
 命名注意缩写
 不允许通过1、2、3等序号进行命名
 避免class与id重名
 id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
 class用于标识某一个类型的对象，命名必须言简意赅。
 尽可能提高代码模块的复用，样式尽量用组合的方式