The traditional calendar is to divide several grids on a page. As a web designer, you have the right to use tables to make effects, and I won't say you are wrong.
As a standard WEB designer, the advantage of complying with the standards of the WEB is to speak without words. let's take a look at how to use CSS to make an elastic calendar table-why is it flexible, because the calendar size can be automatically adjusted with the browser.
Three ordered lists (ol)
Let's look back at the calendar format. Obviously, a calendar month does not have a single ordered list, but three. why are there three? Don't worry. Let's look down. when we look at the calendar table, do we see that the first day of each month does not necessarily start from Monday, and the last one ends on Sunday. therefore, an ordered example table is added before and after the date of each month. (Now I know. If I don't know it, I can avoid it)
Copy to ClipboardReference: [www.bkjia.com] <ol class = "calendar" start = "6">
<Li id = "lastmonth">
<Ol start = "29">
<Li> 29 </li>
<Li> 30 </li>
</Ol>
</Li>
<Li id = "thismonth">
<Ol>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
<Li> 6 </li>
<Li> 7 </li>
<Li> 8 </li>
<Li> 9 </li>
<Li> 10 </li>
<Li> 11 </li>
<Li> 12 </li>
<Li> 13 </li>
<Li> 14 </li>
<Li> 15 </li>
<Li> 16 </li>
<Li> 17 </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>
</Ol>
</Li>
<Li id = "nextmonth">
<Ol>
<Li> 1 </li>
<Li> 2 </li>
</Ol>
</Li>
</Ol>
The following is a CSS style sheet:
Copy to ClipboardReference: [www.bkjia.com]/*
* 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 {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 p {font-size:. 7em; display: block ;}
Li ol {width: auto ;}
Li ul 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. holiday {}
/*
* Inactive months
-------------------------*/
Li # lastmonth li,
Li # nextmonth li {background: url (images/day-bg-inactive.png );}
Demo:
<! 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.bkjia.com/ Uploads/allimg/0912/rili/calendar.css "/>
Tip: the code can be modified before running!