首页 > 代码库 > 10.6 制作月历中视图模式

10.6 制作月历中视图模式

2024-07-08 21:15:43   228人阅读

首先从中模式开始制作，制作好中模式以后，再以它为基础制作另外两个模式的页面，效果如图1所示。中视图模式的日历实例文件位于网页学习网CSS教程资源的“第10章\03\calendar-normal.htm”。

图1 中视图模式显示的日历

图1 中视图模式显示的日历

一、搭建HTML结构

按照传统的方法建立最简单的表格．包括建立表格的标题<caption>，以及利用<th>表示星期一到星期日，并给表格定义CSS类别．如下所示。在caption部分除了”2010年4月”这个标题之外，还有用于切换模式的文字链接。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <table class="month" summary="Calendar for 2007.10">  
  2.     <caption><span class="date">2011年4月 </span> <a href="calendar-small.html">小模式</a> | <a>中模式</a> | <a href="calendar-large.html">大模式</a></caption>  
  3.     <tr>  
  4.         <th scope="col"><span>星期</span>一</th>  
  5.         <th scope="col"><span>星期</span>二</th>  
  6.         <th scope="col"><span>星期</span>三</th>  
  7.         <th scope="col"><span>星期</span>四</th>  
  8.         <th scope="col"><span>星期</span>五</th>  
  9.         <th scope="col"><span>星期</span>六</th>  
  10.         <th scope="col"><span>星期</span>日</th>  
  11.     </tr>  
  12.     <tr>  
  13.         <td class="previous">31</td>  
  14.         <td>1</td>  
  15.         <td class="active">2   
  16.         <ul>  
  17.             <li class="important">完成教程第2部分</li>  
  18.             <li>查Javascript相关资料相关资料</li>  
  19.         </ul>  
  20.         </td>  
  21.         <td>3</td>  
  22.         <td>4</td>  
  23.         <td>5</td>  
  24.         <td>6</td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td class="active">7   
  28.         <ul>  
  29.             <li>检查案例实施进度</li>  
  30.         </ul>  
  31.         </td>  
  32.         <td>8</td>  
  33.         <td>9</td>  
  34.         <td>10</td>  
  35.         <td>11</td>  
  36.         <td>12</td>  
  37.         <td class="active">13   
  38.         <ul>  
  39.             <li class="important">CSS禅意花园案例分析</li>  
  40.             <li>给Dave回复邮件</li>  
  41.         </ul>  
  42.         </td>  
  43.     </tr>  
  44.     <tr>  
  45.         <td>14</td>  
  46.         <td>15</td>  
  47.         <td>16</td>  
  48.         <td class="active">17   
  49.         <ul>  
  50.             <li>lodidance.com网站改版策划</li>  
  51.         </ul>  
  52.         </td>  
  53.         <td class="active">18   
  54.         <ul>  
  55.             <li>录制CSS视频教程</li>  
  56.             <li>其他视频教程策划</li>  
  57.         </ul>  
  58.         </td>  
  59.         <td>19</td>  
  60.         <td>20</td>  
  61.     </tr>  
  62.     <tr>  
  63.         <td>21</td>  
  64.         <td>22</td>  
  65.         <td>23</td>  
  66.         <td>24</td>  
  67.         <td>25</td>  
  68.         <td class="active">26   
  69.         <ul>  
  70.             <li>中关村图书大厦调研</li>  
  71.         </ul>  
  72.         </td>  
  73.         <td class="active">27   
  74.         <ul>  
  75.             <li>西单图书大厦调研</li>  
  76.             <li>北京图书大厦调研</li>  
  77.         </ul>  
  78.         </td>  
  79.     </tr>  
  80.     <tr>  
  81.         <td>28</td>  
  82.         <td>29</td>  
  83.         <td >30   
  84.         </td>  
  85.         <td class="active">31   
  86.             <ul>  
  87.             <li class="important">准备出差资料</li>  
  88.             <li>整理硬盘文件资料</li>  
  89.             </ul>  
  90.         </td>  
  91.            
  92.         <td class="next">1</td>  
  93.         <td class="next">2</td>  
  94.         <td class="next">3</td>  
  95.     </tr>  
  96. </table>  

