下沙服装摄影教你用纯CSS打造日历效果!.pdfVIP

下沙服装摄影浩图瀚视教你用纯CSS打造日历效果！ 很多网页上的日历都是jsp制作的，很好看，但是不利于网站的优化。但 你知道只用CSS也能打造好看的日历效果吗？下面是我写的一些代码，把链接和 内容改下即可！ html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleCSS日历显示效果 /title link rel=stylesheet type=text/css href=calendar.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);} /head body h1larr; July rarr;/h1 ol class=calendar start=6 li id=lastmonth ul start=29 li29/li li30/li /ul /li li id=thismonth ul li1/li li2/li li3