对于一个前端菜鸟的我，总是在想，怎么才能学习好前端，如何能够深入一个前端框架，经常在百度中徘徊，总是寻找大神的经验，每次看到一个大神的分享代码或者讲解后，感觉好像一下子会了，然而在自己总结的时候，又好像什么都不会似的。
这段时间打算开始学习ReactJS，看了阮一峰大神的一些博客，查询了源码的例子看，总是感觉还是在模糊状态，只知道有这些东西，但是还不能熟练的应用，而且发现很多入门的demo都是以todolist的例子来学习的，因此作者也决定从todolist的代码编写来开始一步步的进入前端技术领域，如果此刻你与我一样，是一个前端菜鸟，我们可以一起来学习，来分享。
上述只是一个引用，现在开始正文部分，做任何事情前，先要明确自己的需求目标，不能想一步做一步，作者先以HTML来实现TODOLIST的效果图，便于后续使用React实现功能，后续继续提供React对TODOLIST功能的实现。先上HTML布局的TODOLIST图：
从图中我们来分析下TODOLIST主要的布局思路：
-
整体考虑，TODOLIST是一个大容器，其中包括一个输入容器和一个显示容器
-
输入容器中添加了一个添加按钮和一个输入框实现，实现待办事项的输入
-
显示容器包括了待办事项列容器和底部编辑容器
-
待办事项列容器中包括了前面的一个按钮、中间显示字段和后面一个按钮
-
底部编辑容器包括一个全选按钮、遗留事项和清除按钮
有了这个思想后，我们就按照这个实现html的元素布局，目前触发事件均不在此次的HTML布局中实现，在后续改造为React框架实现的时候，同时完成对应的事件触发。
提供源码，直接拷贝，按照对应的路径文件加载即可运行。其中本人使用的jquery版本：jquery-1.12.3.js
HTML布局：
todoList
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;
}
全栈工程师成长记
目前阶段：
以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；
未来阶段：
整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。
如有兴趣一起学习，一起进步的朋友可以添加个人微信号，互相交流进步。
微信订阅号二维码
个人微信二维码
1781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
