网页版备忘录简易实现

🍏 预览效果

🍏 步骤分解及代码

1. 创建页面布局

 <!-- 最上面一行, 输入框 + 新建任务按钮 -->
      <div class="nav">
        <input type="text">
        <button>新建任务</button>
    </div>
 
    <!-- 下面包含了左右两个部分的内容区域 -->
    <div class="container">
        <!-- 左侧的部分 -->
        <div class="todo">
            <h3>未完成</h3>
            <!-- 这只是一个实例, 实际上内容都得是动态构造出来的 -->
            <!-- <div class="row">
                <input type="checkbox">
                <span>吃饭</span>
                <button>删除</button>
            </div> -->
        </div>
        <!-- 右侧的部分 -->
        <div class="done">
            <h3>已完成</h3