Question

我正在尝试为瑜伽工作室创建每周课程时间表。我使用表创建了一个静态版本，您可以在以下位置看到：

<击> http://www.studioleisure.com/classes.php

~~注意：^^此网页现在包含使用此问题的答案创建的已完成的HTML版本。~~

我遇到的问题是从一小时后的15分钟开始的课程或持续时间超过一小时的课程，而且为这个版本创建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>

Answer 2

好的标记。但是你是对的 - 以精细的粒度执行此操作将导致表格的怪物（以及生成它的附带代码）。它是可行的，但有一种更简单的方法，虽然它不是那么整洁：

像往常一样创建表格，但将其设为空。但是，为每行和每列设置固定的宽度/高度。然后使用绝对定位将日历条目放在表格上。 Presto - 它看起来是一样的，但如果你愿意的话，你可以精确地放置条目。

这样做的缺点是复制粘贴在这个野兽上不会起作用（非常好），我不知道它将如何为SEO和可访问性做些什么。可能没什么好处的。因此，如果这两个对您很重要，您将不得不求助于解决方法（尽管我认为有一些方法可以使用该方案 AND 具有良好的搜索引擎优化/可访问性）。

已添加：哦，我刚刚意识到你还需要注意溢出的文字。表格单元格会自动扩展，但绝对定位的DIV不会。

已添加2：嘿，这是一个想法：使用相对定位来稍微移位条目。不是直接在单元格中写入文本，而是将它们写入SPAN中，然后相对定位，使其向下移动必要的15分钟。再次，这需要固定的宽度和单元格的高度，溢出将是一个问题，但SEO /可访问性不会受到伤害，复制粘贴将按预期工作。

Answer 3

以下是我创建的每周时间表模板。

@subcategory.products

这就是它的例子。

public class GameHub : Hub
{
    public void AcceptRequest()
    {
        Clients.Client("connectionId").StartYourTurn();
    }

    public void Action(string id)
    {
           // player calls this method and I save it in a db.
    }
}

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

3 个答案: