您当前位置：首页 > web前端 > htmlcss > 如何用纯CSS打造一个弹性日历

如何用纯CSS打造一个弹性日历

来源：程序员人生发布时间：2014-02-21 02:59:19 阅读次数：4303次

　　传统的日历是在一张页面划分出几个格子.作为一个网页设计师,你有权利用表格来做出效果,我也不会说你错了.

　　那么做为一个标准的WEB设计师来说,遵守WEB的标准好处是不言而语的.那么我们来看下如何使用CSS来做出一个有弹性的日历表出来--为什么说是有弹性的,因为日历的大小可以随着浏览器自动调整.

三个有序列表(ol)

我们来回想一下日历的格式,显然一个月的日历并不是单一的有序列表,而是有三个.为什么说是有三个,别急我们往下看.我们在看日历表的时候,是不是会看到每个月的一号不一定是从星期一开始,最后一号是以星期天结束的.因此在每个月的日期前后各加一个有序例表.(现在知道了吧,不知道的面避去^_^)

下面是CSS样式表：

/*
* CSS Calendar
* Tim Wright
* Chris Coyier
-----------------------------*/

* {margin:0;padding:0;}
body {font:1em/1.4 Verdana, Arial, Helvetica, sans-serif;
background: url(images/bg.jpg) top center no-repeat #545454;}
body * {display:inline;}
ol.calendar {width:52em;margin:0 auto;display:block; min-height: 200px;
background: url(images/tl.png) top left no-repeat; padding: 12px 0 0 20px;}
li {list-style:none;}
p.link {text-align:center;display: block;}
h1 {display: block; width: 200px;height:76px;
background:url(images/july.png);text-indent:-9999px; margin: 15px auto; }

/*
* Day styles
-------------------------*/
li li {width:6em;height:6em;float:left;margin:.2em; padding:.2em;overflow:auto;
background: url(images/day-bg.png) bottom right no-repeat; }

/*
* Day content (UL/OL & P)
-------------------------*/
li li p {font-size:.7em;display:block;}
li li ol {width:auto;}
li li ul li,
li li ol li {font-size:.7em;display:block;height:auto;width:auto; background: none;
margin:0;padding:.2em 0;float:none;}

/*
* Holiday class
-------------------------*/
li li.holiday { }

/*
* Inactive months
-------------------------*/
li#lastmonth li,
li#nextmonth li { background: url(images/day-bg-inactive.png);}

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>Elastic CSS Calendar</title><link rel="stylesheet" type="text/css" href="http://www.wfuyu.com/uploads/allimg/0912/rili/calendar.css"/></head><body><h1>← July →</h1><ol class="calendar" start="6"><li id="lastmonth"><ul start="29"><li>29</li><li>30</li></ul></li><li id="thismonth"><ul><li>1</li><li>2</li><li>3</li><li class="holiday">4 <p>You can use a paragraph element in here</p></li><li>5</li><li>6</li><li>7</li><li>8</li><li>9 <ul><li>Or using an unordered list</li><li>will work just fine</li></ul></li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17<ol><li>maybe you need an ordered list?</li><li>That is ok too</li><li>even when you have too much stuff to do!</li></ol></li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul></li><li id="nextmonth"><ul><li>1</li><li>2</li></ul></li></ol></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 谷歌热榜“上升最快关键词”连续八天未更新

下一篇 一招破解混淆后的JavaScript代码

分享到:

------分隔线----------------------------