使用CSS/HTML創建每週時間表

我正在嘗試爲瑜伽工作室創建每週的課程時間表。使用CSS/HTML創建每週時間表

~~http://www.studioleisure.com/classes.php~~

~~注：^^本網頁上現在包括了使用這個問題的答案創建完成的HTML版本我一直在使用一個表，你可以看到在創建靜態版本。~~

我有類的問題，開始在15分鐘過去一小時或持續時間超過一個小時，這是很難創建此版本的PHP。

我只是想知道是否有人有任何想法來創建一個將有相似的外觀，但更容易編碼的PHP。

來源

2011-01-12 Max

什麼是「PHP」應該完成的事情？ – 2011-01-12 12:20:53

我希望時間表的數據來自數據庫 – Max 2011-01-12 12:21:54

目前看起來很好。 – 2011-01-12 12:23:46

我會丟掉表格，只使用列。然後，我會用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>

來源

2011-01-12 12:26:30 polarblau

不錯的標記。但是你是對的 - 以精細的粒度來做這件事會導致表格中的怪物（以及隨之產生的代碼）。這是可行的，但有一個更簡單的方法，雖然它不是那麼整齊：

按照通常的方式創建表，但將其設爲空。但是，爲每個行和列設置固定的寬度/高度。然後使用絕對定位將日曆條目置於表的頂部。 Presto - 它看起來是一樣的，但如果你願意的話，你可以用精確的條目來放置條目。

這樣做的缺點是複製粘貼對這個野獸不起作用（很好），我不知道它會爲搜索引擎優化和可訪問性做什麼。可能沒什麼好。所以，如果這兩個對你很重要，你將不得不採取解決方法（雖然我認爲有方法可以使用和具有良好的搜索引擎優化/可訪問性）。

加：哦，我剛剛意識到，你也將不得不留意溢出的文本。表單元格會自動擴展，但絕對定位的DIV不會。

加2：嘿，這裏有一個想法：使用相對定位來移動一些條目。不是直接在單元格中寫入文本，而是將它們寫入SPAN中，然後相對放置它，使其向下移動所需的15分鐘。這又要求固定的寬度和高度的單元格，溢出將是一個問題，但搜索引擎優化/可訪問性不會受到傷害，複製粘貼將按預期工作。

來源

2011-01-12 12:26:01

以下是我創建了一個每週時間表模板。

https://github.com/NisalSP9/Weekly-time-schedule-template-jquery

這就是它的運行示例。

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111

來源

2017-10-03 05:57:30

使用CSS/HTML創建每週時間表

回答

相關問題