使用HTML布局实现TODOLIST效果图

       对于一个前端菜鸟的我，总是在想，怎么才能学习好前端，如何能够深入一个前端框架，经常在百度中徘徊，总是寻找大神的经验，每次看到一个大神的分享代码或者讲解后，感觉好像一下子会了，然而在自己总结的时候，又好像什么都不会似的。

        这段时间打算开始学习ReactJS，看了阮一峰大神的一些博客，查询了源码的例子看，总是感觉还是在模糊状态，只知道有这些东西，但是还不能熟练的应用，而且发现很多入门的demo都是以todolist的例子来学习的，因此作者也决定从todolist的代码编写来开始一步步的进入前端技术领域，如果此刻你与我一样，是一个前端菜鸟，我们可以一起来学习，来分享。

       上述只是一个引用，现在开始正文部分，做任何事情前，先要明确自己的需求目标，不能想一步做一步，作者先以HTML来实现TODOLIST的效果图，便于后续使用React实现功能，后续继续提供React对TODOLIST功能的实现。先上HTML布局的TODOLIST图：

从图中我们来分析下TODOLIST主要的布局思路：

整体考虑，TODOLIST是一个大容器，其中包括一个输入容器和一个显示容器

输入容器中添加了一个添加按钮和一个输入框实现，实现待办事项的输入

显示容器包括了待办事项列容器和底部编辑容器

待办事项列容器中包括了前面的一个按钮、中间显示字段和后面一个按钮

底部编辑容器包括一个全选按钮、遗留事项和清除按钮

有了这个思想后，我们就按照这个实现html的元素布局，目前触发事件均不在此次的HTML布局中实现，在后续改造为React框架实现的时候，同时完成对应的事件触发。

提供源码，直接拷贝，按照对应的路径文件加载即可运行。其中本人使用的jquery版本：jquery-1.12.3.js

HTML布局：