css布局实现简洁待办事项待办工作ui布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现简洁待办事项待办工作ui布局效果代码
代码标签: css 简洁 待办 事项 待办 工作 ui 布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'> <link href="https://file.myfontastic.com/qUBUwJXJRtVZmUxLaXtXPY/icons.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> body, html { height: 100%; } body { font-family: 'Lato', helvetica, sans-serif; } main { height: 100%; } main section { display: inline-block; vertical-align: top; } main section.todo { width: 60%; box-sizing: border-box; padding-left: 5vw; padding-right: 1rem; position: relative; padding-bottom: 5rem; /* background-color: white; */ } main section.todo .todo__header { padding: 2rem 0; width: 100%; box-sizing: border-box; } main section.todo .todo__logo { font-family: 'Rock Salt', cursive; font-size: 1rem; } main section.todo .todo__logo span { color: #D01C1A; } main section.todo .todo__footer { padding: 1.5rem 0; position: absolute; bottom: 0; left: 5vw; } main section.todo .todo__menu { display: block; font-size: 1.5rem; cursor: pointer; } main section.todo .todo__grid .todo__row { width: 100%; margin-right: -1rem; margin-left: -1rem; } main section.todo .todo__grid .todo__row .todo__column { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 1rem; } main section.todo .todo__grid .todo__row .todo__column .todo__form { /* border-top: 4px solid @red; */ } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__category i { background-color: #D01C1A; color: #FCF9FA; padding: 0.4rem 0.4rem 0.2rem; line-height: 1.5; margin: 0; font-size: 1.2rem; vertical-align: middle; } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__input { margin: 0; background-color: transparent; border: 0; vertical-align: middle; padding-left: 0.5rem; width: 80%; } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__list ul { padding-left: 2rem; } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__list li { list-style-type: none; line-height: 1.5; } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__list li:not(:last-child) { margin-bottom: 1rem; } main section.todo .todo__grid .todo__row .todo__column .todo__form .todo__list li ul { margin-top: 0.8rem; } main section.timer { width: 40%; color: #FCF9FA; height: 100%; position: fixed; right: 0; top: 0; background-color: #D01C1A; text-align: center; } main section.timer .timer__button { border: 0; background-color: transparent; /* padding: .8rem 1.5rem; */ margin-left: 1rem; } main section.timer .timer__clock { font-size: 15vh; margin-top: 30vh; font-weight: 100; display: block; margin-bottom: 6vh; } main section.timer .timer__footer, main section.timer .timer__header { position: absolute; bottom: 0; left: 0; width: 100%; text-align: left; padding: 1.5rem; box-sizing: border-box; font-weight: 300; } main section.timer .timer__header { bottom: auto; top: 0; } main section.timer .timer__link i { font-size: 1.5rem; line-height: 1; } main section.timer .timer__link:first-of-type { float: left; } main section.timer .timer__link:last-of-type { float: right; } button, a, input, label[contenteditable="true"] { outline: none; } input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 1rem; font-size: 1rem; } input[type=checkbox] + label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 1rem; position: absolute; left: 0; top: 2px; background-color: transparent; border: 1px solid #D01C1A; } input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 0.9rem; color: #D01C1A; text-align: center; line-height: 15px; } input[type=checkbox]:checked + label { text-decoration: line-through; } </style> </head> <body > <main> <section class="todo"> <header class="todo__header"> <span class="todo__logo"> toma<span>T</span>o<span>D</span>o </span> </header> <div class="todo__grid"> <div class="todo__row"> <div class="todo__column"> <div class="todo__form"> <span class="todo__category"> <i class="icon-ibook-laptop"></i> <!--Work--> </span> <input type="text" class="todo__input" placeholder="Add new todo"/> <div class="todo__list"> <ul> <li> <input type="checkbox" id="a1"/> <label for="a1" contenteditable="true">Create mockups for student task</label> </li> <li> <input type="checkbox" id="a2"/> <label for="a2" contenteditable="true"> Prepare first month task for webdev students </label> <ul> <li> <input type="checkbox" id="b1"/> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0