前端开发学习Day26第26天，上午和下午的时间都看书了，看的还是函数的基础知识，因为我觉得我不会写函数代码是因为我不够

第26天，上午和下午的时间都看书了，看的还是函数的基础知识，因为我觉得我不会写函数代码是因为我不够理解基础，后来我发现完全不对，我看书的时候那些知识我都懂，我不会写是因为我写的少，没别的原因。于是我晚上又开始敲代码了，自己敲。
今天做的案例是鼠标移动显示图片，移出时显示文字。写的过程中，出现了几个问题：首先是语法错误，就是粗心吧，这个不能容忍，坚决要改；其次是布局的问题，之前学习的相对定位和绝对定位我忘记怎么用的了。我发现学着新的忘着旧的是一件很悲催的事情。以下是代码，注释部分一句可以顶替掉一大片Js代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #outer {
            width: 1200px;
            height: 600px;
            border: 2px solid black;
            margin: 0 auto;
        }

        ul {
            list-style-type: none;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 100%;
            cursor: crosshair;
            top:0;
            left:0;
            display: none;
            position: absolute;
        }

        li {
            width: 200px;
            height: 200px;
            cursor: crosshair;
            margin: 20px 40px;
            float: left;
            border: 1px solid blue;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            background: whitesmoke;
            position: relative;
        }

       /* li:hover > img{
            display:inline-block;
        }*/

    </style>
    <script>
        window.onload = function () {
            var oLi = document.getElementsByTagName("li");
            var oP = document.getElementsByTagName("p");
            var oImg = document.getElementsByTagName("img");
            for (var i = 0; i < oP.length; i++) {
                oP[i].index = oImg[i].index = i;
                oP[i].onmouseover = function () {
                    oLi[this.index].className = "zindex";
                    oImg[this.index].style.display = "block";
                };
                oP[i].onmouseout = function () {
                    oLi[this.index].className = "";
                    oImg[this.index].style.display = "none";
                };
                oImg[i].onmouseover = function () {
                    oLi[this.index].className = "zindex";
                    oImg[this.index].style.display = "block";
                };
                oImg[i].onmouseout = function () {
                    oLi[this.index].className = "";
                    oImg[this.index].style.display = "none";
                }
            }
        }

    </script>
</head>

<body>
    <div id="outer">
        <ul>
            <li><img src="image/栀子花.jpg" alt="">
                <p>栀子花</p>
            </li>
            <li><img src="image/桃花.jpg" alt="">
                <p>桃花</p>
            </li>
            <li><img src="image/海棠花.jpg" alt="">
                <p>海棠花</p>
            </li>
            <li><img src="image/牵牛花.jpg" alt="">
                <p>牵牛花</p>
            </li>
            <li><img src="image/玫瑰花.jpg" alt="">
                <p>玫瑰花</p>
            </li>
            <li><img src="image/荷花.jpg" alt="">
                <p>荷花</p>
            </li>
            <li><img src="image/菊花.jpg" alt="">
                <p>菊花</p>
            </li>
            <li><img src="image/风信子.jpg" alt="">
                <p>风信子</p>
            </li>
        </ul>

    </div>


</body>

</html>

预览效果点击以下链接：鼠标移动显示花
睡觉，明天接着做案例。