<style>
*{margin: 0; padding: 0}
.outer{
width: 240px;
margin: 10px auto;
background: #f0f0f0;
padding: 10px 0px 10px 10px;
/* 下面li的内容撑不起outer的高度？ */
}
.outer ul{
/* width: 240px; */
overflow: hidden;
/* overflow:hidden; 让浮动元素撑起父容器。
在本例子 撑起ul的高度。因为ul>li全都是浮动的，导致ul没有高度。
加上overflow:hidden，ul就会有自己的高度。
此高度的范围包含了所有子元素（取其子元素最高的那个高度）。 */
/* 实例程序里这里设置 zoom:1; 作用？？*/
}
ul li{
list-style: none;
float: left;
/* li没撑起外层ul高度，是因为浮动流？
对的。 */
background: black;
width: 50px;
height: 50px;
margin: 0 10px 10px 0;
color: white;
padding: 5px;
text-align: center;
font-size: 14px;
box-sizing: border-box;
}
ul li span{
font-weight: bold;
font-size: 16px;
}
ul>li:hover{
border: 1px solid #000;
color: purple;
background: white;
}
.tips{
font-size: 12px;
border: 1px solid #000;
margin-right: 10px;
padding: 5px;
}
.tips h2{
font-size: 14px;
}
.tips p{
display: none;
}
.tips p.active{
display: block;
}
</style>
<script>
window.onload = function()
{
var aLi = document.getElementsByTagName('li');
var oMonth = document.getElementsByTagName('h2')[0];
var oTips = document.getElementsByTagName('p');
for(var i=0; i<aLi.length; i++)
{
aLi[i].index = i; // 这个必须写在onmouseover事件的外部， 原因？？
aLi[i].onmouseover = function()
{
oMonth.innerHTML = [this.index+1] + '月节日';
for(var j=0; j<oTips.length; j++)
{
oTips[j].className = '';
};
oTips[this.index].className = 'active';
};
};
};
</script>
