设计一个TODO List，页面结构如下图所示，要求：

最新推荐文章于 2024-03-29 10:27:25 发布

小振LZ

最新推荐文章于 2024-03-29 10:27:25 发布

阅读量723

点赞数

本文链接：https://blog.csdn.net/weixin_43697050/article/details/105438080

版权

设计一个TODO List，页面结构如下图所示，要求：

使用HTML与CSS完成界面开发

实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框

实现删除功能：点击列表项后面的“X”号，可以删除该项

实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空

注：以上代码实现需要能在浏览器中正常显示与执行。在这里插入图片描述



<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		#main{
   
			width :200px;
			margin: 0 auto
		}
		#demo{
   
			text-align: center;
			font-size: 30px;
		}
		#text{
   
			width: 100%
		}
		#list{
   
			width: 200px;
		}
		.listOne{
   
			position: relative;
		}
		.listOne>p{
   
			word-break: break-all;
			font-size: