很多人说修真院的任务难度大，想了很久，结论是：并不是修真院任务设计的难度大，而是没有把任务设计的细节讲清楚。
所以这次，特地将CSS任务一的详情先整理了一下，放在知乎上来，如果有觉得其他需要帮助的地方，请及时告诉我。
预计会在下一个版本更新之后，把这些内容放到官网上去。
第一 任务目标 这次在任务的设计上，会新描述一下，在每个任务中，会学到哪些东西。
第二 任务详解 跟着会是一个总纲，来介绍一下整个任务体系的设计，重点包括任务中需要哪些技能，设计这个任务的原因是什么，需要哪些基础知识，有什么样的具体步骤，会遇到什么错误，验收标准是什么，多长时间完成，可否跳过任务中的某几个步骤。
我想这已经可以把一个任务的体系描述的比较清楚了。任务为什么设计，本身就包含了对于技术领域的知识点的分解，在某种程度上来讲，是一个更宏观的东西。
第三 操作步骤，只要不是特别傻，应该都可以跟着走一遍。我原本上期望做两版的操作步骤，并不想给所有人都提供这样详细的步骤。反而会让一些更聪明的人错失犯错的机会，也意味着失去了一次学习的机会。
第四 任务下的技能树，增加完成任务后，每个技能的熟练度。 这其实是一个很重要的环节，可以方便的看到自己在某个技能上的熟练程度。在接下来的官网改版中，会把这个做上来，而且还会对每一个任务的完成做评测，来衡量每一个人的技能熟练度，并以此来确定更针对性的辅导方案。
第五 学习资料， 这些学习资料，都是修真院的师兄们，觉得有价值的，对你们学习有帮助的资料。如果你们有更好的资料，也欢迎你们提供出来 。
第六 验收标准，完成任务之后的验收标准很重要，在真实完成项目的时候，第一件事就是要明白自己要怎么去测试，以保证完成的任务是没问题的。
第七 编码规范 编码规范对于一个真正的程序员来讲很重要，这个理应是一个通用所有任务都可以适用的规范。
第八 常见问题 就算是有了以上的指导，还是会遇到各种各样的问题。不要担心，这就是程序员的生活，不断的遇到问题，再去解决问题，基本上就是程序员的日常。如果在常见问题中找不到你所遇到的问题，可以在日报里告诉我们。
第九 深度思考 就算是完成了以上的任务，仅仅是在实践上做完了。更不用说很多人是在抄袭别人的代码。所以深度思考就是在给出一些更多需要深入理解的知识点。这些知识点，我们并不直接给出答案~在线下的话，这些知识都是线下的师兄们自己做分享，每天讲解给大家听的，这个也是上篇文章，小课堂里介绍的内容。
最后，强烈要求，做任务的时候不要先去看别人的代码，先自己写，然后对比其他人的代码，这才是正确的学习姿式~如果你不听我的话，非要去抄别人的代码，跟修真小说里的强行吞食丹药来提升境界一样的，或者是被人直接灌顶传输功力，爆体而亡都有可能~
二 CSS-Task1 任务详解
2.1 任务的目标
- 网页是由什么组成的
- 如何生成一个网页
- 如何访问一个网页
- html和css如何搭配工作
- 页面基础的布局方式
- 如何用一行代码兼容不同浏览设备
- 页面和想象的不一样时如何进行调试
2.2 任务详解
1.这个任务需要学会什么技能，为什么要优先学习这个技能
1.1环境配置：一个职业的程序员，来到一家公司首先要做的第一件事是什么呢？搭建开发环境，任何程序都需要一定的开发环境或是运行环境。我们为什么不提供一个集成的虚拟环境供大家使用呢？因为这不是一个合格程序员会做的事：来到一家公司让别人给你配置环境或者依赖公司会提供一个公共开发环境？终究还要靠自己为代码搭建各种环境做各种准备。
1.2网页布局基础：html之所以叫做标识性语言，是因为它只能对内容进行标识，而仅仅这样按顺序从上到下渲染下来的文本页面显然不符合现代人的浏览需求，需要加入css对其样式进行调整。首先要做的是如同搭建房屋框架一样，把不同的内容放到各自的位置上（有的在左边有的在右边，有的固定在页面顶部……），这些就是做网页最基础的一步——布局。
1.3调试代码：一个成熟程序员和新手程序员的差距体现在哪里？除了写代码的速度外，还有一点非常重要那就是解决问题的能力。通过学习调试代码解决一部分遇到的问题，成为职业程序员的初步素养。安家费了
2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案
有人问为什么一开始的任务就那么难，为什么不像W3C上一个知识点一个试一试？这是因为W3C的知识点太过零散，往往学了后面忘了前面，好多内容也不知道有没有用在哪里用。而这个任务的目标是先做出一个完整页面来，让人学了之后知道html+css是怎么制作页面的。
3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成
做这个任务并不需要太多的编程知识，除了搭建环境，安装上必备的编辑器和浏览器之外，所需要了解的知识主要有：
如何创建html页面 ；html常用标签；如何添加样式表；如何通过样式表class的方式改变页面样式；盒子模型是什么；浮动是什么；长度单位有哪些；做自适应可以用什么单位；调试工具怎么用。
这些基础知识并不需要花费太多时间去学习，也不用学习太过深入。比如html的标签大多数只需了解一下，不用在一开始就强行全部记下来。一是这样做太枯燥容易忘记，二是没有实践辅助记下来也没太大用处。CSS的各种属性也无需了解太细，知道怎么调整颜色、长度、边框以及浮动和非浮动元素的区别便可以，随着任务的深入和长期的练习，就能将这些知识点融会贯通了。
4.做这个任务设置了哪些具体步骤，为什么这么设计
任务的步骤是按正常开发的流程设计。虽然任务非常简单，但却是以实际项目中可能遇到的标准为标准。先通过创建9个块级元素div作为小方块，考验了浮动知识点并使小方块不再独占一行，检查了盒子模型知识点让小方块之间保持间隙，再熟悉一些属性改变其颜色、边角长度等样式。在涉及到长度问题时，设计了一个对比步骤，先使用px，再使用百分比，以增强大家对自适应的理解。最后辅以开发调试工具，学习自己解决开发当中遇到的各种问题。
5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料
我们总结了以往师兄们常常遇到的问题，如页面中的文字出现乱码，那么应该去看下方的文件编码；如果小格子每格就独占了一行，那么应该去好好看看浮动是怎么回事；如果小格子一行不止3个，那可能是外边框和小格子的宽度比不太正常。
6.怎么样才算把这个任务完成了，验收标准为什么要这么制订
首先是需要还原设计图，让页面一眼看上去和设计图是基本一致的；其次是改变浏览器宽度，保证浏览器在横向上不会出现滚动条，因为按照人们的使用习惯，浏览网页时页面可以无限高度，只需要滚动鼠标往下拉，但如果出现了横向滚动条则会造成非常差的用户体验；最后是保证页面的主体内容能随页面宽度变化，保证它占满整个页面宽度，最大化展示区域。
7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间
我们认为整个任务大概需要12个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需6个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大36小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。
8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？
在这一节里，我们认为每个步骤都非常重要，没有可以跳过的部分，因此请大家务必努力学习争取早日通关第一关
2.3 具体步骤：总时长 6H 12H 36H
-
（环境搭建）下载编辑器Sublime/webstorm并使用它进行编码工作 （0.5小时）
-
（环境搭建）下载浏览器Chrome并在之后的开发中使用它（0.5小时）
-
（知识学习）查看学习资料--《html文档类型》（0.5小时）
-
（编码实战）新建一个以.html后缀结尾的文件，并且补全其中的文档类型和基本标签，使用Chrome浏览器打开它（0.5小时）
-
（知识学习）查看学习资料--《html标签》（0.5小时）
-
（知识学习）查看学习资料--《什么是css》（0.5小时）
-
（编码实战）为html添加几个标签，并尝试为其添加css样式（0.5小时）
-
（知识学习）查看学习资料--《css盒子模型》（1小时）
-
（知识学习）查看学习资料--《float浮动》（1小时）
-
（知识学习）查看效果展示--理解任务目标（0.5小时）
-
（编码实战）为html标签添加样式，使其成为黄色正方形（0.5小时）
-
（编码实战）为小格子设定一个具体的px宽度高度（0.5小时）
-
（编码实战）继续添加样式，以float浮动的方式布局，使其组合为九宫格（1小时）
-
（代码调试）使用Chrome的开发者工具（F12/Ctrl+shift+I），调试页面（0.5小时）
-
（编码实战）进一步修改样式，使九宫格大小可以随屏幕宽度改变，初步体验自适应（0.5小时）
-
（知识学习）查看学习资料--《viewport介绍》（0.5小时）
-
（编码实战）并使用它对html进行优化，适配移动设备（0.5小时）
-
（知识学习）查看学习资料--《chrome开发者工具》（0.5小时）
-
（代码调试）使用Chrome的开发者工具（F12/Ctrl+shift+I），模拟手机访问网页（0.5小时）
-
（知识学习）完成任务后查看验收标准，确认任务已完成，如果未完成返回相应步骤（0.5小时）
-
（知识学习）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时）
2.4 技能树
- sublime——增加经验度10
- html文档类型——增加经验度10
- html标签——增加经验度20
- Chrome开发者工具--查看元素——增加经验度5
- Chrome开发者工具--模拟手机——增加经验度10
- CSS浮动布局——增加经验度10
- CSS长度单位——增加经验度10
- CSS元素样式——增加经验度5
- 自适应概念——增加经验度5
- 自适应最佳实践——增加经验度5
2.5 学习资料
ps:这里的学习资料都对应有链接，太懒了没去官网上贴，有需要直接去官网上看。
- subline使用
- html文档类型
- html标签
- 什么是css
- css盒子模型
- float浮动
- viewport介绍
- chrome开发者工具使用
2.6 编码规范
这是这个任务单独需要注意的编码规范
- 文件必须用UTF-8编码
- 标签属性必须为小写字母，标签必须合并，属性值由双引号包含
- css使用外联的方式，放到<head></head>之间
- css控制样式时不得使用id
- 布局时不使用table，使用div实现
2.7 验收标准
1.还原设计图：保证做出的小格子圆角、颜色和设计图一致
2.自适应：调整浏览器的宽度不会出现滚动条，小格子会随着窗口宽度大小变化，不会变形
3.移动端：在模拟手机查看时也能保证九宫格宽度等同屏幕宽度
2.8 常见问题
1.为什么九个小格子还是在一行？
2.为什么我的网页会出现乱码？
2.9 深度思考
1.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？
2.IDE是什么？它和文本编辑器相比有什么优缺点？
3.HTML文件里开头的Doctype有什么作用
4.如何理解盒模型
5.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
6.什么是自适应，怎么去自适应？
7.加和不加meta的viewport有什么区别？
三 后记
任务一大概花了我们一周左右的时候来整理这些资料。
我现在还没有想好，这些是免费公开，还是象征性的收1块钱。
以及，如果你觉得对你们有帮助，转发，点赞就是最好的支持。
======================IT修真院=================
善良系列：技术干货分享
正直系列：修真小说
纯洁系列：程序员的小故事
