亲爱的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提示层*/