div+css实现任务管理app ui设计代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现任务管理app ui设计代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); :root { --accent-color: #1fa8f5; --accent-color-fg: #fefefe; } body { background-color: #89d4fe; font-size: 10px; font-family: "Roboto", sans-serif; } .container { display: flex; padding: 3vh 5vw; justify-content: center; flex-wrap: wrap; z-index: 10; } [class*=screen] { border: none; background-color: #fff; border-radius: 20px; height: 620px; width: 300px; min-width: 300px; margin-right: 3vw; margin-top: 3vh; padding: 1.6rem 1rem; box-sizing: border-box; position: relative; overflow: hidden; z-index: 10; } .raised { box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.15); } .clay { --height: 8px; --height-reverse: -8px; --spread: 12px; --shadow-spread: 16px; border-radius: 2rem; box-shadow: var(--height) var(--height) var(--shadow-spread) 0 rgba(31, 168, 245, 0.8), inset var(--height-reverse) var(--height) var(--spread) 0 #279ee0, inset var(--height) var(--height) var(--spread) 0 rgba(255, 255, 255, 0.4); /* Light inset shadow */ } @media screen and (min-width: 1200px) { .screen-2 { position: relative; top: 4rem; } .screen-3 { position: relative; top: 8rem; } } /* screen -1 */ .cs-name { display: flex; justify-content: space-between; } .cs-name span { font-weight: bold; font-size: 0.8rem; font-weight: bold; } .cs-name .bell { position: relative; top: -5px; font-size: 1.3rem; color: #d3d3d3; } .cs-search { display: flex; margin-top: 1.6rem; position: relative; color: #e5e5e5; } .cs-search input { width: 100%; padding: 0.5rem 0.5rem 0.5rem 2rem; font-size: 0.6rem; line-height: 2; border: none; border-radius: 0.6rem; background-color: #f3f3f3; } .cs-search input::placeholder { color: #d5d5d5; } .cs-search input:focus { outline: 1px solid #ccc; } .cs-search .search-icon { position: absolute; font-size: 1.2rem; top: 8px; left: 0.8rem; } .cs-calendar { --height: 4px; --height-reverse: -4px; --spread: 8px; --shadow-spread: 12px; display: flex; flex-direction: column; margin-top: 1.5rem; border-radius: 1rem; color: var(--accent-color-fg); background-color: var(--accent-color); padding: 1rem 1.5rem; margin-bottom: 1.5rem; } .cs-calendar .month-year-controls { display: flex; align-items: center; } .cs-calendar .arrows { margin-right: 8px; display: flex; } .cs-calendar [class*=chevron] { display: flex; justify-content: center; align-items: center; padding: 1px; width: 0.8rem; height: 0.8rem; font-size: 0.9rem; border-radius: 3px; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; } .cs-calendar [class*=chevron]:first-child { margin-right: 4px; } .cs-calendar [class*=chevron]:hover { background-color: rgba(255, 255, 255, 0.8); } .cs-calendar .month-year { font-size: 0.8rem; letter-spacing: 0.5px; cursor: pointer; } .cs-calendar .month-table { display: grid; font-size: 0.6rem; letter-spacing: 1px; grid-template-columns: repeat(7, 1fr); gap: 6px; grid-auto-rows: minmax(1.5rem, auto); margin-top: 1.5rem; } .cs-calendar .month-table span { display: flex; justify-content: center; align-item: center; line-height: 1.4rem; letter-spacing: 1px; border-radius: 5px; cursor: pointer; } .cs-calendar .month-table span.off { opacity: 0.5; } .cs-calendar .month-table span.today, .cs-calendar .month-table span:hover { --height: 3px; --height-reverse: -3px; --spread: 4px; --shadow-spread: 8px; background-color: var(--accent-color-fg); color: var(--accent-color); } .cs-footer { z-index: 200; position: absolute; bottom: 0; left: 0; padding: 0.9rem 0.6rem; width: 279px; border-radius: 1rem; box-shadow: 0 -2px 4px 2px rgba(0, 0, 0, 0.1); color: var(--accent-color); display: flex; justify-content: space-between; font-size: 5rem; background-color: #fff; } .cs-footer .btn-cart { color: #dfdfdf; margin-right: 40px; } .cs-footer .btn-cart:hover { color: var(--accent-color); } .cs-footer .btn-home { margin-right: 40px; margin-left: 40px; border-radius: 5px; color: var(--accent-color); } .cs-footer .btn-add { --height: 4px; --height-reverse: -4px; --spread: 8px; --shadow-spread: 12px; position: absolute; top: -25px; left: 50%; transform: translateX(-25px); background-color: var(--accent-color); color: var(--accent-color-fg); padding: 0.7rem; cursor: pointer; } .cs-footer .btn-add:hover { --spread: 16px; --shadow-spread: 24px; } .cs-activities .see-all { color: var(--accent-color); } .cs-activities .cs-name { margin-top: 0.6rem; } .cs-activities.chores .activities-list .home { color: #e5b314; background-color: #fff5d6; } menu, li { list-style: none; } .activities-list { display: flex; flex-direction: column; margin-top: 0.6rem; margin-bottom: 0.5rem; } .activities-list .item-category { display: flex; justify-content: flex-start; align-items: center; padding: 0.3rem 0.7rem; font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.2rem; color: #a4a4a4; } .activities-list .item-category [class*=material-icons] { border-radius: 1rem; margin-right: 8px; font-size: 1rem; } .activities-list .item-category .text { font-weight: bold; } .activities-list .work { background-color: #e6e1fd; color: #846ff0; border-radius: 5px; } .activities-list .work .material-icons { text-shadow: 4px 4px 12px #674dee; } .activities-list .not-active { --color: #ff7e7e; } .activities-list .not-active:before { content: " "; display: inline-block; height: 1rem; width: 1px; border-left: 2px solid var(--color); position: relative; left: -0.8rem; } .activities-list .not-active [class*=material-icons] { color: var(--color); position: relative; margin-left: -2px; } .activities-list .education { --color: #fce59c; } .screen-2 { background-color: #4dadf7; display: flex; flex-direction: column; padding: 0; position: relative; } .screen-2 .top { position: absolute; top: -10px; display: flex; width: 100%; height: 55%; background: url(//repo.bfw.wiki/bfwrepo/image/64e1dc143a562.png); background-size: cover; transform: scaleX(-1); } .screen-2 .top .bubbles { z-index: 20; } .screen-2 .top .bubbles .bubble:nth-child(1) { width: 40px; height: 40px; left: 60%; top: 10%; } .screen-2 .top .bubbles .bubble:nth-child(2) { width: 90px; height: 90px; left: -8%; top: 40%; } .screen-2 .top .bubbles .bubble:nth-child(3) { width: 30px; height: 30px; left: 80%; top: 70%; } .screen-2 .bottom { position: absolute; bottom: 0; background-color: #fff; height: 53%; border-top-left-radius: 30px; border-top-right-radius: 30px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .screen-2 .bottom .nav { display: flex; margin: 3rem 0; justify-content: center; } .screen-2 .bottom .nav .dot { height: 0.4rem; width: 0.4rem; border-radius: 50%; background-color: #dfdfdf; margin-right: 3px; } .screen-2 .bottom .nav .dot.active { background-color: #4dadf7; } .screen-2 .bottom h1 { font-size: 1.4rem; letter-spacing: 1px; font-weight: bold; padding: 0 2rem; text-align: center; margin-bottom: 2rem; } .screen-2 .bottom p { color: #3f3f3f; padding: 0 3rem; text-align: center; margin-bottom: 2rem; } .screen-2 .bottom button { --height: 4px; --height-reverse: -4px; --spread: 8px; --shadow-spread: 12px; border: none; background-color: #1fa8f5; padding: 0.9rem 2.8rem; color: #fff; font-size: 0.8rem; cursor: pointer; } .screen-2 .bottom button:hover { --spread: 16px; --shadow-spread: 24px; } button { cursor: pointer; } .screen-3 { position: relative; background-color: #f6f6f6; } .screen-3 .cs-name { display: flex; justify-content: flex-start; align-items: center; position: relative; } .screen-3 .cs-name.date { line-height: 1; } .screen-3 .cs-name.date .num { font-weight: bold; font-size: 1.8rem; font-weight: bold; } .screen-3 .cs-name.date .day-details { display: flex; flex-direction: column; justify-content: space-between; height: 1.5rem; color: #b3b3b3; font-weight: normal; font-size: 0.7rem; margin-left: 5px; } .screen-3 .cs-name .bell { align-self: flex-end; position: absolute; top: 0; right: 0; font-size: 1.6rem; color: #d3d3d3; } .screen-3 .btn-cart { color: var(--accent-color); } .screen-3 .btn-home { color: #dfdfdf; } .screen-3 .btn-home:hover { color: var(--accent-color); } .screen-3 .your-plans { margin-top: 1rem; } .screen-3 .your-plans .title { font-weight: bold; font-size: 1rem; } .screen-3 .your-plans button { font-size: 0.7rem; padding: 0.25rem 0.6rem; border: none; color: var(--accent-color-fg); background-color: var(--accent-color); } .screen-3 .your-plans button .expand { font-size: 1rem; } .screen-3 .your-plans button:hover { --spread: 16px; --shadow-spread: 24px; } .screen-3 .timeline { position: relative; margin-top: 1.5rem; overflow: hidden; } .screen-3 .timeline table { height: 35%; width: 100%; } .screen-3 .timeline td { padding: 4px; width: calc(100% / 7); height: 1.2rem; border-left: 1px solid #ededed; } .screen-3 .timeline td:last-child { border-right: 1px solid #ededed; } .screen-3 .timeline .days td { padding: 10px 4px; border: none; text-align: center; color: #cfcfcf; } .screen-3 .timeline .bar { position: absolute; background-color: var(--accent-color); width: 30%; height: 1.8rem; border-radius: 4px; display: inline-flex; z-index: 20; top: 10px; left: -10px; box-sizing: border-box; padding: 0.2rem 0.8rem; color: #fff; text-align: center; } .screen-3 .timeline .bar:nth-child(2) { background-color: #8d7de0; width: 34%; top: 60px; left: 30px; } .screen-3 .timeline .bar:nth-child(3) { background-color: #eeebfe; width: 30%; top: 60px; left: 90px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .screen-3 .timeline .bar:nth-child(4) { background-color: #ff7984; width: 30%; top: 110px; left: 80%; } .screen-3 .timeline .bar:nth-child(5) { background-color: #31d0bd; width: 40%; top: 110px; left: 10px; } .screen-3 .timeline .bar:nth-child(6) { background-color: #cbf2eb; width: 20%; top: 110px; left: 90px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .screen-3 .timeline .bar:nth-child(7) { background-color: #f9cb3b; width: 18%; top: 10px; left: 190px; } .screen-3 .timeline .cut-off { position: absolute; z-index: 40; top: 0; left: 90px; background-color: var(--accent-color); height: 81%; width: 2px; } .screen-3 .timeline .cut-off .dot { position: absolute; width: 10px; height: 10px; border-radius: 5px; top: 0; left: -4px; background-color: var(--accent-color); } .screen-3 .status { padding: 1rem; border-radius: 15px; border: 1px solid; background-color: var(--accent-color); color: var(--accent-color-fg); position: relative; overflow: hidden; background-clip: padding-box; } .screen-3 .status .title { font-size: 0.7rem; margin-top: 5px; margin-bottom: 8px; } .screen-3 .status .description { opacity: 0.8; } .screen-3 .status .arrow { position: absolute; top: -1.2rem; right: -2.7rem; border-radius: 100%; background-color: #f9cb39; height: 5.5rem; width: 5.5rem; padding-top: 1rem; padding-left: 0.8rem; box-sizing: border-box; } .screen-3 .today-plans-title { justify-content: space-between; margin-top: 1.5rem; } .screen-3 .today-plans-title .see-all { color: var(--accent-color); } .screen-3 .today-plans { flex-direction: column; margin-top: 1rem; background: #fff; border-radius: 0.6rem; padding: 0.7rem 0.7rem; } .screen-3 .today-plans .item { width: 100%; position: relative; padding-bottom: 0.8rem; margin-bottom: 0.6rem; border-bottom: 1px solid #efefef; } .screen-3 .today-plans .item-icon { margin-right: 7px; font-size: 1rem; padding: 5px; background-color: #d8d0fe; border-radius: 5px; color: #927ff6; text-shadow: 2px 2px 8px rgba(103, 77, 238, 0.8); } .screen-3 .today-plans .item .description { font-size: 0.7rem; width: 80%; line-height: 1.1; } .screen-3 .today-plans .item input { position: relative; top: -2px; } .screen-3 .today-plans .info { padding: 0; width: 100%; color: #bbb; } .screen-3 .today-plans .info .material-icons { font-size: 1rem; line-height: 1.2; margin-right: 5px; } .screen-3 .today-plans .info .text { font-size: 0.7rem; line-height: 1.5; letter-spacing: 0.4px; } .screen-3 .today-plans .info .date, .screen-3 .today-plans .info .time { display: inline-flex; justify-content: center; } .screen-3 .today-plans .attendees { position: relative; width: 55px; height: 1.2rem; } .screen-3 .today-plans .attendees .attendee-item { position: absolute; justify-content: center; width: 1.1rem; height: 1.1rem; background-color: #f68f8f; color: #d33535; border-radius: 3px; z-index: 30; } .screen-3 .today-plans .attendees .attendee-item:nth-child(2) { left: 0.6rem; z-index: 20; color: #c39912; background-color: #f9cb39; } .screen-3 .today-plans .attendees .attendee-item:nth-child(3) { left: 1.2rem; z-index: 10; color: #27b245; background-color: #65d27d; } .screen-3 .today-plans .attendees .plus { position: absolute; right: 0; font-size: 0.8rem; line-height: 1.3; color: #f9cb39; align-self: flex-end; } .flatter { --height: 4px; --height-reverse: -4px; --spread: 8px; --shadow-spread: 12px; } .extra-flat { --height: 2px; --height-reverse: -2px; --spread: 4px; --shadow-spread: 8px; } .flex-center { display: flex; justify-content: space-between; align-items: center; } .bubbles { position: absolute; width: 100%; height: 100%; z-index: 0; overflow: hidden; top: 0; left: 0; } .bubbles .bubble { z-index: -1; } .bubble { position: absolute; top: 10%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white; -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px white; height: 200px; position: absolute; width: 200px; } .bubble:nth-child(1) { width: 40px; height: 40px; left: 10%; top: 20%; } .bubble:nth-child(2) { width: 120px; height: 120px; left: 10%; top: 30%; } .bubble:nth-child(3) { width: 90.........完整代码请登录后点击上方下载按钮下载查看
网友评论0