css布局实现教育后台管理仪表盘页面UI效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现教育后台管理仪表盘页面UI效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,200;0,300;0,400;0,800;0,900;1,200;1,300;1,800;1,900&display=swap"); /*=============== COLORS========== */ /*=============== SOURCE AND TYPOGRAPHY ========== */ /*=============== Z INDEX ========== */ /* ================== Mixin ======================= */ /* ==================Css Reset======================= */ * { box-sizing: border-box; margin: 0; background-color: transparent; } body { font-family: "Muli", sans-serif; } a { text-decoration: none; } h2, h4, h5 { font-style: 16px; margin: 1rem; } h3, p { font-size: 16px; margin: 0.6rem; } span { font-size: 12px; } .f3 { font-size: 30px; margin-top: 10px; } .text-center { text-align: center; } ul { margin: 0; padding: 0; list-style: none; } .orange { color: #ff8f00; } .wrapper { width: 100%; height: 100vh; display: grid; overflow: hidden; grid-template-areas: "sidebar profile profile profile" "sidebar details details details" "sidebar information information information"; grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr repeat(3, 5fr); transition: padding 0.3s ease-in-out; } /*=============== L NAV ========== */ .l-navbar { position: fixed; display: grid; grid-area: sidebar; top: 0; left: 0; width: 92px; height: 100vh; background-color: #12192c; color: #fff; padding: 1.5rem 1.5rem 2rem; z-index: 100; transition: 0.5s; /*=============== NAV ========== */ } .l-navbar .nav { height: 100%; display: flex; justify-content: space-between; overflow: hidden; flex-direction: column; } .l-navbar .nav .nav__brand { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; align-items: center; margin-bottom: 2rem; /* =============== grid-list-button ==========*/ } .l-navbar .nav .nav__brand .grid-list-button { background-color: transparent; padding: 10px; outline: none; cursor: pointer; border: 0; transition: 0.3s ease-in-out; } .l-navbar .nav .nav__brand .grid-list-button:active { transform: scale(0.9); } .l-navbar .nav .nav__brand .grid-list-button .icon { position: relative; display: block; width: 24px; height: 24px; } .l-navbar .nav .nav__brand .grid-list-button .dots i { position: absolute; width: 11px; height: 11px; border-radius: 1px; background-color: #ffffff; animation-duration: 0.4s; animation-fill-mode: forwards; animation-duration: normal; } .l-navbar .nav .nav__brand .grid-list-button .dots i:nth-child(1) { left: 0; top: 0; border-top-left-radius: 2px; } .l-navbar .nav .nav__brand .grid-list-button .dots i:nth-child(2) { left: 14px; top: 0; border-top-right-radius: 2px; } .l-navbar .nav .nav__brand .grid-list-button .dots i:nth-child(3) { left: 0; top: 14px; border-bottom-left-radius: 2px; } .l-navbar .nav .nav__brand .grid-list-button .dots i:nth-child(4) { left: 14px; top: 14px; background-color: #ffc502; border: none; } .l-navbar .nav .nav__brand .grid-list-button .lines i { position: absolute; right: 0; width: 16px; height: 3px; border-radius: 2px; background-color: #fff; animation-duration: 0.4s; animation-fill-mode: forwards; animation-direction: reverse; transform-origin: 100% 0; transform: scaleX(0); } .l-navbar .nav .nav__brand .grid-list-button .lines i:nth-child(1) { top: 1px; } .l-navbar .nav .nav__brand .grid-list-button .lines i:nth-child(2) { top: 8px; } .l-navbar .nav .nav__brand .grid-list-button .lines i:nth-child(3) { top: 15px; } .l-navbar .nav .nav__brand .grid-list-button .lines i:nth-child(4) { top: 22px; } .l-navbar .nav .nav__brand .grid-list-button.animation .dots i:nth-child(1) { animation-name: dotScale; } .l-navbar .nav .nav__brand .grid-list-button.animation .dots i:nth-child(3) { animation-name: dotScale; } .l-navbar .nav .nav__brand .grid-list-button.animation .dots i:nth-child(2) { animation-name: dotScale, dotMove; } .l-navbar .nav .nav__brand .grid-list-button.animation .dots i:nth-child(4) { animation-name: dotScale, dotMove; } .l-navbar .nav .nav__brand .grid-list-button.animation .lines i:nth-child(1) { animation-name: lineScale; } .l-navbar .nav .nav__brand .grid-list-button.animation .lines i:nth-child(3) { animation-name: lineScale; } .l-navbar .nav .nav__brand .grid-list-button.animation .lines i:nth-child(2) { animation-name: lineScaleX; } .l-navbar .nav .nav__brand .grid-list-button.animation .lines i:nth-child(4) { animation-name: lineScaleX; } .l-navbar .nav .nav__brand .grid-list-button.list .lines i { animation-direction: normal; } .l-navbar .nav .nav__brand .nav__logo { color: #fff; font-weight: 600; } .l-navbar .nav .nav__list { margin-top: 15rem; } .l-navbar .nav .nav__link { display: grid; grid-template-columns: max-content max-content; align-items: center; color: #fff; column-gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem; transition: 0.3s; cursor: pointer; } .l-navbar .nav .nav__link:hover { background-color: #0c5df4; } .l-navbar .nav .nav__icon { font-size: 1.25rem; } .l-navbar .nav .nav__name { font-size: 0.875rem; } .l-navbar .nav ion-icon[name=mail-outline].nav__icon { position: relative; } .l-navbar .nav ion-icon[name=mail-outline].nav__icon::before { position: absolute; top: 0; right: 0; content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #ff8f00; } /* Expander menu */ .expander { width: calc(var(--nav-width) + 9.25rem); } /* Add padding body */ .body-pd { padding: 0 0 0 4.5rem; } .body-pd .details .notification .message { width: 135px !important; } /* Active Links menu */ .active { background-color: #0c5df4; } /* ======= COLLAPSE ====== */ .collapse { grid-template-columns: 20px max-content 1fr !important; } .collapse__link { justify-self: flex-end; transition: all 0.5s; } .collapse__menu { display: none; padding: 0.75rem 2.25rem; } .collapse__sublink { color: #b6cefc; font-size: 0.875rem; } .collapse__sublink:hover { color: #fff; } /* ========= Show collapse ======== */ .showCollapse { display: block; } /*================ Rotate icon ================ */ .rotate { transform: rotate(180deg); transition: 0.5s; } /* Profile */ .profile { grid-area: profile; display: grid; grid-template-columns: repeat(5, 1fr); background-image: linear-gradient(to right, white 60%, #f3f0f0 40%); padding-top: 0.5rem; margin-left: 60px; transition: margin-left 0.6s; } .profile .records { grid-column: 1/4; display: flex; flex-direction: column; } .profile .records > div, .profile .records .marks { display: flex; } .profile .records .marks { color: #b3adb1; background-color: #f3f0f0; -webkit-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); -moz-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); width: 175px; height: 75px; align-items: center; justify-content: center; margin-right: 0.5rem; border-radius: 20px; transition: box-shadow 0.6s; } .profile .records .marks:hover { box-shadow: none; cursor: pointer; } .profile .records .marks h1 { color: #ff8f00; font-weight: bolder; font-size: 33px; } .profile .records .marks h1.blue { color: #5447c8; } .profile .records .marks p { font-size: 12px; font-weight: bold; font-style: normal; } .profile .info { grid-column: 4/6; justify-content: center; text-align: center; padding: 2rem 0 0 0; display: grid; line-height: 1.5; } .profile .info center h3 { color: #b3adb1; font-weight: 400; } .profile .info center span { font-size: 15px; font-weight: bolder; color: #222831; } .profile .info p { font-size: 10px !important; color: #b3adb1; } .profile .info p span { font-size: 10px; } .profile .info .profilepic { position: relative; background-image: url("//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"); width: 80px; height: 80px; background-position: center center; background-size: cover; border-radius: 80px; -webkit-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); -moz-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); } .profile .info .profilepic::before { content: ""; position: absolute; bottom: 1px; right: 2px; width: 10px; height: 10px; border: 3px solid #f3f0f0; border-radius: 50%; background-color: green; } /*============= details ====================*/ .details { grid-area: details; overflow: visible; display: grid; align-items: self-end; grid-template-rows: 290px; grid-template-columns: repeat(5, 1fr); background-image: linear-gradient(to right, white 60%, #f3f0f0 40%); margin-left: 60px; transition: margin-left 0.6s; /* education*/ } .details .history { grid-column: 1/3; display: flex; flex-direction: column; padding-top: 0.6rem; } .details .history h3 { font-size: 15px; } .details .history h3 span { color: #5447c8; font-size: 15px; } .details .history .list { display: flex; padding-bottom: 0.5em; align-items: center; } .details .history .list .pic { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; align-items: center; margin: 0.5em; } .details .history .list .score { text-align: right; } .details .history .list .score p { font-size: 14px; } .details .history .list .score span { font-weight: 700; font-size: 10px; color: #000; } .details .history .list .score span.orange { color: #ff8f00; } .details .history .b-bottom { margin-bottom: 0.6em; border-bottom: 1px solid #efefef; } .details .history .list-detail { display: flex; flex: 4; flex-direction: column; align-items: flex-start; color: #222831; } .details .history .list-detail p { margin-right: 5px; font-weight: bold; } .details .history .list-detail p:nth-child(2) { font-size: 12px; font-weight: 600; } .details .history .list-detail span { color: #ff8f00; } .details .education { grid-column: 3/5; display: grid; text-align: center; overflow: visible; z-index: 3; } .details .education > span { margin-left: 16%; font-weight: bolder; font-size: 14px; color: #b3adb1; } .details .education .todo { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1.2fr 1fr 2fr; grid-template-areas: "todoOne ." "todoTwo ." "todoThree todoFour"; font-size: 12px; padding: 1em; border-radius: 20px; margin: 0.5rem 0 0 1rem; color: #f6f6f6; background-color: #5447c8; -webkit-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); -moz-box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); box-shadow: -12px -4px 18px -14px rgba(64, 63, 64, 0.82); text-align: left; height: 260px; width: 450px; } .details .education .todo .todoOne { grid-area: todoOne; padding: 0 0.5rem; } .details .education .todo .todoOne p { font-size: 10px; margin: 0 10px; color: #f3f0f0; } .details .education .todo .todoOne h3 { margin: 0.3rem 0.6rem; } .details .education .todo .todoTwo { grid-area: todoTwo; padding: 0.75rem 1rem; background-color: #6559cd; margin: 5px 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .details .education .todo .todoTwo span { font-size: 10px; } .details .education .todo .todoTwo i { font-size: 15px; } .details .education .todo .todoThree { grid-area: todoThree; padding: 0.75rem 1rem; background-color: #6559cd; margin: 5px 10px; border-radius: 5px; } .details .education .todo .todoThree p { font-size: 11px; letter-spacing: 1px; margin: 0; } .details .education .todo .todoThree p span { font-weight: 600; margin-right: 3px; } .details .education .todo .todoThree .justcenter { display: flex; margin-top: 7%; justify-content: space-between; align-items: center; } .details .education .todo .todoThree .justcenter p { text-align: center; letter-spacing: unset; font-size: 10px; } .details .education .todo .todoThree .justcenter span { color: #ff8f00; font-size: 10px; } .details .education .todo .todoFour { grid-area: todoFour; padding: 0.45rem 1rem; background-color: #6559cd; margin: 5px 10px; border-radius: 5px; } .details .education .todo .todoFour span { font-size: 10px; margin: 0.6rem; } .details .education .todo .todoFour span.orange { color: #ff8f00; } .details .education .todo .todoFour p { font-size: 13px; font-weight: bold; } .details .education .todo .todoFour p.fs { font-weight: 100; font-size: 10px; } .details .education .todo .todoFour p.fw { font-weight: 800; } .details .notification { grid-column: 5/6; font-size: 12px; align-items: center; display: flex; flex-direction: column; justify-content: space-around; } .details .notification .message { width: 200px; height: 120px; border: 1px solid #b3adb1; background-color: #f6f6f6; padding: 0.7rem; grid-template-columns: 2fr 1fr; display: grid; margin: 7px; text-align: left; border-radius: 1rem; } .details .notification .message .chevron { display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 100; } .details .notification .message .white { color: #f6f6f6; } .details .notification .message div h3 { font-size: 13px; } .details .notification .message div p { font-size: 10px; } .details .notification .message.bg-black { color: #f6f6f6; background-color: #222831; } /* ============= information css ============= */ .information { grid-area: information; display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 60px; transition: margin-left 0.6s; } .information .blog { display: flex; grid-column: 1/4; border: 1px solid #b3adb1; border-radius: 10px; box-sizing: border-box; padding: 0.4rem 3rem; width: 90%; height: 285px; } .information .blog img { width: 40%; object-fit: cover; height: 270px; margin-right: 10px; } .information .blog .bg-yellow { background-color: #ffc502; height: 120px; border-radius: 7px; color: #f6f6f6; } .information .blog .bg-yellow span { font-size: 12px; padding-left: 12px; margin-top: 11px; display: inline-block; } .information .blog .bg-yellow div { display: flex; justify-content: space-between; align-items: center; padding: 12px; } .information .blog .bg-yellow div h3, .information .blog .bg-yellow div i { font-size: 14px; display: contents; } .information .blog .blog-list h3 { margin-bottom: 0; } .information .blog .blog-list p { width: 42%; display: inline-block; font-size: 11px; margin-top: 0; } /*============= communication ============= */ .communication { grid-column: 4/6; display: flex; flex-direction: column; background-color: #f3f0f0; padding: 0 0.3rem 0 1rem; color: #b3adb1; } .communication .list { display: grid; grid-template-columns: 0.5fr 2fr 1fr; align-items: center; } .communication .list .list-details { margin-right: auto; color: #242644; } .communication .list .list-details h3 { font-weight: 600; font-size: 14px; margin: 0.6rem 0.6rem 0; } .communication .list .list-details p { margin: 0 0.6rem 0.6rem; font-size: 11px; font-weight: 500; } .communication .list img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; align-items: center; margin: 0.5em; } .communication .list img:nth-child(4) { padding: 10px; background-color: #f3f0f0; width: 31px !important; height: 31px !important; } .communication .list .members h3 { text-transform: uppercase; font-size: 13px; text-align: left; color: #d7d7dc; margin: 0 0 0 10px; } .communication .list .members .member-img { display: flex; align-items: center; position: relative; } .communication .list .members .member-img span { display: block; position: absolute; right: 18%; border-radius: 50%; background-color: #eaedf4; padding: 6px 10px; align-items: center; } .communication .list .members .member-img span .fa { font-size: 9px; } .communication .list .members .member-img img { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #b3adb1; object-fit: cover; margin-right: -15%; } .communication .list .members .member-img img:nth-child(2) { width: 34px; height: 34px; } .communication .list .members .member-img img:nth-child(3) { width: 33px; height: 33px; } .communication .action { display: flex; margin-bottom: 1rem; justify-content: space-around; } .communication button { padding: 0.8em 1.8em; font-weight: 700; margin-right: 1rem; font-size: 12px; border-radius: 6px; outline: none; border: none; } .communication button.white { color: #f6f6f6; } .communication button.lightgrey { color: #b3adb1; } .communication button.bg-orange { background-color: #ff8f00; } .communication button.blue { color: #5447c8; } .communication button.bg-grey { background-color: #edf0f6; } @keyframes dotScale { 0% { transform: translate(); width: 10px; height: 10px; } 100% { width: 5px; height: 5px; } } @keyframes dotMove { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 7px); } 100% { transform: translate(-14px, 7px); } } @keyframes lineScale { 0%, 20% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes lineScaleX { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0