尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通中todolist原生html+css

最新推荐文章于 2024-01-17 13:08:31 发布

布尔没有码

最新推荐文章于 2024-01-17 13:08:31 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js html css

本文链接：https://blog.youkuaiyun.com/qq_24130591/article/details/131853360

这段代码展示了使用HTML和CSS创建的一个任务管理应用的用户界面，包括输入框用于添加任务，列表展示任务，以及删除和标记任务完成的按钮。样式定义了如按钮和输入框的外观，以及任务项的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
/*base*/

body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
/*header*/

.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
/*main*/

.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
/*item*/

li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #ddd;
}

li:hover button {
  display: block;
}
/*footer*/

.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>



<body>
    

    <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <div class="todo-header">
          <input
            type="text"
            placeholder="请输入你的任务名称，按回车键确认"
          
          />
        </div>

        <ul class="todo-main">
          <li>
            <label>
              <input
                type="checkbox"
               
              />xxxxx
              <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
              <!-- <input type="checkbox" v-model="todo.done"/> -->
              <span></span>
            </label>
            <button class="btn btn-danger" >
              删除
            </button>
          </li>


          <li>
            <label>
              <input
                type="checkbox"
               
              />yyyyyy
              <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
              <!-- <input type="checkbox" v-model="todo.done"/> -->
              <span></span>
            </label>
            <button class="btn btn-danger" >
              删除
            </button>
          </li>
        </ul>

        <div class="todo-footer">
          <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            <input type="checkbox" v-model="isAll" />
          </label>
          <span>
            <span>已完成0</span> / 全部2
          </span>
          <button class="btn btn-danger">
            清除已完成任务
          </button>
        </div>
      </div>
    </div>

    <MyTop></MyTop>
    <MyList></MyList>
    <MyFooter></MyFooter>

  </div>


</body>
</html>