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：如何创建日历视图？

回答

相关问题