今天完成的事情：

布局页面一

研究这个侧边导航栏

讲完小课堂

明天计划的事情：

把侧边导航栏弄出来

小课堂上传的资料明天应该也都可以了，把小课堂后事做完。

遇到的问题：

对于代码的功能实现、复用、简化、维护和上的取舍很纠结

能想到的是将布局定位一类的：

display: flex;
align-items: center;
justify-content: center;

给一个选择器a，然后直接给html的class=""中加上a。也就是用“CSS样式分离法/CSS原子类法”。借此简化代码。

使用这种方法对于维护应该也不是太难？

将带有属性变量的：

height:4rem;
margin-top: 1rem;
font-size: $fo-si;
color: #fbb435;
background-color: $white;
border-bottom: 1px solid #fbb435;

使用SASS的混合宏进行书写，方便维护。万一需要该其中某一个值，也不会像"CSS样式分离法"那样陷入尴尬的境地

（当然我上面并没有用混合宏书写，还只是提个概念。写下一个页面的时候在尝试用这方法。）

上述中想表达的整体思路是：为了同时满足代码的复用、简化、维护。对于display、float等这种不带变量的样式用“CSS样式分离”。把width:1rem;、height:2rem、margin-left:1rem;等这种带有变量的使用SASS混合宏书写（因为如果把width:1rem;这种使用“CSS样式分离”的话：

.a {width: 100px;}

万一我宽度要减少1px呢？怎么办？不可能在额外设置一个样式吧？就算可以，大的页面用到width值的地方肯定有很多，每个值都写一个样式会导致代码冗余。所以对于这些变量使用混合宏书写，方便修改。对于display、float这种有固定值的就用CSS样式分离。）

不知上面的思路是否正确，师兄给个意见参考下。

收获：

表单选择器

:checked 选中"选中"状态的checkbox或radio。

动态伪类选择器：

:focus 向拥有键盘输入焦点的元素添加样式

:checked这里的用法忘记了，再次在这里写出加深一下印象：

<label class="box-btn">
    <input type="radio" name="type"><i></i><span>飞机盒</span>
</label>

首先用<label>关联选中input,并且在input后加上<i>用于对单选按钮的样式设计。（label用法：当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上）

然后：

.box-btn > i {
    padding: 0.4rem;
    border: 0.1rem solid #1277DC;
    border-radius: 50%;
}

input[type="radio"]:checked + i{
    border: 0.4rem solid #1277DC;
    padding: 0.1rem;
}

用上面这种写法，对选中框进行样式的设计（:checked对input使用）

注意写法：input[type="radio"]:checked + i {}

去<a>下划线全家桶：

 a:link

 a:hover

 a:visited

transform 、translate 、transparent 、transition

上面这四个相似的属性一直在我脑海里打作一团，现在梳理一下：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transform: translate();两个是一起用的。

transparent 表示透明。一般用于 border: 1px solid transparent;

translate 翻译，转化，转变为，解释，调动的意思。用于transform中。

transition 为元素添加样式更改的浮动化，使用户的体验更加好。（有四个属性：property、duration、timing-function、delay）

在SASS中写中文需要加上

@charset "utf-8";

是否还可以更好：

昨天预计完成16个“番茄钟”的学习时间。今天只完成14个。

争取明天达成16个番茄钟并做到更多。

进度：task13

任务开始时间：2018.6.14

预计结束时间：2018.6.17

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html