Teraflopst/calendar.html

## calendar.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a simple calendar</title>
    <style>
        body,div,ul,li,h2,p{ margin:0; padding:0; }
        #tab { width: 240px; margin: 30px auto; background: #F5F2DD; }
        ul { list-style: none; padding: 20px 0px 10px 20px; }
        li { float: left; width: 56px; height: 56px; border: 2px solid #565353;background: #565353; margin: 0 10px 10px 0; text-align: center; color: #fff; font-size: .8em; font-family: Arial; }
        .clear { clear: both; }
        .active,li:hover{ border: 2px solid #565353; background: #fff; color: #F22771; }
        h2 { padding: 8px 0 5px 0; }
        #text{ margin: 10px 20px; border: 2px solid #fff; background: #F7F3D9; color: #565353; font-family: Arial; }
        #text h2 { margin: 5px 10px 5px 10px;  font-size: 1em; }
        #text p { margin: 0 10px 5px 10px; font-size: .8em }
    </style>
    <script>
    window.onload = function (){
        var calEvents = [
            "快过年了，年终总结、购置年货、项目收尾、催设计稿费",
            "春节来了，探亲访友聚聚会",
            "睡觉",
            "春困"
        ];
        var oDiv = document.getElementById('tab');
        var aLi = oDiv.getElementsByTagName('li');
        var oText = oDiv.getElementsByTagName('div')[2];
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function (){
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                };
                this.className = 'active';
                oText.innerHTML = '<h2>'+(this.index+1)+'月活动</h2>'+'<p>'+calEvents[this.index]+'</p>';
            };
        }
    }
    </script>
</head>
<body>
    <div id="tab" class="cal">
        <ul>
            <li class="active"><h2>1</h2><p>JAN</p></li>
            <li><h2>2</h2><p>FEB</p></li>
            <li><h2>3</h2><p>MAR</p></li>
            <li><h2>4</h2><p>APR</p></li>
            <li><h2>5</h2><p>MAY</p></li>
            <li><h2>6</h2><p>JUN</p></li>
            <li><h2>6</h2><p>JUL</p></li>
            <li><h2>7</h2><p>AUG</p></li>
            <li><h2>8</h2><p>SEP</p></li>
            <li><h2>9</h2><p>OCT</p></li>
            <li><h2>11</h2><p>NOV</p></li>
            <li><h2>12</h2><p>DEC</p></li>
            <div class="clear"></div>
        </ul>
        <div class="clear"></div>
        <div id="text">
            <h2>1月活动</h2>
            <p>快过年了，大家可以商量者去哪玩，但是不要在高峰期出行，会有很塞很挤很多人~</p>
        </div>
        <br />
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>a simple calendar</title>
	<style>
	body,div,ul,li,h2,p{ margin:0; padding:0; }
	#tab { width: 240px; margin: 30px auto; background: #F5F2DD; }
	ul { list-style: none; padding: 20px 0px 10px 20px; }
	li { float: left; width: 56px; height: 56px; border: 2px solid #565353;background: #565353; margin: 0 10px 10px 0; text-align: center; color: #fff; font-size: .8em; font-family: Arial; }
	.clear { clear: both; }
	.active,li:hover{ border: 2px solid #565353; background: #fff; color: #F22771; }
	h2 { padding: 8px 0 5px 0; }
	#text{ margin: 10px 20px; border: 2px solid #fff; background: #F7F3D9; color: #565353; font-family: Arial; }
	#text h2 { margin: 5px 10px 5px 10px; font-size: 1em; }
	#text p { margin: 0 10px 5px 10px; font-size: .8em }
	</style>
	<script>
	window.onload = function (){
	var calEvents = [
	"快过年了，年终总结、购置年货、项目收尾、催设计稿费",
	"春节来了，探亲访友聚聚会",
	"睡觉",
	"春困"
	];
	var oDiv = document.getElementById('tab');
	var aLi = oDiv.getElementsByTagName('li');
	var oText = oDiv.getElementsByTagName('div')[2];
	for (var i = 0; i < aLi.length; i++) {
	aLi[i].index = i;
	aLi[i].onmouseover = function (){
	for (var i = 0; i < aLi.length; i++) {
	aLi[i].className = '';
	};
	this.className = 'active';
	oText.innerHTML = '<h2>'+(this.index+1)+'月活动</h2>'+'<p>'+calEvents[this.index]+'</p>';
	};
	}
	}
	</script>
	</head>
	<body>
	<div id="tab" class="cal">
	<ul>
	<li class="active"><h2>1</h2><p>JAN</p></li>
	<li><h2>2</h2><p>FEB</p></li>
	<li><h2>3</h2><p>MAR</p></li>
	<li><h2>4</h2><p>APR</p></li>
	<li><h2>5</h2><p>MAY</p></li>
	<li><h2>6</h2><p>JUN</p></li>
	<li><h2>6</h2><p>JUL</p></li>
	<li><h2>7</h2><p>AUG</p></li>
	<li><h2>8</h2><p>SEP</p></li>
	<li><h2>9</h2><p>OCT</p></li>
	<li><h2>11</h2><p>NOV</p></li>
	<li><h2>12</h2><p>DEC</p></li>
	<div class="clear"></div>
	</ul>
	<div class="clear"></div>
	<div id="text">
	<h2>1月活动</h2>
	<p>快过年了，大家可以商量者去哪玩，但是不要在高峰期出行，会有很塞很挤很多人~</p>
	</div>
	<br />
	</div>
	</body>
	</html>