CSS笔记 - fgm练习 2-8 - 简易日历

 

 

    <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>