这里需要解释的是，在“星期一”到“星期日”这7个文字中，都分别把“星期”两个字放到span中了，这样做的目的是将来在小视图模式中，可以在不修改HTML代码的情况下通过CSS把所有的“星期”两字隐藏起来，效果参考上节效果图。

每天的日程放在具体的单元格中，并且定义各种CSS类型，previous和next分别表示上个月和下个月的日期，设置灰色背景和灰色日期文字以和当月的日期区分开；active用来表示有具体安排的日子，对于重要的日程安排，在li中设置jmportan娄别，以便后期用CSS做特殊样式。

上面的代码中，表格每行包含7个单元格。对于没有安排的单元格，仅输入一个日期数字即可；对于有安排的单元格，用ul列表排列各项日程安排。

依次建立好整个日历表格后，就可以开始加入CSS属性控制其样式风格了。

二、设置整体样式和表头样式

在建立好表格的框架结构后，开始编写CSS样式。

① 首先添加对整个表格的控制，如下所示。

折叠CSS 代码复制内容到剪贴板
  1. .month {   
  2.     border-collapse: collapse;   
  3.     table-layout:fixed;   
  4.     width:780;   
  5. }

注意：需要特别注意上面的两条CSS样式。

● “border-collapse:collapse;”的作用是使边框使用重合模式，从最终的效果图中可以看到相邻单元格之问的边框是重合在一起的。

● “table-layout:fixed;”的作用是用圈定宽度的布局方式，使每一列的宽度都相等。

从图中可以看到，由于星期二这—列中没有任何日程安排，因此被挤得很窄。如果希望各列都一样宽，就需要使用固定布局方式，严格按照width属性来确定各列的宽度。

② 设置<caption>和<th>的基本属性。

折叠CSS 代码复制内容到剪贴板
  1. .month caption {   
  2.     text-align: left;   
  3.     font-family: normal 120% 宋体, arial;   
  4.     font-size:12px;   
  5.     font-weight:normal;   
  6.     padding-bottom: 6px;   
  7. }   
  8.   
  9. .month caption .date{   
  10.     font-size:150%;   
  11.     font-weight:bold;   
  12. }   
  13.   
  14. .month th {   
  15.     border: 1px solid #999;   
  16.     border-bottom: none;   
  17.     padding: 3px 2px 2px;   
  18.     margin:0;   
  19.     background-color: #ADD;   
  20.     color: #333;   
  21.     font: 80% 宋体;   
  22. }

此时的表头部分已经初见效果，列名称中各个星期的样式都不再显得那么单调了。

三、设置日历单元格样式

现在来设置各个单元格的样式。整个表格中的单元格一共分为4种，即“普通的”、“有日程安排的”、“上个月的”和“下个月的”。后三者分别设置了active、previous和next类别，因此先对普通单元格进行设置，它也是后三者的所具有的“共性”样式基础。具体的步骤如下。

① 对普通单元格进行设置，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .month td {   
  2.     border: 1px solid #AAA;   
  3.     font: 12px 宋体;   
  4.    line-height:16px;   
  5.     padding: 2px 2px;   
  6.     margin:0;   
  7.     vertical-align: top;   
  8. }

② 设置previous和next类别的“个性”属性。没有提到的属性都与前面的“共性”设置一致。这里仅将背景色设置为灰色，文字也设置为灰色，因为这几个单元格不是当月的内容，所以希望使它不容易引起访问者注意。

折叠CSS 代码复制内容到剪贴板
  1. .month td.previous, .month td.next {   
  2.     background-color: #eee;   
  3.     color: #A6A6A6;   
  4. }

③ 设置有日程安排的单元格。这个设置的目的是使它比较醒目，因此设置了深色的边框，并设为2像素的粗边框。

折叠CSS 代码复制内容到剪贴板
  1. .month td.active {   
  2.     background-color: #B1CBE1;   
  3.     border: 2px solid #4682B4;   
  4. }

