无论是上班族还是学生党，都需要一份类似课程表的表格来提醒我们的日程。有了它就可以不必担心自己忘记该干什么事情，到点了该干什么事情。它可以说是我们日常生活中经常接触的事物了，制作一份课程表也很简单，可以用纸写，可以在office里写，可以在一些软件上写等等……但是，你听说过用HTML5做的课程表吗？
图1.用HTML5写的课程表
怎么样，看起来还是很高大上的吧！制作这个表格也不难，只需要添加一些列表元素（ul,li），之后再用CSS美化即可。
代码如下
HTML部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的课程表</title><link rel="stylesheet" href="../css/课程表.css"> <!-- 引入外部样式表-->
</head>
<body><div class="Content"><div class="Title"><p>我的课程表</p></div><div class="TopLine"></div><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></ul></div><div class="Source">
<!-- 节数--><div class="Num fl"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div>
<!-- 星期日课程信息--><div class="Sun fl"><ul class="KeCheng"><li style="border: none;box-shadow: none;width: 108px"></li></ul></div>
<!-- 星期一课程信息--><div class="Mon fl"><ul class="KeCheng"><li class="GaodengshuxueBg"><p>高等数学</p></li><li style="border: none;box-shadow: none;width: 108px"></li><li class="YingyuBg"><p>大学英语</p></li><li class="JavaBg"><p>面向对象程序设计</p></li></ul></div><!-- 星期二课程信息--><div class="Tue fl"><ul class="KeCheng"><li class="WuliBg"><p>大学物理</p></li><li class="SixiangzhengzhiBg"><p>思想政治</p></li><li class="YingyuBg"><p>大学英语</p></li></ul></div><!-- 星期三课程信息--><div class="Wed fl"><ul class="KeCheng"><li class="EnglishlisteningspeakingBg"><p>大学英语听说</p></li><li class="GaodengshuxueBg"><p>高等数学</p></li><li class="WuliBg"><p>大学物理</p></li><li class="TiyuBg"><p>体育</p></li></ul></div><!-- 星期四课程信息--><div class="Thu fl"><ul class="KeCheng"><li class="JavaBg"><p>面向对象程序设计</p></li><li style="border: none;box-shadow: none;width: 108px"></li><li class="YingyuBg"><p>大学英语</p></li><li class="SixiangzhengzhiBg"><p>思想政治</p></li></ul></div><!-- 星期五课程信息--><div class="Fri fl"><ul class="KeCheng"><li class="GaodengshuxueBg"><p>高等数学</p></li><li class="WuliBg"><p>大学物理</p></li><li class="YingyuBg"><p>大学英语</p></li><li class="EnglishlisteningspeakingBg"><p>大学英语听说</p></li></ul></div><!-- 星期六课程信息--><div class="Sat fl"><ul class="KeCheng"><li class="Huodong">团日活动</li><li>班会</li></ul></div></div></div>
</body>
</html>CSS部分
body{margin: 0% auto;padding: 0;background: #fff;text-align: center;
}
body>div{margin-right: auto; margin-left: auto;text-align: center;
}
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}
.content{width: 890px;height: 1024px;background: url("../img/_500641415_banner.jpg")no-repeat;margin: 0 auto;
}
/*设置标题CSS规则*/
.Title{padding-top: 35px;margin: 0 auto;
}
.Title p{font-size: 40px; font-family: 微软雅黑;color: #fff;
}
/*设置星期CSS规则*/
.TopLine{width: 890px;height: 4px;background-color: #d2d2d2;margin-top: 30px;
}
.Week{width: 890px;height: 58px;background-color: #fff;filter: alpha(opacity=60);opacity: 0.6;
}
.Week ul{padding-left: 60px;
}
.Week ul li{font-family: 微软雅黑;font-size: 26px;color: #333;text-align: center;width: 110px;line-height: 56px;
}
/*设置节次CSS规则*/
.Source{width: 890px;height: 858px;margin-top: 3px;background-image: url("../img/_500641415_banner.jpg");
}
.Num{width: 60px;height: 858px;margin-top: 1px;background-color: #fff;filter: alpha(opacity=60);opacity: 0.6;
}
.Num ul li{font-family: 微软雅黑;font-size: 26px;color: #333;width: 60px;height: 81px;line-height: 81px;text-align: center;
}
/*设置课程CSS规则*/
.Sun ul li{width: 98px;height: 149px;}
.Mon,Tue,Wed,Thu,Fri,Sat,Sun ul{margin-top: 1px;}
.KeCheng li{width: 98px;height: 149px;border-radius: 10px;border: 5px solid #fff;margin-bottom: 3px;margin-left: 2px;box-shadow: inset 0 1px 8px #666;
}
.KeCheng li p{font-family: 微软雅黑;color: #fff;font-size: 20px;width: 98px;height: 150px;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;
}运行结果：
怎么样？很有逼格吧！快去做一份属于你自己的课程表或日程表吧，你一定会惊叹自己创作的艺术品的！
