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

最新推荐文章于 2024-10-10 10:07:49 发布

Mr_jianghanlin

最新推荐文章于 2024-10-10 10:07:49 发布

阅读量5k

点赞数 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>