TodoList 页面布局 页面布局实现

TodoList 页面通常分为两个部分：输入框和待办事项列表。在实现页面布局时，我们可以使用 HTML 和 CSS 来实现这两部分的布局。

1. 输入框布局

输入框通常位于页面的顶部，并占据一定的宽度。我们可以使用 HTML 的 `input` 元素来实现这个输入框，并使用 CSS 来设置其样式，例如：

<div class="input-container">
  <input type="text" class="input-field" placeholder="请输入待办事项">
</div>

上面的代码中，我们使用一个 `div` 元素包裹输入框，并设置其样式，使其居中并占据一定的宽度。输入框本身使用了 `input` 元素，并设置了占位符文本。

为了使输入框在页面上居中，我们可以使用 CSS 的 flex 布局方式，例如：

.input-container {
  display: flex;
  justify-content: center;
}

.input-field {
  width: 50%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
}

上面的代码中，我们使用 `display: flex;` 将输入框容器设为 flex 布局，并使用 `justify-content: center;` 将其水平居中。输入框本身的样式设置包括宽度、内边距、字体大小、边框等。

2. 待办事项列表布局

待办事项列表通常位于输入框下方，占据较大的部分。我们可以使用 HTML 的 `ul` 元素和 `li` 元素来实现这个列表，并使用 CSS 来设置其样式，例如：

<ul class="todo-list">
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">待办事项 1</span>
    <button class="todo-delete">删除</button>
  </li>
  <li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">待办事项 2</span>
    <button class="todo-delete">删除</button>
  </li>
  <!-- 更多待办事项 -->
</ul>

上面的代码中，我们使用一个 `ul` 元素包裹待办事项列表，并使用 `li` 元素表示每一个待办事项。每个待办事项包括一个复选框、待办事项文本和一个删除按钮。

为了使待办事项列表在页面上居中，我们可以使用 CSS 的 flex 布局方式，例如：

.todo-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.todo-item {
  display: flex;
  align-items: center;
  width: 50%;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f2f2f2;
}

.todo-checkbox {
  margin-right: 10px;
}

.todo-text {
  flex: 1;
  margin-right: 10px;
}

.todo-delete {
  background-color: #ff0000;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

上面的代码中，我们使用 `display: flex;` 将待办事项列表设为 flex 布局，并使用 `flex-direction: column;` 将其列排列。每个待办事项使用 `display: flex;` 将其内部元素设为 flex 布局，并设置了一些样式，包括宽度、内边距、背景色等。

总之，TodoList 页面的布局可以使用 HTML 和 CSS 来实现。我们可以使用 flex 布局、margin 和 padding 等 CSS 属性来实现页面的居中和样式效果。