前端实例练习-任务列表Todolist

时间：2023-03-31 00:21:31 CSS

提示框代码存入Github效果预览初衷：很多人刚接触前端的时候会问，《前端如何入门》？”我对目前网上的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。效果预览GIF图片太大，请点击链接HTML部分

任务列表

添加

7:30起床

洗漱

上班

完成报告

和小明一起吃午饭

去超市

CSS部分/*把padding和border计入width*/*{box-sizing:border-box;}/*消除Listpadding中的margin和border*/ul{margin:0;padding:0;}/*设置li样式*/ulli{cursor:pointer;位置：相对；填充：12px8px12px40px；背景：#eee；字体大小：18px；过渡：0.2s；用户选择：无；/*用户不能选择文字*/}/*奇数li颜色不同，为了美观*/ulli:nth-child(odd){background:#f9f9f9;}/*hover时背景颜色变化*/ulli：悬停{background:#ddd;}/*选中时，在文本中添加一条水平线*/ulli.checked{background:#888;颜色：#fff；text-decoration:line-through;}/*是选中的li添加“复选标记”图标*/ulli.checked::before{content:'';位置：绝对；边框颜色：#fff；边框样式：实心；边框宽度：02px2px0；顶部：10px；左：16px；变换：旋转（45度）；高度：15px；width:7px;}/*关闭按钮样式*/.close{position:absolute;右：0；顶部：0；填充：12px16px12px16px}.close:hover{背景颜色：#f44336;color:white;}/*标题样式*/.header{background-color:#f44336;填充：30px40px；白颜色;text-align:center;}/*清除浮动*/.header:after{content:"";显示：表格；clear:both;}/*输入框样式*/input{border:none;宽度：75%；填充：10px；向左飘浮;字体大小：16px；outline:0;}/*“添加”按钮样式*/.addBtn{padding:9px10px8px;宽度：25%；背景：#d9d9d9；颜色：#555；Float：左；文本对齐：居中；字体大小：16px；字体粗细：600；游标：指针；transition:0.3s;}.addBtn:hover{background-color:#bbb;}JavaScriptpart(function(){vari;/*index*//*在每个li之后添加一个关闭按钮*/functioncloseBtn(){varmyNodelist=document.getElementsByTagName("li");for(i=0;i

上一篇：一些CSS小技巧

下一篇：在一行代码中使用CSS

前端实例练习-任务列表Todolist相关文章