1 min read

日历模块CSS及注释 @ http://hi.baidu.com/%B0%D9%B6%C8%BF%D5%BC%E4

亲爱的hier们:

上周日历模块上线后很多朋友希望能得到日历模块css代码,下面是日历模块css代码及注释,希望大家能设计出更炫更酷的日历~

div#cals{background-color:#FFFFFF;border:1px solid #CCC;text-align:center;width:100%;padding:2px}/*日历主体背景、边框*/
div#cals .cal_body,#cals .cal_mth{font-family:Arial;font-size:12px;width:100%;}/*除年月控制器外的日期部分,包括周和一般日期*/
div#cals .cal_yr table{width:30px}/*年、月表格*/
div#cals .cal_yr td{font-size:12px;background:none;padding:1px;white-space:nowrap;line-height:15px}/*年、月单元格*/
div#cals .cal_yr .cal_pre{font-size:8px;background:url(http://img.baidu.com/hi/img/date/pre.gif) no-repeat center center;padding-left:10px}/*上一月箭头(正常)*/
div#cals .cal_yr .cal_nxt{font-size:8px;background:url(http://img.baidu.com/hi/img/date/nxt.gif) no-repeat center center;padding-left:10px}/*下一月箭头(正常)*/
div#cals .cal_yr .cal_pre_ovr{font-size:8px;background:url(http://img.baidu.com/hi/img/date/pre_ovr.gif) no-repeat center center;padding-left:10px;cursor:pointer}/*上一月箭头(鼠标悬停)*/
div#cals .cal_yr .cal_nxt_ovr{font-size:8px;background:url(http://img.baidu.com/hi/img/date/nxt_ovr.gif) no-repeat center center;padding-left:10px;cursor:pointer}/*下一月箭头(鼠标悬停)*/

div#cals tr{}
div#cals td{text-align:center;font-family:Arial;font-size:12px;padding:3px;line-height:14px;white-space:nowrap}/*日期*/
div#cals .today{padding:2px;border:1px solid #fca;background:#fff4cc;font-weight:bold;}/*今日*/
div#cals .cal_week td{font-weight:bold;font-size:12px;font-family:Tahoma}/*周*/
div#cals .cal_date{color:#000000}/*普通日期*/
div#cals .cal_sa{color:#000066}/*周六标题样式*/
div#cals .cal_su{color:#000066}/*周日标题样式*/
div#cals .not_come{color:#333}/*今日之后的日期*/
div#cals .cal_before,#cals .cal_after{visibility:hidden}/*除当前月之外的日期*/
div#cals *.cal_active{color:#0000CC;text-decoration:underline;font-weight:bold;}/*有更新的日期效果*/
div#cals *.cal_select{padding:2px;border:1px solid #d6d6d6;background-color:#eeeeee;color:#0000cc;text-decoration:underline} /*有更新的日期鼠标移上效果*/
div#cals .yr_normal,#cals .mth_normal{border:1px solid #FFF;line-height:14px;}/*年、月选择器普通状态*/
div#cals .yr_sel,#cals .mth_sel{border:1px solid #ffad42;background:#ffec93;padding:0;line-height:14px;cursor:pointer}/* 年、月选择器鼠标移上状态*/
div#cals .cal_roll{border:1px solid #ff9000;background:#fef1;position:absolute;display:none;font-size:12px; font-family:Arial;line-height:18px}/*年月选择列表*/
div#cals .cal_roll .normal{background:none;}/*年月选择列表选择项目普通状态*/
div#cals .cal_roll .msover{background:#f5e182;cursor:pointer;}/*年月选择列表选择项目鼠标移上效果*/
div#cals .cal_pp_cnt{padding:3px;margin-right:20px;font-size:12px;font-family:Arial;white-space:nowrap;border:1px solid #666;background:url(*有更新的日期的tip提示层*/