|
首先从中模式开始制作，制作好中模式以后，再以它为基础制作另外两个模式的页面，效果如图1所示。中视图模式的日历实例文件位于网页学习网CSS教程资源的“第10章\03\calendar-normal.htm”。  图1 中视图模式显示的日历 一、搭建HTML结构 按照传统的方法建立最简单的表格．包括建立表格的标题<caption>，以及利用<th>表示星期一到星期日，并给表格定义CSS类别．如下所示。在caption部分除了”2010年4月”这个标题之外，还有用于切换模式的文字链接。lodidance.com 折叠XML/HTML 代码复制内容到剪贴板
这里需要解释的是，在“星期一”到“星期日”这7个文字中，都分别把“星期”两个字放到span中了，这样做的目的是将来在小视图模式中，可以在不修改HTML代码的情况下通过CSS把所有的“星期”两字隐藏起来，效果参考上节效果图。 每天的日程放在具体的单元格中，并且定义各种CSS类型，previous和next分别表示上个月和下个月的日期，设置灰色背景和灰色日期文字以和当月的日期区分开；active用来表示有具体安排的日子，对于重要的日程安排，在li中设置jmportan娄别，以便后期用CSS做特殊样式。 上面的代码中，表格每行包含7个单元格。对于没有安排的单元格，仅输入一个日期数字即可；对于有安排的单元格，用ul列表排列各项日程安排。 依次建立好整个日历表格后，就可以开始加入CSS属性控制其样式风格了。 二、设置整体样式和表头样式 在建立好表格的框架结构后，开始编写CSS样式。 ① 首先添加对整个表格的控制，如下所示。 折叠CSS 代码复制内容到剪贴板
注意：需要特别注意上面的两条CSS样式。 ● “border-collapse:collapse;”的作用是使边框使用重合模式，从最终的效果图中可以看到相邻单元格之问的边框是重合在一起的。 ● “table-layout:fixed;”的作用是用圈定宽度的布局方式，使每一列的宽度都相等。 从图中可以看到，由于星期二这—列中没有任何日程安排，因此被挤得很窄。如果希望各列都一样宽，就需要使用固定布局方式，严格按照width属性来确定各列的宽度。 ② 设置<caption>和<th>的基本属性。 折叠CSS 代码复制内容到剪贴板
此时的表头部分已经初见效果，列名称中各个星期的样式都不再显得那么单调了。 三、设置日历单元格样式 现在来设置各个单元格的样式。整个表格中的单元格一共分为4种，即“普通的”、“有日程安排的”、“上个月的”和“下个月的”。后三者分别设置了active、previous和next类别，因此先对普通单元格进行设置，它也是后三者的所具有的“共性”样式基础。具体的步骤如下。 ① 对普通单元格进行设置，代码如下。 折叠CSS 代码复制内容到剪贴板
② 设置previous和next类别的“个性”属性。没有提到的属性都与前面的“共性”设置一致。这里仅将背景色设置为灰色，文字也设置为灰色，因为这几个单元格不是当月的内容，所以希望使它不容易引起访问者注意。 折叠CSS 代码复制内容到剪贴板
③ 设置有日程安排的单元格。这个设置的目的是使它比较醒目，因此设置了深色的边框，并设为2像素的粗边框。 折叠CSS 代码复制内容到剪贴板
此时的表格已经初见效果，表格和单元格的边框、上个月和下个月的日期单元格有灰色背景，当月单元格为白色。 注意：上面为td中的文本设置了line-height，即行高。这里设置的行高会对左上角的日期数字有效，也会对里面的Ii中的文本有效。之所以设置明确的行高，是因为后面的步骤中需要设置背景图像，而不同浏览器默认的行高有所不同，为了在不同浏览器中都能将两行文字正好放到背景图像中，就必须给出明确的行高，代替各浏览器的默认值。 ④ 对日程安排中的事情列表进行CSS控制，清除每个事件前面的小圆点，事件与事件之间添加一定的空隙，并设置背最图像，如下所示。lodidance.com 折叠CSS 代码复制内容到剪贴板
此时表格的样式结构已经基本定型。 注意:在li中的两处处置。 ● 高度（beight）设置为34像素，这正好是文字行高的两倍，文字行高在td中设置。 ● 把溢出（overfIow）设置为隐藏，以使显示不下的文字都隐藏起来。 ⑤ 把重要日程安排的背景设置为另外一个图片，代码如下。 折叠CSS 代码复制内容到剪贴板
这样，中模式的页面就制作完成了。 四、总结经验 对于这样的页面，文字、图像和边框等即使羞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 代码复制内容到剪贴板
|
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/738.html |
