自适应议程表工作安排表课程表效果-html代码-BFW代码库

自适应议程表工作安排表课程表效果

代码语言：html

所属分类：表格

代码描述：自适应议程表工作安排表课程表效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>
html,
body {
  font-family: Lato, Helvetica, sans-serif;
  margin: 0;
  padding: 10px;
  height: 100%;
}

header {
  width: 100%;
  height: 48px;
  background-color: #ddd;
}

ol {
  list-style: none;
}

.timetable {
  display: -webkit-box;
  display: flex;
  background: #ecf0f1;
  color: #444;
}

.nowMarker {
  position: absolute;
  border-bottom: 2px solid #ff7f6e;
  z-index: 100;
  width: 100%;
  top: -2px;
  -webkit-transition: top 2s ease-in-out;
  transition: top 2s ease-in-out;
}

.timings {
  margin: 1em 0 0 0;
  padding: 0 3px 0 0;
  width: 3em;
  height: 68em;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: end;
          align-items: flex-end;
  justify-content: space-around;
}

.week {
  margin: 0;
  display: -webkit-box;
  display: flex;
  overflow-x: auto;
  padding: 0;
  width: 100%;
}

.day {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 0;
  min-width: calc(100.5% / 3);
  -webkit-transition: min-width 0.2s ease-in-out;
  transition: min-width 0.2s ease-in-out;
}

.name {
  display: block;
  height: 3em;
  line-height: 3em;
  text-align: center;
}

.hour {
  position: absolute;
  height: 4em;
  text-indent: 3px;
  width: 100%;
  color: white;
}

.hour__08 {
  top: 3em;
}

.hour__09 {
  top: 7em;
}

.hour__10 {
  top: 11em;
}

.hour__11 {
  top: 15em;
}

.hour__12 {
  top: 19em;
}

.hour__13 {
  top: 23em;
}

.hour__14 {
  top: 27em;
}

.hour__15 {
  top: 31em;
}

.hour__16 {
  top: 35em;
}

.hour--two {
  height: 8em;
}

.hour--three {
  height: 12em;
}

.class1 {
  background: #3498db;
}

.class2 {
  background: #27ae60;
}

.class3 {
  background: #e74c3c;
}

.class4 {
  background: #e67e22;
}

.class5 {
  background: #1abc9c;
}

@media (min-width: 768px) {
  .timetable {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .timings {
    margin: 0;
    padding: 0 0 3px 3%;
    width: 96%;
    height: 3em;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  .name {
    width: 4%;
    line-height: 5em;
    height: 5em;
  }
  .week {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .hour {
    top: 0;
    width: 6%;
    height: 100%;
  }
  .hour__08 {
    left: 4%;
  }
  .hour__09 {
    left: 10%;
  }
  .hour__10 {
    left: 16%;
  }
  .hour__11 {
    left: 22%;
  }
  .hour__12 {
    left: 28%;
  }
  .hour__13 {
    left: 34%;
  }
  .hour__14 {
    left: 40%;
  }
  .hour__15 {
    left: 46%;
  }
  .hour__16 {
    left: 52%;
  }
  .hour--two {
    width: 12%;
  }
  .hour--three {
    width: 18%;
  }
}

footer {
  position: absolute;
  width: 100%;
  height: 48px;
  background: #aaa;
}
</style>

</head>

<body>

<header>
</header>
<section class="timetable">
.........完整代码请登录后点击上方下载按钮下载查看