用HTML写一个超级课程表页面

最新推荐文章于 2024-02-19 13:12:42 发布

Mr_jianghanlin

最新推荐文章于 2024-02-19 13:12:42 发布

阅读量4.7k

点赞数 10

分类专栏：前端文章标签： css3 html5 html

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/104746197

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

用HTML写一个超级课程表页面

首先给大家展示一下效果图，他家可以根据自己的喜好，换成自己喜欢的颜色
在这里插入图片描述
看到这个图可以把它肯成一个大的表格来进行做，将一些单元格进行相应的合并就可以达到上面所期望的图片效果，然后在用css选择器进行颜色的修饰，最终可以达到上图的效果。
下面我来一起看下代码部分：


<!DOCTYPE html>
<html>
<head>
   <title>课表</title>
   <style type="text/css">
       td,tr{
  /*       border: 1px solid red; */
        width: 35px;
        height: 35px; 
        font-size: 3px;
        table-layout: fixed;
        word-break:break-all;
        vertical-align: top;
        margin:0px;
        border:0px;
        padding: 0px;
        text-align: center;
      
     } 
     .one{width: 200px;
      text-align: center;}
      .green{
         background-color: rgb(175,236,53);
        color: white;
         
      }
      .green2{
         background-color: rgb(89,240,163);
        color: white;

      }
      .purple{
         background-color: rgb(171,145,255);
        color: white;

      }
      .red{
         background-color: rgb(255,147,147);
        color: white;

      }
      .white{
         background-color: rgb(234,239,245);
        color: white;

      }
   </style>
</head>
<body>
   <header>
      <table align="center">
         <tr>
            <td class="one"><font size="2px;">第三周</font><br>大二第二学期</td>
         </tr
        
      </table>
     </header>  
   <section>
      <table align="center">
         <tr>
            <td>3<br>月</td>
            <td>周一<br>
               <span>03/02</span></td>
            <td>周二<br>
               <span>03/03</td>
            <td>周三<br>
               <span>03/04</td>
            <td>周四<br>
               <span>03/05</td>
            <td>周五<br>
               <span>03/06</td>
            <td>周六<br>
               <span>03/07</td>
            <td>周日<br>
               <span>03/08</td>
         </tr>
         <tr>
            <td>1 <br>
               <span>8:00<br>8:45</span></td>
            <td rowspan="2"></td>
            <td rowspan="4" class="green2">视觉设计基础@三实验207</td>
            <td rowspan="2" class="purple">软件工程导论@5教南101</td>
            <td rowspan="2" class="red">电路与电子技术@5教南201</td>
            <td rowspan="2" class="white">[非本周]电路与电子技术@三实验</td>  
            <td rowspan="8" class="white">[非本周]UI界面设计@三实验楼209</td>
            <td rowspan="2"></td>
         </tr> 
         <tr>
            <td>2<br>
               <span>8:55<br>9:40</span></td>
         </tr>
         <tr>
            <td>3<br>
               <span>10:10<br>10:55</span></td>
            <td rowspan="2" class="green">操作系统@5教南201</td>
            <td rowspan="2" class="red">UI界面设计@5教南508</td>
            <td rowspan="2" class="white">[非本周]操作系统@三实验楼209</td>
            <td rowspan="2" class="green2">毛泽东死思想何中国特色社会主</td>
            <td rowspan="2"></td>

         </tr>
         <tr>
           <td>4<br>
               <span>11:05<br>11:50</span></td>
         </tr> 
         <tr>
           <td>5<br>
               <span>14:20<br>15:05</span></td>
            <td rowspan="2" class="red">电路与电子技术@5教倍301</td>
            <td rowspan="2"></td>
            <td rowspan="2" class="green2">毛泽东死思想何中国特色社会主</td>
            <td rowspan="2"></td>
            <td rowspan="2" class="purple">软件工程导论@一教307</td>
            <td rowspan="2"></td>
         </tr> 
         <tr>
           <td>6<br>
               <span>15:15<br>16:00</span></td>
         </tr>
          <tr>
            <td>7<br>
               <span>16:20 <br>17:05</span></td>
            <td rowspan="2" class=" white">[非本周]形势政策IV@五教</td>
            <td rowspan="2"></td>
            <td rowspan="2"></td>
            <td rowspan="2" class="white">[非本周]web前端高级技术@三实验</td>
            <td rowspan="2"  class="green">操作系统@八教低阶1</td>
            <td rowspan="2"></td>
         </tr>
         <tr>
            <td>8<br>
               <span>17:15<br>18:00</span></td>
         </tr>
         <tr>
            <td>9<br>
               <span>19:00 <br>19:45</span></td>
           <td rowspan="2" class="red">UI介面设计@三实验大楼209</td>
            <td rowspan="3" class="green2">photoshop图像处理@三实验大楼205</td>
            <td rowspan="3" class="green2">photoshop图像处理@三实验大楼205</td>
            <td rowspan="3" class="purple">web前端高级技术@三实验大楼209</td>
            <td rowspan="3"></td>
            <td rowspan="3" class="purple">web前端高级技术@三实验大楼209</td>
            <td rowspan="3"></td>
         </tr>
         <tr>
            <td>10<br>
               <span>19:55 <br>20:40</span></td>
         </tr>
         <tr>
            <td>11<br>
               <span>20:55 <br>21:40</span></td>
            <td></td>  
         </tr> 
      </table>
   </section>
</body>
</html>

在上述代码中我将代码分成了两大部分分别是：
header：通常表示页面中一个内容区域块或整个页面的标题
section：通常表示页面中的一个内容区块，比如章节，页眉或页面的其他部分

在上述代码中做的时候需要注意的是，单元格的宽度会随着里面的内容而改变，在下一个博客将讲解如何克服上述的问题。

Mr_jianghanlin

关注

10
点赞
踩
33

收藏

觉得还不错? 一键收藏
4
评论
用HTML写一个超级课程表页面

用HTML写一个超级课程表页面首先给大家展示一下效果图，他家可以根据自己的喜好，换成自己喜欢的颜色看到这个图可以把它肯成一个大的表格来进行做，将一些单元格进行相应的合并就可以达到上面所期望的图片效果，然后在用css选择器进行颜色的修饰，最终可以达到上图的效果。下面我来一起看下代码部分：<!DOCTYPE html><html><head> ...
复制链接

扫一扫