发表于： 2018-05-16 23:08:47
1 630
前一段时间因为学校的一些事，学习计划耽搁了将近两周时间，这两天才开始接着往天计划慢慢回归学习，已经到任务十三了，争取早点结束所有任务，开始下一轮的学习。
本日的日报是任务十三的
完成情况：
1. 去查找了一些资料，详细了解了一下css的书写顺序，并自己总结出了一种适合自己的css书写顺序，不知道行不行，具体如图1
2. 因为当时做任务七的时候，没有按照css的书写顺序来书写，是很杂乱无章的，所以第一件事就是先将任务七的css代码按照上面自己总结的css书写顺序修改过来，然后再对任务七的代码进行化简优化，
3. 了解css重置样式表，为什么要重置样式表
资料链接：https://blog.csdn.net/u014516981/article/details/52141451
4. 了解css的样式分离
5. 了解对css进行架构，如何对css进行架构
https://llp0574.github.io/2016/11/17/css-architecture/#3-use-consistent-class-namespacing
遇见问题：
1. 如图2
怎样实现首页的侧拉菜单，保证点击页面顶部左边的按钮后向右显示出来，再次点击又向左隐藏回去
这里对我来说是个难点，在网上查找了很多的资料，几乎全是使用js或者jquery来做的，但是这两个我都还没学，开始的时候比葫芦画瓢使用js来做，无论怎么修改，都只能实现点击一次按钮向右显示展开，但是再次点击后就不会向左隐藏回去了，最后还是去求教的师兄，他说用纯css也能实现，直接用checkbox复选框来做，有了大致的方向，又开始继续去慢慢摸索，这个地方花了我很长时间去完成，但我觉得情有可原，毕竟无论是哪种方法我确实都不知道，完全没有网那方面去想，只希望通过这里的一个案例，对侧拉菜单有了一定了解后，以后再遇到需要做出相应的功能的时候自己能做出来。好了，废话说了一大堆，直接上代码，进行分析
首先先给出html代码
图3
A. 首先是对页面左上角的那个三横杠的按钮进行设计
CSS代码如图4
首先先对标签label进行了解，其实这个标签在做前面哪个任务的时候我就用到过，
<label>标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
再通俗点说，就是用户鼠标点击控件相关的文本，也会触发控件，让它选中或取消
代码：
<!--一-->
<input type="radio" name="sex" id="male"/>
<label for="male">Male</label>
<!--二-->
<label><input type="radio" name="sex" value="male"/>Male</label>
对于一：<label> 标签的 for 属性应当与相关元素的 id 属性相同，因为”for” 属性可把 label 绑定到另外一个元素，也就是说，此时必须要有id与for属性相对应，不然不起作用，记住，如果按照第一种方法，必须要有id（看图3上面红框里面的箭头）
按钮里面的三条横杠我是使用代码来实现的，一开始是打算像任务十修改单选按钮的默认样式一样来修改这里添加的checkbox复选框默认样式，并直接添加背景图片，但是添加进去没有显示出效果，修改了很久没改出来，就换了种方式了，直接像前面任务九的按钮一样，直接使用代码实现三横杠，
B. 对要显示的菜单的设计
css代码如图5，图6
其中的一些布局的操作不做多余的解释，我想说的是关于每行选项后的向右的箭头，由于所用的图片都是一样的，所以不用像每行文字前面的图片一样需要单独去设置，设置箭头，我用到的是伪元素after，而每行前面的图片我用的是伪元素before，通过代码可以看到，因为必须分开来设置，所以有一些代码看起来有点冗余，在使用sass时可以使用@mixin混合器来单独写直接include导入即可
C. 重点来了，也是困惑了我很久的难点
如何实现点击页面顶部左边的按钮后隐藏的菜单向右显示出来，再次点击又向左隐藏回去
css代码如图7
每部分的代码实现了什么功能图里面已经有了注释，已经不用做多余的解释
我只是解释一下里面所用到的一些知识点
- a. ~ 是什么意思？
查找资料，~应该是一种关系选择器，
关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有 空格、>、~，还有+等
具体介绍如图8
- b. transform: translateX(70%);
元素沿着横向（x轴）移动70%，一般是从左侧为开始点也就是0点。而这里数值是蒸熟的70%，所以是从左侧0点向右移动70%。
关于transform的其他属性介绍，资料链接：http://www.w3school.com.cn/cssref/pr_transform.asp
1. 关于css的分离，虽然看了很多的相关文章，也了解了css分离的相关知识点，但还是有一些迷茫，
- a. css分离虽然减少了部分的css代码，但与之对应的不是一样地增加了html的class类名了吗，
- b. 而且class类名是自己定义的，别人还不一定看得懂你的代码，还得来回去查看你css分离的css文件
- c. 还有，通过class来加入css的声明的同时不可能就不需要其它的css声明来配合了，肯定还得要在css文件里设置 一些其它的声明来一起实现效果，这样的话，在html与css文件之间一起配合设置样式 肯定比直接 一起在css文 件里面设置样式显得更加复杂，同时，当你需要修改一个值时，在css文件里修改一个值肯定比在html文件里改类名来得快些，万一你忘记了分离时命名的类名，还要去查看类名再回来添加类名，
- d. 虽然通过在html里面通过class类名导入css声明能减少css的代码量，但是随着时间的推移，你的css分离的css文件里面的代码不是一样的在增加吗
so~~，既然css分离都有这么多的不足，为什么要css分离呢？也许当写的页面多了，代码量逐渐增加，它的优点（减少css代码量）才能体现出来，前提是你对你自己的css分离的文件里面的class类名很熟悉，但依然存在上面b、c、d的问题啊
2. 往天单独看了对css进行架构的文章后，还是能看懂的，但是今天大致了解了下任务十四的拆解成自己组件库后，不由自主地将两者联系在了一起，不知道它们之间有什么关系，感觉他们要做的都是同一件事，就有点懵了，不知道它们之间有什么区别？
可能是还对组件库不够了解，毕竟由于时间问题，组件库只是了解了个大概，所以并不太清楚，这个问题只有先占时留到明天去解决，
任务收获：
1. 了解css的书写顺序
2. 实现按钮的点击事件
3. 了解css重置样式表，我用reset.css 命名
4. 了解css的样式分离，我用 commom.css 命名
5. 了解对css进行架构，如何对css进行架构
下一计划：
开始任务十四，详细了解css组件库到底是什么东西，并着手对任务十四进行修改，争取在近两天完成
返回列表
评论