3行CSS代码实现日历界面

日历组件大家应该很熟悉了，但你想过如何实现日历的界面布局吗?最容易想到的方法是用 table布局，毕竟它在视觉上跟表格类似。但是从现代 CSS 的角度来说，table多用来展示列表数据，而不是用作布局方案。因为它需要很多额外的 DOM 元素，而且样式控制上也不够灵活。另一种方法是用 flex布局，这也算是 CSS3 给我们带来的福利，让界面布局工作简化了许多。

成都创新互联是一家以网站建设公司、网页设计、品牌设计、软件运维、网站推广、小程序App开发等移动开发为一体互联网公司。已累计为火锅店设计等众行业中小客户提供优质的互联网建站和软件开发服务。

本文打算介绍一种更简单的方法，只需要 3 行核心 CSS 代码即可实现日历界面!你可能猜到了，它就是 Grid布局。

先看 HTML 部分：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    Decemeber
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.     一
    5. 
  
  
  
  
  5.     二
    6. 
  
  
  
  
  6.     三
    7. 
  
  
  
  
  7.     四
    8. 
  
  
  
  
  8.     五
    9. 
  
  
  
  
  9.     六
    10. 
  
  
  
  
  10.     日
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.     1
    13. 
  
  
  
  
  13.     
  14. 2
    15. 
  
  
  
  
  15.     
  16. 3
    17. 
  
  
  
  
  17.     
    18. 
  
  
  
  
  18.     
  19. 29
    20. 
  
  
  
  
  20.     
  21. 30
    22. 
  
  
  
  
  22.     
  23. 31
    24. 
  
  
  
  
  24.   
    25.

为简单起见，这里把一周七天和日期全都放进一个列表里了。CSS 代码更简单了：

 
 
 
 
    
  
  
  
  
  1. .calendar {
    2. 
  
  
  
  
  2.   display: grid; // 1
    3. 
  
  
  
  
  3.   grid-template-columns: repeat(7, 1fr);  // 2
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. .first-day {
    6. 
  
  
  
  
  6.   grid-column-start: 2; // 3
    7. 
  
  
  
  
  7. }
    8.

稍微解释下，第一行就是将列表声明为grid容器。第二行的属性 grid-template-columns用来设置每列的宽度。一周有 7 天，因此需要 7 列。也可以这样写：

 
 
 
 
    
  
  
  
  
  1. grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    2.

或者

 
 
 
 
    
  
  
  
  
  1. grid-template-columns: 40px 40px 40px 40px 40px 40px 40px;
    2.

是不是显得重复啰嗦?所以有了 repeat()简写方法，用于定义多个等宽的列就方便多了。这里的1fr 是新的 CSS 弹性长度单位，具体用法可以参考 [https://www.w3.org/TR/css3-grid-layout/#fr-unit]。

最后，由于大部分月份的 1 号并不是周一，所以要用grid-column-start属性设置1号这个单元格的位置。

Bingo!一个极简日历就完成了!

极简日历

当然了，头部的背景色还是需要额外代码的，但这不是关键所在。想要了解更多关于强大的 CSS Grid 布局的知识，推荐参考 MDN 文档 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout]

 本文转载自微信公众号「1024译站」，可以通过以下二维码关注。转载本文请联系1024译站公众号。

网页名称：3行CSS代码实现日历界面
URL分享：http://www.hantingmc.com/qtweb/news25/506575.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设知识

同城分类信息

成都网络营销　　 　虚拟主机　　 　成都发电机维修　　 　成都网站排名　　 　美美搬家　　 　服务器租用　　 　彭州网站建设　　 　香港主机　　 　官网SEO排名　　 　微信小程序　　 　成都网络营销公司　　 　成都全网营销　　 　重庆电商网站建设　　 　高端网站建设　　 　成都网络公司　　 　凯亚自动化控制　　 　帝美豪门窗　　 　成都响应式网站建设　　 　成都电信服务器托管　　 　香港云主机