带了挺多届的学生，发现了一个现象，同学们在学习HTML，CSS，Javascript这些前端基础技术的时候，不会有太大的问题，大概也能分开掌握里面的标签，元素，选择器，函数，对象等等知识点 。但是要综合运用这些知识做一个好看的网站的时候，就犯晕了，不知道该如何布局，如何运用合适的样式，一些稍复杂的效果也不知道怎么下手了 。
这样我认识到，单纯学习这些分开的样式等知识点，是无法有效的运用他们的 。那么就需要一个前端项目来进行整体的练手 。
每个培训学校呢，都会有一个WEB项目来练手，通常都会做一个电商的购物网站，虽然听上去老套，但是确实很典型，各种知识点都会涉及到 。
既然如此，就做一个购物网站来让他们跟着做来练手吧，那么做一个什么样的好呢? 放眼望去，难道还有比天猫官网更有说服力的吗?
能够从头到尾做一个天猫官网前端，是非常有价值的 。假如，能够独立的做出来，那么这就意味着，各种典型的场景，布局的思路，相关技术的运用都达到相当熟悉的程度，这个对于找工作，拿offer，更重要的是，技能的提升，是很有用的 。
说干就干，我就照着天猫官网，做了一个模仿天猫官网: http://how2j.cn/tmall 包括里面的取色，布局，javascript交互，尺寸，都统统尽我所能做到跟天猫官网近似 。
文章插图
文章插图
好吧，同学们，就参考这个模仿天猫官网来练手，做一个一模一样的吧!
然而，当我准备把这个项目一股脑打包给同学们的时候，我就懵逼了~
为什么呢? 因为内容实在是太多了! 为了实现前端效果，其中光是style.css文件就2200多行 。
文章插图
Html页面也相当复杂，还有各种javascript的交互 。如果就这么一股脑打包给同学们，那么让他们直接去天猫官网看又有什么分别呢? 对于前端新手，一下子太多太大的信息量，不仅不能被有效地消化掉，还有可能产生副作用--面对大量代码无从学起，强行阅读复杂代码，难以理解与消化，逐渐增加受挫感，最后失去兴趣
为了能够让这些知识变得易于消化和吸收(也不枉我花了2个多月的时间，一点点取色，量取尺寸，翻来覆去规划布局，反复尝试精心制作一样的javascript交互效果，最后做出来的这么20多种模仿天猫官网页面)，我把页面分为如下几类页面：
文章插图
有的页面比较复杂，就再拆分的小的页面，比如首页又分为导航和轮播，分类和推荐产品，产品列表以及javascript的交互部分 。
文章插图
光是拆分的小的页面也不够啊，在每个页面知识点的讲解里面，首先展示运行之后的效果
文章插图
接着讲解为了达到这个效果要进行如何的布局
文章插图
结合布局，无CSS效果的HTML结构就好理解多了
- 天猫市场管理规范变更通知
- 天猫新增Xbox商品发布规范，变更天猫交易时效规定
- 天猫市场管理规范更新
- 手游传奇合击版本 传奇英雄合击版本
- 黑森林之谜 黑森林传奇版本
- 梁博我是歌手第几季第几期 男孩梁博我是歌手现场版
- 薛佳凝和胡歌最近新闻 薛佳凝微博网页版直播
- 合击版本的合击跟连击怎么用 传奇合击连击版本
- 韩版中变传奇手机版 探秘韩版传奇
- 传奇变速齿轮手机版下载 传奇变速齿轮手机版
特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。