使用HTML布局实现TODOLIST效果图

朴灿烈づ我的快乐病毒、 2023-06-27 12:38 41阅读 0赞

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

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

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

![format_png][]

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

1.  整体考虑，TODOLIST是一个大容器，其中包括一个输入容器和一个显示容器
2.  输入容器中添加了一个添加按钮和一个输入框实现，实现待办事项的输入
3.  显示容器包括了待办事项列容器和底部编辑容器
4.  待办事项列容器中包括了前面的一个按钮、中间显示字段和后面一个按钮
5.  底部编辑容器包括一个全选按钮、遗留事项和清除按钮

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

![format_png 1][]

提供源码，直接拷贝，按照对应的路径文件加载即可运行。其中本人使用的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;

--------------------

全栈工程师成长记

目前阶段：

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

未来阶段：

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

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

微信订阅号二维码

![format_png 2][]

个人微信二维码

![format_png 3][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqYUpLU3lSQkE5VEI4TGtVaWExVkFIYlMyZWFtQ0swMU1FVEdlanBlTVdEYzluQ2c0UDluTDZyanFua2pjN3lIeU5vWVljaWJXVUJ1cmcvMA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfcG5nL294QUhld2FMMnJqYUpLU3lSQkE5VEI4TGtVaWExVkFIYm1pYXVpYTRZN08wZVRDbUh5ZFRJcTJ4blJuVU0xTmlid0F4Mk5vcnZ0VGJCWlBZejRrdVBJOVhpYmcvMA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfanBnL294QUhld2FMMnJqSVpaQ0hqM0JxbVFkcWliVVE1OFNxM2pHbkg0ZFJmT3ZITDdsVEdoc2dTY0prWTZYQzk1YUR2aWJ6MUZlaWNya3AzNnRpYzVUUHgyWjRaUS82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfanBnL294QUhld2FMMnJqYUpLU3lSQkE5VEI4TGtVaWExVkFIYmh5NjdJOXVnbUtldXlJSW9FaWNlaWNyY1dRR3ZaNHZqelVUMklkTVppY1dmenMwNzdDNmtzeHFNQS82NDA?x-oss-process=image/format,png