简单日期控件的制作
2012-12-06 22:42
197 查看
日历的中视图模式制作
日期控件小模式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>日历的中视图模式制作</title> <style> .month{ border-collapse: collapse; table-layout: fixed; } .month caption{ text-align: left; font-family: normal 120% 宋体,arial; font-size: 12px; font-weight: normal; padding-bottom: 6px; } .month caption .data{ font-size: 150%; font-weight: bold; } .month th{ border: 1px solid #999; border-bottom: none; padding: 3px 2px 2px; margin: 0; background-color: #ADD; color: #333; font: 80% 宋体; } .month td{ border: 1px solid #AAA; font: 12px 宋体; line-height: 16px; padding: 2px 2px; margin: 0; vertical-align: top; } .month td.previous, .month td.next{ background-color: #eee; color: #A6A6A6; } .month td.active{ background-color: #B1CBE1; border: 2px solid #4682B4; } .month ul{ list-style-type: none; margin: 3px; padding: 0px; } .month li{ color: #fff; background: transparent url(images/level-2.gif) no-repeat; padding: 2px; margin-bottom: 6px; height: 34px; overflow: hidden; width: 100px; } .month td li.important{ background: transparent url(images/level-1.gif) no-repeat; } </style> </head> <body> <table class="month" summary="Calendar for 2007.10"> <caption><span class="date">2007年10月 </span> <a href="pages/css285.jsp">小模式</a> | <a>中模式</a> | <a href="calendar-large.html">大模式</a></caption> <tr> <th scope="col"><span>星期</span>一</th> <th scope="col"><span>星期</span>二</th> <th scope="col"><span>星期</span>三</th> <th scope="col"><span>星期</span>四</th> <th scope="col"><span>星期</span>五</th> <th scope="col"><span>星期</span>六</th> <th scope="col"><span>星期</span>日</th> </tr> <tr> <td class="previous">31</td> <td>1</td> <td class="active">2 <ul> <li class="important">完成书稿第2部分</li> <li>查Javascript相关资料相关资料</li> </ul> </td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td class="active">7 <ul> <li>检查案例实施进度</li> </ul> </td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td class="active">13 <ul> <li class="important">CSS禅意花园案例分析</li> <li>给Dave回复邮件</li> </ul> </td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td class="active">17 <ul> <li>artech.cn网站改版策划</li> </ul> </td> <td class="active">18 <ul> <li>录制CSS视频教程</li> <li>其他视频教程策划</li> </ul> </td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td class="active">26 <ul> <li>中关村图书大厦调研</li> </ul> </td> <td class="active">27 <ul> <li>西单图书大厦调研</li> <li>北京图书大厦调研</li> </ul> </td> </tr> <tr> <td>28</td> <td>29</td> <td >30 </td> <td class="active">31 <ul> <li class="important">准备出差资料</li> <li>整理硬盘文件资料</li> </ul> </td> <td class="next">1</td> <td class="next">2</td> <td class="next">3</td> </tr> </table> </body> </html>
日期控件小模式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>日期控件小模式</title> <style> .month{ border-collapse: collapse; table-layout: fixed; width: 245px; } .month caption{ text-align: left; font-family: normal 120% 宋体,arial; font-size: 12px; font-weight: normal; padding-bottom: 6px; } .month caption .data{ font-size: 150%; font-weight: bold; } .month th{ border: 1px solid #999; border-bottom: none; padding: 3px 2px 2px; margin: 0; background-color: #ADD; color: #333; font: 80% 宋体; } .month td{ border: 1px solid #AAA; font: 12px 宋体; line-height: 16px; padding: 2px 2px; margin: 0; vertical-align: top; } .month td.previous, .month td.next{ background-color: #eee; color: #A6A6A6; } .month td.active{ background-color: #B1CBE1; border: 2px solid #4682B4; } .month ul{ list-style-type: none; margin: 3px; padding: 0px; } .month li{ color: #fff; background: transparent url(images/level-2.gif) no-repeat; padding: 2px; margin-bottom: 6px; height: 34px; overflow: hidden; width: 100px; } .month td li.important{ background: transparent url(images/level-1.gif) no-repeat; } .month th span, .month ul{ display: none; } .month td.active:hover, .month td.hover{ background: aqua; } .month td.active:hover ul, .month td.hover ul{ display: block; position: absolute; border: 3px solid #FFF; background: #bde; margin: 10px 0px 0px; padding: 7px 2px 0px 5px; } </style> </head> <body> <table class="month" summary="Calendar for January 2007"> <caption><span class="date">2007年10月</span> <a >小模式</a> | <a href="calendar-normal.html">中模式</a> | <a href="calendar-large.html">大模式</a></caption> <tr> <th scope="col"><span>星期</span>一</th> <th scope="col"><span>星期</span>二</th> <th scope="col"><span>星期</span>三</th> <th scope="col"><span>星期</span>四</th> <th scope="col"><span>星期</span>五</th> <th scope="col"><span>星期</span>六</th> <th scope="col"><span>星期</span>日</th> </tr> <tr> <td class="previous">31</td> <td>1</td> <td class="active">2 <ul> <li class="important">完成书稿第2部分</li> <li>查Javascript相关资料相关资料</li> </ul> </td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td class="active">7 <ul> <li>检查案例实施进度</li> </ul> </td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td class="active">13 <ul> <li class="important">CSS禅意花园案例分析</li> <li>给Dave回复邮件</li> </ul> </td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td class="active">17 <ul> <li>artech.cn网站改版策划</li> </ul> </td> <td class="active">18 <ul> <li>录制CSS视频教程</li> <li>其他视频教程策划</li> </ul> </td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td class="active">26 <ul> <li>中关村图书大厦调研</li> </ul> </td> <td class="active">27 <ul> <li>西单图书大厦调研</li> <li>北京图书大厦调研</li> </ul> </td> </tr> <tr> <td>28</td> <td>29</td> <td >30 </td> <td class="active">31 <ul> <li class="important">准备出差资料</li> <li>整理硬盘文件资料</li> </ul> </td> <td class="next">1</td> <td class="next">2</td> <td class="next">3</td> </tr> </table> </body> </html>
相关文章推荐
- 通过继承制作简单的控件类
- asp.net日期控件,简单好用
- MFC透明控件的超级简单实现--发布日期:2008-05-14 00:44
- 制作OCX控件简单流程
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
- 制作简单的ascx用户控件
- 简单易用美观的日期及时间控件
- 简单ocx控件制作方法
- 日期控件-简单实用兼容好的js日期控件
- 简单的js日期控件
- Java制作的日期选择控件
- JQuery制作简单选择时间控件
- jQuery实现简单的日期输入格式化控件
- 如何使用Dojo的DatePicker控件制作联动日期选择器
- 一个简单的日期输入格式化控件。
- 一个简单横向javascript日期控件
- c# winform制作简单分页控件
- 快速制作Date日期控件
- 超级简单好用的JS日期控件
- JS制作简单的日历控件【JS Date对象操作实例演示】