待办事项列表代码
代码语言:html
所属分类:其他
代码描述:待办事项列表代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; } body { min-height: 450px; height: 100vh; margin: 0; background: radial-gradient(ellipse farthest-corner at center top, #232526 0%, #414345 100%); color: #fff; font-family: "Nunito", sans-serif; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } .todoList { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 500px; background: #171717; border-radius: 10px; box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3); } .cover-img .cover-inner { background: url(//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png); height: 190px; background-size: cover; background-position: 10%; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative; } .cover-img .cover-inner::after { background: rgba(0, 0, 0, 0.3); content: ""; top: 0; left: 0; position: absolute; width: 100%; height: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; } .cover-img h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Nunito", sans-serif; text-transform: uppercase; font-size: 2rem; z-index: 10; color: rgba(255, 255, 255, 0.5); font-weight: 700; } .content { padding: 10px 20px; } .content form { display: flex; justify-content: space-between; margin-bottom: 15px; padding: 0 10px 0 5px; border-bottom: 1px solid #cccccc; } .content form > * { background: transparent; border: none; height: 35px; } .content input[type="text"] { padding: 0 5px; font-weight: 700; font-size: 1.2rem; color: #c7c7c7; outline: none; } .content input-buttons a { text-decoration: none; } .content input-buttons i { margin-top: 5px; font-size: 20px; color: #6c717b; } .content ul .todos { margin-left: 0; padding: 0; letter-spacing: none; height: 220px; overflow: auto; } .align { padding: 0; } .content li { user-select: none; margin-bottom: 10px; display: flex; justify-content: space-between; } .content li i { color: #6c717b; font-size: 15px; cursor: pointer; padding: 5px 10px; } .content input[type="checkbox"] { display: none; } .content input[type="checkbox"] + label { color: #7e7e7e; font-size: 15px; cursor: pointer; position: relative; border-radius: 3px; display: inline-block; padding: 5px 5px 5px 40px; } .content input[type="checkbox"] + label:hover { color: #bebebe; background-color: #3e3e3e; } .content input[type="checkbox"] + label span.check { left: 4px; top: 50%; position: absolute; transform: translatey(-50%); width: 18px; height: 18px; display: block; background: #171717; border-radius: 3px; border: 1px solid #000000; box-shadow: -2px -2px 2px rgba(67, 67, 67, 0.5), inset 2px 2px 4px rgba(0, 0, 0, 0.5), inset -2px -2px 2px rgba(67, 67, 67, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.3); } .content input[type="checkbox"]:checked + label { color: #aeb7c6; text-decoration: line-through; } .content input[type="checkbox"]:checked + label span.check { background-color: transparent; border-color: transparent; box-shadow: none; } .content input[type="checkbox"] + label span.check::after { width: 100%; height: 100%; content: ""; display: block; position: absolute; background-image: url("//repo.bfw.wiki/bfwrepo/image/5f6c563ecf13b.png"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; transform: scale(0); transition: transform 300ms cubic-bezier(0.3, 0, 0, 1.5); } .content input[type="checkbox"]:checked + label span.check::after { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0