css 日历图标实现

首先看一下效果图,可以跟随当天日期变动

html代码

<p class="calendar">
    <span id="dayStr"></span>
    <em>
        <span id="monthStr"></span>
    </em>
</p>

css代码

.calendar{
    margin:.25em 10px 10px 0;
    padding-top:5px;
    float:left;
    width:65px;
    background:#ededef;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
    background: -moz-linear-gradient(top,  #ededef,  #ccc); 
    font:bold 25px/30px Arial Black, Arial, Helvetica, sans-serif;
    text-align:center;
    color:#000;
    text-shadow:#fff 0 1px 0;    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;    
    position:relative;
    -moz-box-shadow:0 2px 2px #888;
    -webkit-box-shadow:0 2px 2px #888;
    box-shadow:0 2px 2px #888;
}
.calendar em{
    display:block;
    font:normal bold 11px/30px Arial, Helvetica, sans-serif;
    color:#fff;
    text-shadow:#00365a 0 -1px 0;    
    background:#04599a;
    background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
    background:-moz-linear-gradient(top,  #04599a,  #00365a); 
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;    
    border-bottom-right-radius:3px;
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;    
    border-bottom-left-radius:3px;    
    border-top:1px solid #00365a;
}

 

js代码

function getToday(){
	var date = new Date();
    var strDate = date.getDate();
    $("#monthStr").html(date.toDateString().split(" ")[1]);
    $("#dayStr").html(strDate);
}

参考网址:http://developer.51cto.com/art/201304/387840.htm