html - 使用 CSS/HTML 创建每周时间表

Question

我正在尝试为 Yaga 馆创建每周类(class)时间表。 我已经使用您可以在以下位置看到的表格创建了一个静态版本:

<罢工> http://www.studioleisure.com/classes.php

注意:^^ 此网页现在包含使用此问题的答案创建的最终 HTML 版本。

我对在一小时后 15 分钟开始的类(class)或持续时间超过一个小时的类(class)有疑问，结果证明为此版本创建 PHP 非常困难。

我只是想知道是否有人有任何想法来创建一个具有相似外观但更容易为其编写 PHP 代码的程序。

Answer 1

我会松开表格，只使用列。然后，我将使用 CSS (position:absolute) 放置类，并根据它们的开始时间计算 top 值，并根据它们的长度计算“高度”。水平线可以使用重复的背景图像来实现。左侧标签的放置方式与您放置类的方式相同。

HTML 可能看起来像这样:

<ul>
 <!-- Monday: -->
 <li>
  <strong>Monday</strong>
  <ul class="classes">
   <li style="top:200px; height:100px;">
    <span>10:30 - 11:45</span>
    Class title
   </li>
   <li>
    <!-- More classes here... -->
   </li>
  </ul>
 </li>
 <li>
  <!-- Other days here... -->
 </li>
</ul>
<ul class="labels">
 <li style="top:180px">10:00</li>
 <!-- More labels here... -->
</ul>