从上篇我们了解了一下如何使用控制台去调试我们的代码，以及认识到CSS的属性是可以被继承的。那么现在我们开始制作这个页面。首先，我们先分析一下这个页面。
1. 分析一下这个页面
如果未来，我们进入了前端这个行业，写代码之前一定需要分析一下我们接收到的需求，无论是简单的静态页面还是复杂的业务开发，我们都可以在接受需求后简单的分析一下，对于有疑问的地方也需要及时的沟通和确认。那么，接下来我们先分析这个页面的布局。
- 首先，我们页面的整体内容是水平居中的，垂直方向虽然看着不像是居中的，我们这里一样按居中去处理。
- 我们主要的区域分为四个部分。分别为标题、头部区域、内容区域、底部进度条区域。每个部分与下面的元素之间是有距离的。
- 标题区域只有一个文本。文字的颜色为白色。
- 头部区域分又为为输入区域以及按钮区域。输入区域中还有一段文字提示。按钮是靠右侧显示。按钮上除了文字还有一个加号小图标。
- 内容区域主要是一个列表，而列表的项又分为待办内容行、日期行。待办内容行又分为单选框加待办内容，日期行则又分为日期图标和日期文本。
- 底部进度条区域就一个区域。
以上大概是针对一个网页布局做的一个简单分析。
2. 根据分析编写页面结构
我们可以根据上面的顺序编写结构。首先是主区域，然后主区域里面放标题、头部、内容区域、底部进度条。头部放置输入区域和按钮区域。再后就是列表。最后是底部进度条。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo</title>
</head>
<style></style>
<body>
<div class="main-container">
<h3 class="title">今日任务</h3>
<div class="head">
<textarea></textarea>
<button>新建待办</button>
</div>
<div class="content">
<ul>
<li>
<p>
<span class="radio-wrapper">
<input class="radio" type="radio" />
</span>
学习使用CSS动画
</p>
<p>
<span></span>
2021年12月20日截止
</p>
</li>
</ul>
</div>
<div class="footer">
<span></span>
</div>
</div>
</body>
</html>