此时的表格已经初见效果，表格和单元格的边框、上个月和下个月的日期单元格有灰色背景，当月单元格为白色。

注意：上面为td中的文本设置了line-height，即行高。这里设置的行高会对左上角的日期数字有效，也会对里面的Ii中的文本有效。之所以设置明确的行高，是因为后面的步骤中需要设置背景图像，而不同浏览器默认的行高有所不同，为了在不同浏览器中都能将两行文字正好放到背景图像中，就必须给出明确的行高，代替各浏览器的默认值。

④ 对日程安排中的事情列表进行CSS控制，清除每个事件前面的小圆点，事件与事件之间添加一定的空隙，并设置背最图像，如下所示。lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. .month ul {   
  2.     list-style-type: none;   
  3.     margin: 3px;   
  4.     padding:0;   
  5. }   
  6.   
  7. .month li {   
  8.     color:#fff;   
  9.    background:transparent url(level-2.gif) no-repeat;   
  10.    padding:2px;   
  11.     margin-bottom: 6px;   
  12.     height:34px;   
  13.     overflow:hidden;   
  14.     width:100px;   
  15. }

此时表格的样式结构已经基本定型。

注意:在li中的两处处置。

● 高度（beight）设置为34像素，这正好是文字行高的两倍，文字行高在td中设置。

● 把溢出（overfIow）设置为隐藏，以使显示不下的文字都隐藏起来。

⑤ 把重要日程安排的背景设置为另外一个图片，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. .month td li.important{   
  2.    background:transparent url(level-1.gif) no-repeat;   
  3. }

这样，中模式的页面就制作完成了。

四、总结经验

对于这样的页面，文字、图像和边框等即使羞1个像素，也会影响最终的技果，因此需要精细的调整，一点一点尝试，而且要在不同的浏览器上进行测试。这里有两点经验，供读者参考。

(1) 当一个效果在Firefox和IE 6中显示得不一样时，一般来说Firefox显示的是“正确”的效果。这里说的正确，并不是指主观希望的效果达到了就是正确效果，而是说按照真正的CSS规则，应该显示的效果才叫作正确的效果。也就是说，如果Firefox中显示的效果和希望的效果吻合，而与IE显示不吻合，那么是IE有错误的可能性更大；而反之则说明很可能是为了迁就IE 6的错误，而写了错误的代码。

那么为什么不能IXIE为标准，把IE的效果当作是正确的呢？这是因为，CSS的规则本身是严格符合逻辑的，是可以计算和预测的，而IE中的很多错误是没有道理的，无法预测的，只是用一个小的错误修正了另一个小的错误，在局部看起来可能效果是正确的，但是很可能在其他地方，或者更大范围内带来不可预知的麻烦，从而严重影响效率。因此，比较好的做法是以Firefox作为正确的效果，想办法让IE来适应它。

(2) 测试的时候，不要在一个浏览器中完全做好后，再用另一个浏览器测试。对于一个很复杂的页面，如果先在Firefox中制作并完全测试好了，然后用IE查看时，可能很多地方都是混乱的，此时再针对IE进行一系列调整，等调整好了，回到Firefox查看时，肯定又乱了。如此往复，结果可想而知。因此，应从空白页面开始。每馓一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，就立即查找原因，寻找解决办法。这样做到最后就可以同时满足各种浏览器了。

已完成的这个中视图模式页面中，每一列的宽是固定的，每个单元的高度是根据内容自动伸展的。例如在某一天中增加多个活动安排，该单元格就会变高，并且它所在的一整行都会一起变高，这是表格的本身性质决定的。

例如，要在27日增加一项活动，只需要增加一行代码就可以实现。

折叠XML/HTML 代码复制内容到剪贴板
  1. <td class="active">27   
  2. <ul>  
  3.     <li>西单图书大厦调研</li>  
  4.     <li>北京图书大厦调研</li>  
  5.     <li>完成网页学习网CSS教程</li>  
  6. </ul>  
  7. </td>

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/738.html


联系
我们