发表于： 2020-02-10 15:32:47
0 1665
CSS3任务详解
1.这个任务需要学会什么技能，为什么要优先学习这个技能
1.1 移动端布局：由于手机硬件的飞速发展，现在只要是新建的网站大都会考虑到移动端的兼容，大势所趋下已经是一项前端工程师的必备技能
1.2 rem：这是一个css3中新推出的长度单位。因为现在手机屏幕分辨率越来越多，为了适配不同分辨率整体缩放，同时不增加额外工作量，于是就有了这个单位，便于修改和适应不同分辨率大小同时还容易计算。
1.3 photoshop切图：虽然我们不是设计人员不需要做出复杂的效果图，但在工作中，切图是一项优化团队配合的必备技能，难道设计人员能比自己更理解div更清楚到底需要什么样的切图吗？
2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案
之所以一开始就学习适应移动端的网页布局，是因为主要用于移动端的页面往往比PC端的更简单，因为屏幕较小无法展示过多内容，因此做起来也相对较快，非常适合入门学习时使用。而且还能养成良好的习惯，有利于未来的工作和发展。
3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成
做这个任务并所需要了解的知识主要有：
盒子模型的margin和padding；position的各种使用方法；rem的用法和技巧；如何用photoshop切图；dpi是什么；
这些基础知识一些时间去理解，最好是在粗看一遍后就开始实战，在实战中又去反复学习，强化理解。比如先了解position和布局相关，它有几种属性和它文档流的关系；然后是rem除了作用于文字外还经常作用于长宽高，它一般是什么情况下需要使用；photoshop切图则只需要学习一下工具的基本操作如选择移动等，以及切图操作；dpi则最好在实战后再去看相关文章学习更有助于理解。
4.做这个任务设置了哪些具体步骤，为什么这么设计
任务的步骤按一般实战步骤设计。虽然任务非常简单，但也是以实际项目中的标准为标准。先使用了更多的css属性对各个元素进行布局，然后为不得不使用图片的内容切图；在调试的时候还要考虑到真正的移动端的展示效果和处理办法
5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料
我们总结了以往师兄们常常遇到的问题，如怎么才能让网页宽度真正自适应屏幕，要解决这个问题首先是可以参考师兄们的日报，然后可以学习一些知识点如viewport、媒体查询、dpi和屏幕大小图片大小关系等文章。
6.怎么样才算把这个任务完成了，验收标准为什么要这么制订
首先是需要还原设计图，让页面一眼看上去和设计图是基本一致的；其次是改变浏览器宽度，保证浏览器在横向上不会出现滚动条；然后是保证无论页面宽度或设备如何改变，页面的整体布局不会发生改变；最后代码规范，css命名时不要使用拼音或无意义的单词字母。
7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间
我们认为这个任务大概需要12个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需6个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大36小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。
8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？
在这一节里，如果感觉理解图片适应屏幕大小和清晰度有困难，那么可以先姑且跳过，不会影响后续的内容学习
返回列表
评论