适合小小白的第一个前端项目（HTML、CSS）

这个时候的我刚看完火狐文档的 HTML、CSS 文档和小半本书，勉强算脚尖进入前端大门，前公司官网刚好要插入一个主题单页，前辈们照顾新人，让我不要一直看书，要真正去把知识实践起来。于是在前辈们指导下，我颤颤巍巍开始写，导航栏一上来就下不了手，动画就更不要提。后来，把整个页面写出来后，比吃十顿火锅还开心。下面正式开始，先上图： 先分析把上图当做你从设计师那拿到的设计稿，把页面拆分分出最难最没把握的part脑中构想大概使用的技术拆分页面【导航栏】【Banner部分（区块链）】【四个卡片部分（区块链的主要特点）】【主要内容（区块链服务）】【页面尾部（不含动画）】【背景圆圈】整个页面拆分出六个部分最难的part毫无疑问是【监听页面滑到底部】，【小推车动画开始运动并停下来】使用技术根据我们已经学习的技术，去构想这个页面。拆分出的六个部分可用基础所学的 HTML 和 CSS 写出。最难的小推车动画部分使用的是 CSS3 动画。去实现基础部分篇幅有限，主在介绍思想和方法，我们以【四个卡片部分（区块链的主要特点）】为例， 我们尽量去把一个问题拆分成许多已知的小问题，上图我们把卡片拆分成上图下文的样式，两个div一个包裹图片另一个包裹文字，先认为都在一行每个卡片都用一个

• 包裹，再右浮动，改变第二张和第四张基于父元素的相对位置。(下图html代码只包括两个卡片)难点部分监听页面滑动我们该什么时候让推车动画开始运动？页面滑动到底部比较合适。动画是Adobe animate导出来的 js 文档。当时找控制停止和启动函数找很久，最后前辈一点拨就找到了，实现方法就是监听页面滑到底部调用启动函数。有条件的小伙伴可以导出个动画试试，没有条件的小伙伴可以直接到[动画运动]学着控制一个小方块运动，达到学习目的。 动画运动 动画是推车在3S之内移动到虚线框处。抽象一下就是让一个方块3S内平移600px(看实际距离)然后停下来，想通后就是实现它（CSS）： 这篇文章的主要目的是想告诉大家如何细化一个难题，化难为易。。

本文章由javascript技术分享原创和收集