HTML：如何創建日曆視圖？

我HTML/CSS初學者嘗試創建非常類似於微軟Outlook的設計日曆視圖，如下圖所示：HTML：如何創建日曆視圖？

到目前爲止，我得到了與下面的HTML/CSS日曆的基本輪廓：

<html> 
<head> 
    <title>August, 2016</title> 
</head> 
<body> 
    <center><h1>August, 2016</h1></center> 
    <style> 
     table{ 
      table-layout: fixed; 
     } 
    </style> 
    <table border="1" width="1250" height="800"> 
     <tr> 
      <th>Sun</th> 
      <th>Mon</th> 
      <th>Tue</th> 
      <th>Wed</th> 
      <th>Thur</th> 
      <th>Fri</th> 
      <th>Sat</th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
       <table> 
        <tr> 
         <td>1</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
           <a href="">Claim Benefits</a><br> 
           <a href="">Pick up groceries</a><br> 
           <a href="">Iron the shirts</a><br> 
           <a href="">+5 more...</a> 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td>2</td> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td> 
       <table> 
        <tr> 
         <td>5</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
           <a href="">Claim Benefits</a><br> 
           <a href="">Pick up groceries</a><br> 
           <a href="">Iron the shirts</a><br> 
           <a href="">+5 more...</a> 
         </td> 
        </tr> 
       </table> 

      </td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </table> 
</body> 
</html>

主要生產：

我要完成一些同樣的事情展望呢：

月份的日期編號應該在單元格的左上角。我試圖在單元格內創建一個表格，但它不太感覺或者看起來不錯。我直接嘗試重新創建Outlook的觀點以及他們設置日期編號和提醒的方式。
每個單元應保持相同的大小，同時包含最多4個超鏈接。在上面的代碼中，包含超鏈接的行的單元格比其他行的單元格更大。我想修正單元格大小，使所有單元格的大小相同，而不管它們是否包含最多4個超鏈接。

感謝您的任何有用的代碼或建議。

來源

2016-08-14 Jenna Maiz

一個簡單的方法來定位/設置與內容分開的日曆號碼是讓它們成爲僞元素td。您可以將內容設置爲attr(data-day)之類的內容，以使其在HTML中動態顯示數字集。
爲了確保單元具有相同的高度，只需在CSS中指定一個高度即可。由於您只需要「最多4個超鏈接」，因此您可以檢查具有4個鏈接的單元格的高度，然後使用它。

順便說一句，它看起來像有很多的錯誤，在你的代碼tr標籤，我會建議代表個人一天內所列出的元素列表，而不是嵌套表（該日曆是表格數據，但是當天的內容是待辦事項清單）。

下面是包括建議修改的一個片段：

table { 
 
    table-layout: fixed; 
 
    width: 1250px; 
 
    height: 800px; 
 
} 
 

 
table td { 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
table td:before { 
 
    content: attr(data-day); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: yellow; 
 
}

<center> 
 
    <h1>August, 2016</h1> 
 
</center> 
 
<table border="1"> 
 
    <tr> 
 
    <th>Sun</th> 
 
    <th>Mon</th> 
 
    <th>Tue</th> 
 
    <th>Wed</th> 
 
    <th>Thur</th> 
 
    <th>Fri</th> 
 
    <th>Sat</th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td data-day="1"> 
 
     <ul> 
 
     <li><a href="">Claim Benefits</a></li> 
 
     <li><a href="">Pick up groceries</a></li> 
 
     <li><a href="">Iron the shirts</a></li> 
 
     <li><a href="">+5 more...</a></li> 
 
     </ul> 
 
    </td> 
 
    <td data-day="2"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="3"></td> 
 
    <td data-day="4"></td> 
 
    <td data-day="5"></td> 
 
    <td data-day="6"></td> 
 
    <td data-day="7"></td> 
 
    <td data-day="8"></td> 
 
    <td data-day="9"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="10"></td> 
 
    <td data-day="11"></td> 
 
    <td data-day="12"> 
 
     <ul> 
 
     <li><a href="">Claim Benefits</a></li> 
 
     <li><a href="">Pick up groceries</a></li> 
 
     <li><a href="">Iron the shirts</a></li> 
 
     <li><a href="">+5 more...</a></li> 
 
     </ul> 
 
    </td> 
 
    <td data-day="13"></td> 
 
    <td data-day="14"></td> 
 
    <td data-day="15"></td> 
 
    <td data-day="16"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="17"></td> 
 
    <td data-day="18"></td> 
 
    <td data-day="19"></td> 
 
    <td data-day="20"></td> 
 
    <td data-day="21"></td> 
 
    <td data-day="22"></td> 
 
    <td data-day="23"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="24"></td> 
 
    <td data-day="25"></td> 
 
    <td data-day="26"></td> 
 
    <td data-day="27"></td> 
 
    <td data-day="28"></td> 
 
    <td data-day="29"></td> 
 
    <td data-day="30"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="31"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

來源

2016-08-14 18:32:02

我認爲你可以一個flot:left;樣式添加到這個月數，也許margin,padding:0;
我建議使用min-height具有相同的值的所有單元格的高度

來源

2016-08-14 18:10:21

首先，你還沒有添加任何風格，所以你離開，截至到瀏覽器的默認設置。此外，中心標籤已棄用。用這個代替：

h1 {text-align:center;}

對於表格，您可以添加這個方法，使邊界看起來像是展望的境界。

table, th, td {border-collapse: collapse;}

樣式表中的數據刪除padding和margin 。這應該將第一個tr中的第一個td移動到左上角。

最後，爲每週的行添加一個特定的高度。我會指定一個星期的類和任何你想要的高度風格：

tr.week {height:200px;}

來源

2016-08-14 19:08:09

HTML：如何創建日曆視圖？

回答

相關問題