Question

我是HTML / CSS初学者，试图创建非常类似于Microsoft Outlook设计的日历视图，如下所示：

到目前为止，我使用以下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相同的事情：

月份数字应位于单元格的左上角。我尝试用单元格内的表创建它，但它感觉不太好或看起来不对劲。我正在直接尝试重新创建Outlook的视图以及他们在其下方设置日期编号和提醒的方式。
每个单元格应保持相同的大小，同时包含最多4个超链接。在上面的代码中，包含超链接的行的单元格变得比其他行的单元格大。我想修复单元格大小，使得所有单元格大小相同，无论它们是否包含多达4个超链接。

感谢您提供任何有用的代码或建议。

Answer 1

我认为你可以为这个月号添加flot:left;样式，也许margin,padding:0;
我建议min-height使用与所有单元格高度相同的值

Answer 2

首先，您尚未添加任何样式，因此您将其保留为浏览器的默认值。此外，不推荐使用中心标记。请改用：

h1 {text-align:center;}

对于表格，您可以添加此选项以使边框显示为Outlook的边框：

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

要设置表格数据的样式，请删除填充和边距。这应该将第一个tr中的第一个td移动到左上角。

最后，为每周的行添加特定高度。我会把那个tr分配给你想要的任何高度的星期和风格：

tr.week {height:200px;}

HTML：如何创建日历视图？

2 个答案: