首页写一个todolist的style样式

写一个todolist的style样式

时间: 2024-11-15 19:32:56 浏览: 19

编写一个简单的todolist样式，通常会在HTML中使用CSS来定义列表的外观。下面是一个基础的 todolist 示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* Todo List Style */ .todo-list { list-style-type: none; padding: 0; margin: 0; } .todo-item { margin-bottom: 5px; cursor: pointer; } .done { text-decoration: line-through; opacity: 0.5; } .todo-input { margin-bottom: 10px; } </style> </head> <body> <h2>我的待办事项</h2> <ul class="todo-list"> <li class="todo-item">完成编程作业<span class="done">(已完成)</span></li> <li class="todo-item">购买食材<span>(未开始)</span></li> </ul> <input type="text" id="newTodoInput" class="todo-input" placeholder="添加新的任务"> <script> // JavaScript 用于添加、删除和标记任务 (这里仅做示例，实际应用需要完整功能) </script> </body> </html> ``` 这个例子定义了一个无序列表（`<ul>`），每个任务项（`<li>`）都有特定的样式，如无缩进点、鼠标悬停效果等。还包含一个输入框（`<input>`）用于添加新任务。

阅读全文