js实现一个备忘录待办事项效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个备忘录待办事项效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; outline: none; } :root { --bc-main: #e3e3e3; --bc-wht: #fff; --bc-blk: #000; --primary-dark: #1a171d; --font: "Poppins", sans-serif; --font-ct: #b8b8b8; --ease: all 0.4s ease-in-out; } body { background-color: var(--bc-main); display: flex; align-items: center; justify-content: center; height: 100vh; } .dashboard { background-color: #0e0b11; height: 500px; width: 1000px; font-family: var(--font); display: flex; flex-direction: row; border-radius: 8px; overflow: hidden; } .dashboard-left { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 35%; min-width: 344px; padding: 25px; background-color: var(--primary-dark); } .dashboard-right { position: relative; height: 100%; flex: 1; } .left-header h3 { color: #f8f8f8; font-size: 1.3em; } .left-task { display: flex; flex-direction: column; } .task-input { padding: 12px 15px; background-color: #f7f7f726; font-family: inherit; border: none; border-radius: 2px; color: var(--font-ct); margin-bottom: 0.5em; transition: var(--ease); } .task-input:focus { transition: var(--ease); background-color: var(--bc-wht); color: var(--primary-dark); } .task-label { color: #d2cfcf; font-family: inherit; font-size: 0.8em; margin-bottom: 0.3em; } .task-item { margin: 1em 0; display: flex; flex-direction: column; } .task-add { padding: 10px; outline: none; background: #ffe6a7; font-family: inherit; border: none; font-size: 0.9em; border-radius: 2px; cursor: pointer; } .task-add:hover { background-color: #ffdf8f; } .right-list { padding: 20px; height: 100%; overflow: scroll; } .right-list::-webkit-scrollbar { display: none; } .right-list h3 { color: #b8b8b8; margin-bottom: 1em; font-size: 1em; } .list-flex { display: flex; flex-direction: column; } .list-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 10px; background-color: var(--primary-dark); margin-bottom: 0.5rem; border-radius: 6px; font-size: 0.85em; color: var(--bc-wht); transition: var(--ease); } .list-item:hover { background-color: #f7f7f71a; transition: var(--ease); } .list-item-type { padding: 3px 11px; border-radius: 100px; background-color: #ffda6d; color: var(--primary-dark); font-size: 0.84em; } .list-item-value { width: 200px; } .list-item-remove { display: flex; } .list-item-remove img { height: 20px; width: 30px; } .list-item-remove:hover { color: #ff4646; cursor: pointer; } .verify { position: absolute; width: 360px; right: 15px; bottom: 15px; background-color: var(--bc-main); border-radius: 4px; display: none; padding: 15px 10px; align-items: center; font-size: 0.84em; color: var(--primary-dark); } .verify-btns { margin-left: auto; } .verify-btn { margin: 0 0.25em; padding: 4px 10px; color: var(--primary-dark); background-color: #cacaca; cursor: pointer; border-radius: 4px; } .verify-btn:hover { background-color: #d7d7d7; } </style> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> </head> <body> <div class="dashboard"> <div class="dashboard-left"> <div class="left-header"> <h3>Create a task!</h3> </div> <div class="left-task"> <div class="task-info task-item"> <label for="" class="task-label">Task</label> <input type="text" class="task-info-input task-input" placeholder='Go to the gym...'> <label for="" class="task-label">Tag</label> <input type="text" class="task-input task-type-input" placeholder="Health, Education.."> </div> <button class="task-add">Add Task</button> </div> </div> <div class="dashboard-right"> <div class="right-list"> <h3 class=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0