开发者社区> 问答> 正文

HTML5与CSS3如何显示一个日历的布局?

1.要布局达到这个效果,不知道如何布局,唯一的思路是用”table“布局。

                                                                           ![screenshot](https://oss-cn-hangzhou.aliyuncs.com/yqfiles/431554018b3b71d4644043e94088329b3dbe9a42.png)

2.谁有类似的源代码或者链接,求给一份。

展开
收起
杨冬芳 2016-06-13 13:44:58 2966 0
1 条回答
写回答
取消 提交回答
  • IT从业

    之前做过一个日历,没有用table,用的是div浮动。关键在于二月份的天数:

    function getFebruary(year) {
    //返回二月天数

    return (year%100==0) ? (year%400==0?29:28) : (year%4==0?29:28);

    }
    //当前年份下每月的天数
    var monthL = [31,getFebruary(curYear),31,30,31,30,31,31,30,31,30,31];

    获取当前年份当前月份第一天的星期。比如这个月第一天是星期四,这个月有31天,使用div,div加样式float: left;,使用循环先排出4天,div(星期日、一、二、三)里面不填数字,因为这个月第一天是星期四。然后再使用循环在div里填出1-31日。

    设置好每个div和日历总的宽度,每一行排满以后它会自动排第二行。如果用table,还需要计算每个月的日历有多少行,反而更加繁琐。

    2019-07-17 19:35:45
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载