这是一个关于期末大作业的博客，作者设计了一个ToDoList网页，实现了事项打卡和四象限事项记录功能。用户可以填写并标记任务完成状态，根据重要性和紧急性分类。博客中分享了页面核心的HTML和CSS代码，以及页面效果截图。作者表达了虽然过程艰难，但比起Python爬虫，这更有意思。
目录
一、简要说明
本模块旨在为用户提供事项打卡和四象限事项记录的功能，用户可以在填写的事项完成之后在复选框内打钩表示事情的完成，也可以将事情按照“重要”和“着急”两个角度分别填入相应的位置，并填写截止日期，来提醒自己每日任务所在。
二、页面核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>备忘录</title>
<!-- 引用备忘录个栏目样式 -->
<link href="css/beiwanglu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 导航栏，与登录页导航栏相比加入“退出登录”，可以返回登录页面 -->
<div>
<ul class="to3">
<li>TODOLIST | 我欲摘星斗</li>
</ul>
<ul class="to1">
<li class="to2"><a href="首页.html">首页</a></li>
<li class="to2"><a href="番茄钟.html">番茄钟</a></li>
<li class="to2"><a href="备忘录.html">备忘录</a></li>
<li class="to2"><a href="倒计时.html">纪念日</a></li>
<li class="to2"><a href="日记本.html">日记本</a></li>
<li class="to2"><a href="关于我.html">关于我</a></li>
<li class="to2"><a href="index.html">退出登录</a></li>
</ul>
</div>
<!-- banner开头通栏 -->
<div>
<div class="banner">
<!--左侧通栏-->
<div class="left">
<div class="content_left">
<p class="school_en">ToDoList</p>
<p class="school_ch">我欲摘星斗</p>
<p class="advertise">来日纵是千千晚星，亮过今晚月亮<br>认真生活的人拥有月亮做的渔网，即使身处坎坷黑暗，依然能捕捉到闪亮的星光</p>
<ul class="style_a">
<<li class="current"><a href="img/banner图.jpg"></a></li>
<li class="current"><a href="img/banner图1.jpg"></a></li>
<li class="current"><a href="img/banner图3.jpg"></a></li>
<li class="current"><a href="img/banner图4.jpg"></a></li>
<li class="current"><a href="img/banner图5.jpg"></a></li>
<li class="current"><a href="img/banner图6.jpg"></a></li>
</ul>
</div>
</div>
<!--右侧通栏-->
<div class="right">
<div class="content_right">
<h4>备忘录<br>INTRODUCTION</h4>
<ul class="style_icon">
<li><img src="img/g6.jpg"></li>
</ul>
<br />
<p class="cl">
备忘录指任何一种能够帮助记忆，简单说明主题与相关事件的文字等其他资料。
</p>
<br />
<p class="cl2">
在今天这个充斥着各种激烈竞争的重压时代，每个人都在忙碌的生活着。人的记忆是有限的，我们需要一个能提醒和安排我们工作的东西，如何井井有条的处理和安排任务，在有限的时间内完成最紧急最重要的事情，备忘录对我们而言尤为重要。
</p>
</div>
</div>
</div>
</div>
<!-- 登录头像 -->
<div class="main_login">
<div class="login_page">
<div class="login_img">
<img src="img/6.png" alt="image">
</div>
</div>
</div>
<br />
<!-- 左侧图案装饰 -->
<div style="width: 200px;height: 600px;margin: 50px 200px;float: left;align-content: center;">
<ul>
<li style="margin: 40px;"><img src="img/3.png" /></li>
<li style="margin: 40px;"><img src="img/1.png" /></li>
<li style="margin: 40px;"><img src="img/2.png" /></li>
</ul>
</div>
<!-- 利用form表单制作打卡形式的备忘录 -->
<div style="width: 1600px;height: 585px;text-align: center;align-items: center;margin: 50px auto 50px 600px ;">
<form>
<table>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox" checked></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="完成ToDoList网页设计" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 50px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
<td style="width: 400px;height: 50px;"></td>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td>
<td style="width: 300px;height: 50px;margin: 10px 200px 10px 0px;">
<input type="text" value="" placeholder="请输入学习任务" maxlength="30" tabindex="1" class="mission">
</td>
</tr>
<tr>
<td style="width: 50px;height: 50px;">
<label><input type="checkbox" name="hobby" value="复选框" class="checkbox"></label>
</td&
最低0.47元/天 解锁文章
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
