HTML课表实现
效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课表</title>
<style>
div,
form,
ul,
ol,
li,
span,
p,
dl,
dt,
dd,
img {
margin: 0;
padding: 0;
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
ul,
ol,
li {
list-style: none
}
/*清除列表默认样式*/
/*设置浮动*/
.fl {
float: left
}
/*课程背景颜色*/
.SixiangzhengzhiBg {
background-color: #4dc4cc
}
.GaodengshuxueBg {
background-color: #6fa1e0
}
.TiyuBg {
background-color: #82e27b
}
.JavaBg {
background-color: #eec291
}
.WuliBg {
background-color: #b15b7e
}
.EnglishlisteningspeakingBg {
background-color: #9d8fcc
}
.Huodong {
background-color: #fa809d
}
.YingyuBg {
background-color: #17b7e7
}
.Content {
min-width: 1000px;
overflow: auto;
/* height: 700px; */
}
.Week {
min-width: 900px;
height: 30px;
background-color: #fff;
filter: alpha(opacity=60);
opacity: 0.6;
}
.Week ul li {
font-family: 微软雅黑;
font-size: 14px;
color: #333;
text-align: center;
width: 108px;
/* line-height: 56px; */
}
/*设置节次CSS规则*/
.Source {
/* width: 850px; */
/* height: 90vh; */
}
.Num {
width: 100px;
/* height: 90vh; */
background-color: #fff;
filter: alpha(opacity=60);
opacity: 0.6;
}
.Num ul li {
font-family: 微软雅黑;
font-size: 14px;
color: #333;
width: 100px;
height: 105px;
line-height: 50px;
text-align: center;
/* text-align: justify;
text-justify: newspaper;
word-break: break-all; */
}
/*设置课程CSS规则*/
.Sun ul li {
width: 100px;
height: 100px;
}
/* .Mon,Tue,Wed,Thu,Fri,Sat,Sun ul{margin-top: 1px;} */
.KeCheng li {
width: 100px;
height: 90px;
border-radius: 5px;
display: table;
margin: 5px;
cursor: pointer;
/* border: 1px solid #fff;
box-shadow: inset 0 1px 8px #666; */
}
.KeCheng li:hover {
box-shadow: inset 0 1px 8px #f60;
}
.KeCheng li p {
display: table-cell;
vertical-align: middle;
font-family: 微软雅黑;
color: #fff;
font-size: 12px;
width: 100px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="bg">
<div class="Content">
<div class="Week">
<ul>
<li class="fl">时间</li>
<li class="fl">星期天</li>
<li class="fl">星期一</li>
<li class="fl">星期二</li>
<li class="fl">星期三</li>
<li class="fl">星期四</li>
<li class="fl">星期五</li>
<li class="fl">星期六</li>
</ul>
</div>
<div class="Source">
<div class="Num fl">
<ul>
<li>
<div>1.2节</div>
<div>8:00-9:40</div>
</li>
<li>
<div>3.4节</div>
<div>10:15-11:45</div>
</li>
<li>
<div>5.6节</div>
<div>14:00-15:40</div>
</li>
<li>
<div>7.8节</div>
<div>16:15-17:55</div>
</li>
<li>
<div>9.10节</div>
<div>19:00-20:40</div>
</li>
</ul>
</div>
<!-- 星期日课程信息-->
<div class="Sun fl">
<ul class="KeCheng">
<li class="TiyuBg">
<p></p>
</li>
<li class="TiyuBg">
<p></p>
</li>
<li class="TiyuBg">
<p></p>
</li>
<li class="TiyuBg">
<p></p>
</li>
<li class="TiyuBg">
<p></p>
</li>
</ul>
</div>
<div class="Mon fl">
<ul class="KeCheng">
<li class="EnglishlisteningspeakingBg">
<p>语文</p>
</li>
<li class="EnglishlisteningspeakingBg">
<p>英语</p>
</li>
<li class="EnglishlisteningspeakingBg">
<p></p>
</li>
<li class="EnglishlisteningspeakingBg">
<p>软件工程</p>
</li>
<li class="EnglishlisteningspeakingBg">
<p></p>
</li>
</ul>
</div>
<div class="Mon fl">
<ul class="KeCheng">
<li class="GaodengshuxueBg">
<p></p>
</li>
<li class="GaodengshuxueBg">
<p>高数</p>
</li>
<li class="GaodengshuxueBg">
<p></p>
</li>
<li class="GaodengshuxueBg">
<p></p>
</li>
<li class="GaodengshuxueBg">
<p>美术</p>
</li>
</ul>
</div>
<div class="Mon fl">
<ul class="KeCheng">
<li class="WuliBg">
<p></p>
</li>
<li class="WuliBg">
<p>数据库</p>
</li>
<li class="WuliBg">
<p></p>
</li>
<li class="WuliBg">
<p></p>
</li>
<li class="WuliBg">
<p>大象</p>
</li>
</ul>
</div>
<div class="Mon fl">
<ul class="KeCheng">
<li class="EnglishlisteningspeakingBg">
<p></p>
</li>
<li class="EnglishlisteningspeakingBg">
<p></p>
</li>
<li class="EnglishlisteningspeakingBg">
<p>概率论</p>
</li>
<li class="EnglishlisteningspeakingBg">
<p>高数</p>
</li>
<li class="EnglishlisteningspeakingBg">
<p></p>
</li>
</ul>
</div>
<div class="Mon fl">
<ul class="KeCheng">
<li class="YingyuBg">
<p>体育</p>
</li>
<li class="YingyuBg">
<p></p>
</li>
<li class="YingyuBg">
<p></p>
</li>
<li class="YingyuBg">
<p></p>
</li>
<li class="YingyuBg">
<p>操作系统</p>
</li>
</ul>
</div>
<!-- 星期一课程信息-->
<!-- <div class="Mon fl" v-for="(item,index) in classSchedule" :key="index">
<ul class="KeCheng">
<li class="SixiangzhengzhiBg" v-for="(item1,index1) in item" :key="index1"><p>{{item1}}</p></li>
<li :class="item1 == '' ? '':'SixiangzhengzhiBg'" v-for="(item1,index1) in item" :key="index1"><p>{{item1}}</p></li>
</ul>
</div> -->
<!-- 星期六课程信息-->
<div class="Sat fl">
<ul class="KeCheng">
<li class="Huodong">
<p></p>
</li>
<li class="Huodong">
<p></p>
</li>
<li class="Huodong">
<p></p>
</li>
<li class="Huodong">
<p></p>
</li>
<li class="Huodong">
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>