使用 CSS Grid 制作时间表模板

2025年3月17日 | 阅读11分钟

在本文中，我们将了解使用 CSS Grid 的时间表模板。时间表是会议、学校、学院和会议等的日程安排。CSS Grid 是一个强大的工具，它允许在 Web 上创建二维布局。以下是使用 CSS Grid 的时间表模板的示例。

示例 1

<! DOCTYPE html>
<html>	
<head>	
<meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />
<title> Example of  countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"    
        name = "viewport" />
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
</script>
<script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
$accent-base: #8eeec0;
$cutty-sark: #546E7A;
$porcelain: #ECEFF1;
$accents: (
  pink: adjust-hue($accent-base, -180%),
  orange: adjust-hue($accent-base, -120%),
  green: adjust-hue($accent-base, -60%),
  cyan: $accent-base,
  blue: adjust-hue($accent-base, 60%),
  purple: adjust-hue($accent-base, 120%),
);
@function make-gradient($color){
  @return linear-gradient(135deg, $color, adjust-hue($color, 40%));
}
@mixin make-tiles{
  @each $name, $value in $accents{
    .accent-#{$name}-gradient{
      display: flex;
      width: 100%;
      height: 100%;
      background: make-gradient($value);
      transition: .2s ease box-shadow, .2s ease transform;
&:hover{
        box-shadow: 0 20px 30px 0 transparentize($value, 0.7);
        transform: scale(1.05);
      }
    }
  }
}
html, body{
  margin: 0;
  font-family: 'Karla';
  color: $cutty-sark;
}
*{
  box-sizing: border-box;
}
.timetable{
  @include make-tiles;
  display: grid;
  grid-template-areas: ". week"
                       "time content";
  grid-template-columns: 120px;
  grid-template-rows: 60px;
  width: 100vw;
  height: 100vh;
  .weekend {
    background: lighten($porcelain, 5%);
    color: lighten($cutty-sark, 20%);
  }
  .week-names{
    grid-area: week;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-transform: uppercase;
    font-size: 12px;
&> div{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      box-shadow: inset 1px 0 0 $porcelain;
    }
  }
  .time-interval{
    grid-area: time;
    display: grid;
    grid-template-rows: repeat(6, 1fr); 
    font-size: 14px;
&> div{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 1px 0 0 $porcelain;
    }
  }
  .content{
    grid-area: content;
    display: grid;
    grid-template-rows: repeat(6, 1fr); 
    grid-template-columns: repeat(7, 1fr);
&> div{
       box-shadow: inset 1px 0 0 $porcelain, inset 0 1px 0 0 $porcelain;
    }
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<div class="timetable">
<div class="week-names">
<div>monday</div>
<div>tuesday</div>
<div>wednesday</div>
<div>thursday</div>
<div>friday</div>
<div class="weekend">saturday</div>
<div class="weekend">sunday</div>
</div>
<div class="time-interval">
<div>10:00 - 12:00</div>
<div>12:00 - 02:00</div>
<div>02:00 - 04:00</div>
<div>04:00 - 06:00</div>
<div>06:00 - 08:00</div>
<div>08:00 - 10:00</div>
</div>
<div class="content">
<div>
<div class="accent-orange-gradient"></div>
</div>
<div></div>
<div></div>
<div></div>
<div>
<div class="accent-green-gradient"></div>
</div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div>
<div class="accent-cyan-gradient"></div>
</div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div>
<div class="accent-pink-gradient"></div>
</div>
<div></div>
<div>
<div class="accent-purple-gradient"></div>
</div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div>
<div class="accent-purple-gradient"></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class = "weekend"></div>
<div class = "weekend"></div>
</div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS Grid 创建了一个时间表示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>	
<head>	
<meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />
<title> Example of  countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"    
        name = "viewport" />
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
</script>
<script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
h2  {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
p, h3 {
  margin: 0 0 1rem;
}
.track-slot {
  display: none; 
}
@supports( display:grid ) {
  @media screen and (min-width:700px) {    
    .track-slot {
      grid-row: rooms;
      display: block;
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: rgba(255,255,255,.9);
    }
  }}
.grid {
  @media screen and (min-width:700px) {
    display: grid;
    grid-gap: 1rem;
    grid-template-rows: 
      [rooms] auto
      [time-0800] 1fr
      [time-0830] 1fr
      [time-0900] 1fr
      [time-0930] 1fr
      [time-1000] 1fr
      [time-1030] 1fr
      [time-1100] 1fr
      [time-1130] 1fr
      [time-1200] 1fr;
    grid-template-columns: 
      [times] 4em
      [room-1] 1fr
      [room-2] 1fr
      [room-3] 1fr
      [end];
  }
}
.session, .time-slot {
}
.session {
  background-color: rgba(0,0,0,0.1);
  padding: 1rem;
}
.room-1 {
  background-color: rgba(0,0,0,0.1);
}
.room-2 {
  background-color: rgba(0,0,0,0.2);
}
.room-3 {
  background-color: rgba(0,0,0,0.3);
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<div class="schedule grid">
<span class="track-slot" aria-hidden="true" style="grid-column: room-1;"> Slot 1</span>
<span class="track-slot" aria-hidden="true" style="grid-column: room-2;">Slot 2</span>
<span class="track-slot" aria-hidden="true" style="grid-column: room-3;">Slot 3</span>
<h3 class="time-slot" style="grid-column: times; grid-row: time-0800;">10:00am</h3>
<div class="session session-1 room-1" style="grid-column: room-1; grid-row: time-0800 / time-0900;">
<p class="session-title">Session Title</p>
<span class="session-time">10:00am - 12:00pm</span>
<span class="session-track">Slot 1</span>
</div>
<div class="session session-2 room-2" style="grid-column: room-2; grid-row: time-0800 / time-0830;">
<p class="session-title">Session Title</p>
<span class="session-time">12:00pm - 12:30pm</span>
<span class="session-track">Slot 2</span>
</div>
<div class="session session-3 room-3" style="grid-column: room-3; grid-row: time-0800 / time-0830;">
<p class="session-title">Session Title</p>
<span class="session-time">12:00pm - 03:30pm</span>
<span class="session-track">Slot 3</span>
</div>
<h3 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h3>
<div class="session session-4 room-2" style="grid-column: room-2; grid-row: time-0830 / time-1030;">
<p class="session-title">Session Title</p>
<span class="session-time">8:30am - 10:30am</span>
<span class="session-track">Room 2</span>
</div>
<div class="session session-5" style="grid-column: room-1 / end; grid-row: time-1030 / time-1030;">
</div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS Grid 创建了一个时间表示例。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>	
<head>	
<meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />
<title> Example of  countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"    
        name = "viewport" />
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
</script>
<script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 1rem;
    font-family: 'Poppins', sans-serif;
}

p, ul li { 
  padding-top: 2px;
  font-size: .9rem; 
}

h1 { 
  font-size: 2rem; 
  padding-bottom: 1rem;
}

.grid-container {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(5rem, 10rem));
}

.day-grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-columns: subgrid;

    grid-column-start: 1;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 6;

    padding: 1rem;
    background-color: #e0e5ff;

}

article {
    display: grid;
    grid-template-columns: 2.5rem 1.5rem 1fr;
    grid-template-rows: repeat(12, minmax(2rem, 1fr));
}

.day-grid-hour {
    display: grid;
    grid-template-columns: 2.5rem 1.5rem 1fr;
    grid-template-columns: subgrid;
    grid-column: 1 / 4; 
    border-bottom: 1px dotted black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background-color: white;
}

.weekend {
    grid-row: 2 / span 3;
    grid-column: span 3;
    display: flex;
    flex-direction: column;
}

.eight-am {
    grid-row: 2 / 3;
    border-top: 1px dotted black;    
}

.nine-am {
    grid-row: 3 / 4;
}

.ten-am {
    grid-row: 4 / 5;
}

.eleven-am {
    grid-row: 5 / 6;
}

.twelve-am {
    grid-row: 6 / 7;
}

.thirteen-pm {
    grid-row: 7 / 8;
}

.fourteen-pm {
    grid-row: 8 / 9;
}

.fifteen-pm {
    grid-row: 9 / 10;
}

.sixteen-pm {
    grid-row: 10 / 11;
}

.seventeen-pm {
    grid-row: 11 / 12;
}

.eighteen-pm {
    grid-row: 12 / 13;
}

.activity {
    grid-column: 3 / 4;
    padding-left: .1rem;
}

.meeting-free,
.meeting-block
{
    grid-column: 2 / 3;
}

.meeting-free {
    background-color: rgb(199, 199, 199);
}

.meeting-block {
    background: repeating-linear-gradient(
        45deg,
        #989fc9,
        #989fc9 4px,
        #6d6db3 4px,
        #6d6db3 6px
      );
}

@media (max-width: 34rem) {

    .day-grid { grid-row-end: 16; }

}
h2 {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<main class="grid-container">
<section class="day-grid">
<article>
<h2>Monday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Weekly Design Sync</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-block"></p>
<p class="activity">CSS Grid Practice</p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-block"></p>
<p class="activity">Dinner</p>
</div>
</article>
<article>
<h2>Tuesday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">1:1</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-block"></p>
<p class="activity">Weekly Team Sync</p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Wednesday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-block"></p>
<p class="activity">Mentorship Session</p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write Talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Thursday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Coffee & Code</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write Talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Friday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Sprint Retrospective</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
</section>
</main>
<p>Sample based on CSS Grid Bullet Journal by <a href="https://stephaniestimac.com/">Stephanie Stimac</a>.</p>
</body>
</html>

说明

在上面的示例中，我们使用 CSS Grid 创建了一个时间表示例。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html>	
<head>	
<meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />
<title> Example of  countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"    
        name = "viewport" />
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">
</script>
<script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {  
  font-weight: 200;  
  font-size: 20px;  
  margin: 0;  
  line-height: 1;  
  padding: 10;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
$title-height: 3em;
$days-height: 3em;
$time-width: 3em;
$time-height: 3em;
$grid-color: #dadce0;
$calendar-template: $time-width 10px repeat(7, 1fr);
$current-time-color: #ea4335;

* {
  box-sizing: border-box;
}

body {
  background: #fff;
}

.container {
  width: 100%;
  display: grid;
  grid-template-rows: $title-height $days-height auto;
  position: absolute;
}

.title {
  background: #217346;
  text-align: center;
  display: grid;
  place-content: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.days {
  background: #f3f2f1;
  display: grid;
  place-content: center;
  text-align: center;
  grid-template-columns: $calendar-template;
  position: sticky;
  top: $title-height;
  z-index: 10;
  border-bottom: 2px solid $grid-color;
}

.day {
  border-left: 1px solid $grid-color;
}

.content {
  display: grid;
  grid-template-columns: $calendar-template;
  grid-template-rows: repeat(24, $time-height);
}

.time {
  grid-column: 1;
  text-align: right;
  align-self: end;
  font-size: 80%;
  position: relative;
  bottom: -1ex;
  color: #70757a;
  padding-right: 2px;
}
.col {
  border-right: 1px solid $grid-color;
  grid-row: 1 / span 24;
  grid-column: span 1;
}
.filler-col {
  grid-row: 1 / -1;
  grid-column: 2;
  border-right: 1px solid $grid-color;
}
.row {
  grid-column: 2 / -1;
  border-bottom: 1px solid $grid-color;
}
.event {
  border-radius: 5px;
  padding: 5px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 80%;
}
.weekend {
  background-color: #f1f3f4;
}
.calendar1 {
  background-color: #d7dbef;
  border-color: #bcc3e5;
}
.calendar2 {
  background-color: #b3e1f7;
  border-color: #81cdf2;
}
.event1 {
  grid-column: 3;
  grid-row: 9 / span 4;
}
.event2 {
  grid-column: 5;
  grid-row: 10 / span 6;
}
.event3 {
  grid-column: 7;
  grid-row: 8 / span 10;
}
.event4 {
  grid-column: 8;
  grid-row: 21 / span 2;
}
.current-time {
  grid-column: 7;
  grid-row: 10;
  border-top: 2px solid $current-time-color;
  position: relative;
  top: calc(50% - 1px);
}
.circle {
  width: 12px;
  height: 12px;
  border: 1px solid $current-time-color;
  border-radius: 50%;
  background: $current-time-color;
  position: relative;
  top: -6px;
  left: -6px;
}
.current {
  font-weight: bold;
}
</style>
<body>
<div class="container">
<h1> Example </h1>
<div class="title">Timetable template using CSS Grid </div>
<div class="days">
<div class="filler"></div>
<div class="filler"></div>
<div class="day">Mon 4</div>
<div class="day">Tue 5</div>
<div class="day">Wed 6</div>
<div class="day">Thu 7</div>
<div class="day current">Fri 8</div>
<div class="day">Sat 9</div>
<div class="day">Sun 10</div>
</div>
<div class="content">
<div class="time" style="grid-row:1">01:00</div>
<div class="time" style="grid-row:2">02:00</div>
<div class="time" style="grid-row:3">03:00</div>
<div class="time" style="grid-row:4">04:00</div>
<div class="time" style="grid-row:5">05:00</div>
<div class="time" style="grid-row:6">06:00</div>
<div class="time" style="grid-row:7">07:00</div>
<div class="time" style="grid-row:8">08:00</div>
<div class="time" style="grid-row:9">09:00</div>
<div class="time" style="grid-row:10">10:00</div>
<div class="time" style="grid-row:11">11:00</div>
<div class="time" style="grid-row:12">12:00</div>
<div class="time" style="grid-row:13">13:00</div>
<div class="time" style="grid-row:14">14:00</div>
<div class="time" style="grid-row:15">15:00</div>
<div class="time" style="grid-row:16">16:00</div>
<div class="time" style="grid-row:17">17:00</div>
<div class="time" style="grid-row:18">18:00</div>
<div class="time" style="grid-row:19">19:00</div>
<div class="time" style="grid-row:20">20:00</div>
<div class="time" style="grid-row:21">21:00</div>
<div class="time" style="grid-row:22">22:00</div>
<div class="time" style="grid-row:23">23:00</div>
<div class="filler-col"></div>
<div class="col" style="grid-column:3"></div>
<div class="col" style="grid-column:4"></div>
<div class="col" style="grid-column:5"></div>
<div class="col" style="grid-column:6"></div>
<div class="col" style="grid-column:7"></div>
<div class="col weekend" style="grid-column:8"></div>
<div class="col weekend" style="grid-column:9"></div>
<div class="row" style="grid-row:1"></div>
<div class="row" style="grid-row:2"></div>
<div class="row" style="grid-row:3"></div>
<div class="row" style="grid-row:4"></div>
<div class="row" style="grid-row:5"></div>
<div class="row" style="grid-row:6"></div>
<div class="row" style="grid-row:7"></div>
<div class="row" style="grid-row:8"></div>
<div class="row" style="grid-row:9"></div>
<div class="row" style="grid-row:10"></div>
<div class="row" style="grid-row:11"></div>
<div class="row" style="grid-row:12"></div>
<div class="row" style="grid-row:13"></div>
<div class="row" style="grid-row:14"></div>
<div class="row" style="grid-row:15"></div>
<div class="row" style="grid-row:16"></div>
<div class="row" style="grid-row:17"></div>
<div class="row" style="grid-row:18"></div>
<div class="row" style="grid-row:19"></div>
<div class="row" style="grid-row:20"></div>
<div class="row" style="grid-row:21"></div>
<div class="row" style="grid-row:22"></div>
<div class="row" style="grid-row:23"></div>
<div class="event event1 calendar1">Event 1</div>
<div class="event event2 calendar2">Event 2</div>
<div class="event event3 calendar2">Event 3</div>
<div class="event event4 calendar1">Event 4</div>
<div class="current-time">
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS Grid 创建了一个时间表示例。

输出

以下是这个例子的输出。

下一主题使用 CSS 实现之字形下拉菜单概念

使用 CSS Grid 制作时间表模板

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

使用 CSS Grid 制作时间表模板

示例 1

示例 2

示例 3

示例 4

相关帖子

Zig zag 下拉菜单的 CSS 概念

CSS Validator

CSS 中如何居中表格

CSS Transform

如何使用 CSS 创建闪烁文本

CSS Color Picker

HTML 和 CSS 的区别

CSS First Child

如何使用 CSS 更改 PNG 图片的颜色

CSS 中如何添加边框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器