用HTML5制作课程表

最新推荐文章于 2024-05-20 15:43:39 发布

大雄@

最新推荐文章于 2024-05-20 15:43:39 发布

阅读量1.3w

点赞数 21

分类专栏： HTML5小练习

本文链接：https://blog.csdn.net/qq_44160107/article/details/94391062

版权

HTML5小练习专栏收录该内容

1 篇文章 1 订阅

订阅专栏

无论是上班族还是学生党，都需要一份类似课程表的表格来提醒我们的日程。有了它就可以不必担心自己忘记该干什么事情，到点了该干什么事情。它可以说是我们日常生活中经常接触的事物了，制作一份课程表也很简单，可以用纸写，可以在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;
}

运行结果：
在这里插入图片描述

怎么样？很有逼格吧！快去做一份属于你自己的课程表或日程表吧，你一定会惊叹自己创作的艺术品的！
在这里插入图片描述

大雄@

关注

21
点赞
踩
85

收藏

觉得还不错? 一键收藏
0
评论
用HTML5制作课程表

无论是上班族还是学生党，都需要一份类似课程表的表格来提醒我们的日程。有了它就可以不必担心自己忘记该干什么事情，到点了该干什么事情。它可以说是我们日常生活中经常接触的事物了，制作一份课程表也很简单，可以用纸写，可以在office里写，可以在一些软件上写等等……但是，你听说过用HTML5做的课程表吗？图1.用HTML5写的课程表怎么样，看起来还是很高大上的吧！制作这个表格也不难，只需要添加一些列...
复制链接

扫一扫