您當前位置：首頁 > web前端 > htmlcss > 如何用純CSS打造一個彈性日歷

如何用純CSS打造一個彈性日歷

來源：程序員人生發布時間：2014-02-21 02:59:19 閱讀次數：4485次

　　傳統的日歷是在一張頁面劃分出幾個格子.作為一個網頁設計師,你有權利用表格來做出效果,我也不會說你錯了.

　　那么做為一個標準的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.jyygyx.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.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 谷歌熱榜“上升最快關鍵詞”連續八天未更新

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

分享到:

------分隔線----------------------------

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

如何用純CSS打造一個彈性日歷