今天我做了一个简单的月历表：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body,ul,h3,h4,p{padding:0; margin:0;}
li{list-style: none;}
#div1{margin: 0 auto;
width: 300px;
height: 480px;
background: #F5F5F5;}
#div1 ul{margin: 20px auto;
width: 260px;
height: 260px;}
#div1 ul li{float: left;
margin: 8px;
width: 70px;
height: 70px;
border-radius: 3px;
cursor: pointer;
background: black;}
li h4{color:white;
font-size: 18px;
text-align: center;
line-height: 36px;}
li p{color:white;
font-size: 15px;
text-align: center;}
#div1 .active{width: 68px;
height: 68px;
border-radius: 3px;
background: white;
color: pink;
border:1px solid black;}
#div1 .active h4{color: pink;}
#div1 .active p{color: pink;}
#div1 div{margin: auto;
margin-top: -10px;
width: 246px;
height: 180px;
background: #DCDCDC;
border:1.5px solid white;}
#div1 div h3{padding: 12px;}
#div1 div p{color:#696969;
font-size: 14px;
padding-left: 12px;}
</style>
<script>
window.onload=function(){
var arr=[
'世间上最璨然的烟火, 即是你的灿然一笑',
'只要心是晴朗的，人生就没有雨天',
'温暖的民谣，愿你归来仍是少年',
'一听就是一颗烟，一听就是三瓶酒',
'小王子有玫瑰，而你有他',
'在青春的交叉路口 谁成为了你的牵绊',
'每一首都温暖了我们的心坎',
'一份美好，一份宁静，一份惬意，一份来自心灵的呼唤',
'事态万千，惬意的生活，随意的互动，一份悠然自得，溢于言表....'
]
var odiv=document.getElementById('div1');
var olist=odiv.getElementsByTagName('li');
var adiv=odiv.getElementsByTagName('div');
for(var i=0;i<olist.length;i++){
olist[i].index=i;
olist[i].onmouseover=function(){
for(var i=0;i<olist.length;i++){
olist[i].className='';
}
this.className='active';
adiv[0].innerHTML='<h3>'+(this.index+1)+'月活动</h3><p>'+arr[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="active">
<h4>1</h4>
<p>JAN</p>
</li>
<li>
<h4>2</h4>
<p>FER</p>
</li>
<li>
<h4>3</h4>
<p>MAR</p>
</li>
<li>
<h4>4</h4>
<p>APR</p>
</li>
<li>
<h4>5</h4>
<p>MAY</p>
</li>
<li>
<h4>6</h4>
<p>JUN</p>
</li>
<li>
<h4>7</h4>
<p>JUL</p>
</li>
<li>
<h4>8</h4>
<p>AUG</p>
</li>
<li>
<h4>9</h4>
<p>SEP</p>
</li>
</ul>
<div>
<h3>1月活动</h3>
<p>世间上最璨然的烟火, 即是你的灿然一笑</p>
</div>
</div>
</body>
</html>
