使用HTML布局实现TODOLIST效果图

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

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

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

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

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

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

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

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

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

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

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

HTML布局：

 

 

 

 

 

todoList

 

 

 

 

 

 

todos

 

 

 

 

 

 

 

 

+

 

 

 

 

 

 

 

 

 

√

今天下午和客户沟通需求

×

 

 

 

 

○

明天制定方案

×

 

 

 

 

○

明天下午需要购物

×

 

 

 

 

 

 

Toggle all

2 item left

Clean completed

 

 

 

 

 

 

 

 

 

 

 

 

CSS样式：

.title {

margin: 0 auto;

text-align: center;

font-size: 250%;

}

.container {

margin: 0 auto;

display: flex;

flex-direction: column;

}

.line {

background-color: #e7e7e7;

height: 1px;

}

/*内容输入区域*/

.header {

height: 50px;

border: 1px solid #e7e7e7;

border-radius: 5px;

margin: 10px;

display: flex;

align-items: center;

}

.plus {

margin: 0 10px;

text-align: center;

font-size: 50px;

}

.new-todo {

flex: 1;

height: 40px;

margin-right: 10px;

border: 0;

font-size: 30px;

}

/*内容显示区域*/

.content {

display: flex;

flex-direction: column;

}

.todo {

border: 1px solid #e7e7e7;

border-radius: 5px;

margin: 0 10px;

display: flex;

flex-direction: column;

}

.item {

height: 40px;

    border-bottom: 1px solid #e7e7e7;

    display: flex;

    align-items: center;

}

.item:last-child {

    border-bottom: 0px solid #e7e7e7;

}

.name {

font-size: 30px;

flex: 1;

}

.namecompleted {

    text-decoration: line-through;

}

.namebtn {

margin: 0 10px;

text-decoration: none;

}

.footer {

margin: 10px 10px;

display: flex;

justify-content: space-between;

}

.footerbtn {

border: 1px solid #EED4D4;

border-radius: 5px;

}

---

        全栈工程师成长记

目前阶段：

        以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

        整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以添加个人微信号，互相交流进步。

微信订阅号二维码

个人微信二维码