网格布局实现时间表课程表安排表效果
代码语言:html
所属分类:表格
代码描述:网格布局实现时间表课程表安排表效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Karla'> <style> html, body { background: white; margin: 0; font-family: 'Karla'; color: #546E7A; } * { box-sizing: border-box; } .timetable { display: grid; grid-template-areas: ". week" "time content"; grid-template-columns: 120px; grid-template-rows: 60px; width: 100vw; height: 100vh; } .timetable .accent-pink-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #ee8ebc, #eea08e); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-pink-gradient:hover { box-shadow: 0 20px 30px 0 rgba(238, 142, 188, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .accent-orange-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #eec08e, #dcee8e); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-orange-gradient:hover { box-shadow: 0 20px 30px 0 rgba(238, 192, 142, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .accent-green-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #bcee8e, #8eeea0); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-green-gradient:hover { box-shadow: 0 20px 30px 0 rgba(188, 238, 142, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .accent-cyan-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #8eeec0, #8edcee); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-cyan-gradient:hover { box-shadow: 0 20px 30px 0 rgba(142, 238, 192, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .accent-blue-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #8ebcee, #a08eee); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-blue-gradient:hover { box-shadow: 0 20px 30px 0 rgba(142, 188, 238, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .accent-purple-gradient { display: -webkit-box; display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #c08eee, #ee8edc); -webkit-transition: .2s ease box-shadow, .2s ease transform; transition: .2s ease box-shadow, .2s ease transform; } .timetable .accent-purple-gradient:hover { box-shadow: 0 20px 30px 0 rgba(192, 142, 238, 0.3); -webkit-transform: scale(1.05); transform: scale(1.05); } .timetable .weekend { background: #fbfbfc; color: #87a1ad; } .timetable .week-names { grid-area: week; display: grid; grid-template-columns: repeat(7, 1fr); text-transform: up.........完整代码请登录后点击上方下载按钮下载查看
网友评论0