前端开发学习Day20

最新推荐文章于 2025-09-07 21:17:08 发布

转载最新推荐文章于 2025-09-07 21:17:08 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cc5b8b35188252e8601e8f3

文章标签：

#前端 #ViewUI

记录第20天前端学习历程，重温并优化昨日复杂案例，掌握CSS布局技巧，挑战新案例，深入理解鼠标移出效果实现，自我提升之路。

第20天，子曰：温故而知新可以为师矣，于是我把昨天的案例中最复杂的那个又做了一遍，感觉比之前做的时候好了点，但是还没到自己想要的那种地步。然后啃了3个新的案例，总的来说感觉CSS布局部分已经没有什么难度了，很快就能写好（主要还是因为案例比较小~），函数部分的话，有我能写出来的，也有我写不出来的，写不出的只能对照源代码思考，学习，然后尝试自己写。
写笔记之前，看了一些前端开发正式成员写的文章，真的是膜拜，对我这样的小白来说，真的不知道什么时候才能达到人家那样的高度，好好努力吧！今天的案例代码贴鼠标移出效果的：

<!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>鼠标移出</title>
    <style type="text/css">
        #box {
            width: 200px;
            height: 200px;
            background: black;
            margin: 0 auto;
            border: 10px solid #000;
            cursor: crosshair;
            color: #fff;
        }

        #box.hover {
            border: 10px solid red;
            background: #fff;
            color: red;
        }
    </style>
</head>

<body>
    <div id="box">
       鼠标移入改变样式，鼠标移出恢复。
    </div>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById("box");
            oDiv.onmouseover = function () {
                oDiv.className = "hover";
            };
            oDiv.onmouseout = function () {
                oDiv.className = ""
            }
        }
    </script>
</body>

</html>
复制代码