                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

入门了，发一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        body{
            margin:200px auto;
            padding-left: 600px;
        }
        ul{
            width: 600px;
            height:50px;
            display: flex;
            justify-content: center;
        }
        li{
            list-style: none;
            width:200px;
            height:50px;
            line-height: 50px;
            background-color: white;
            display: inline-block;
            text-align: center;
            border:1px #ccc solid;
            border-bottom:3px solid crimson;
            box-sizing: border-box;
            margin-left: 5px;
        }
        .font{
            width: 600px;
            height: 300px;
            background-color: white;
            position: relative;
            border:1px skyblue solid;
        }
        .font div{
            position: absolute;
            top:100px;
            left:150px;
        }
        #zindex2,#zindex3{
            display: none;
        }

    </style>
</head>
<body>
    <ul>
        <li id="li1">房产</li>
        <li id="li2">家居</li>
        <li id="li3">二手房</li>
    </ul>
    <div class="font">
    <div id="zindex1">
        275万购昌平邻铁三居 总价20万买一居<br/>
        200万内购五环三居 140万安家东三环<br/>
        北京首现零首付楼盘 53万购东5环50平<br/>
        京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div id="zindex2">
        40平出租屋大改造 美少女的混搭小窝<br/>
        经典清新简欧爱家 90平老房焕发新生<br/>
        新中式的酷色温情 66平撞色活泼家居<br/>
        瓷砖就像选好老婆 卫生间烟道的设计
    </div>
    <div id="zindex3">
        通州豪华3居260万 二环稀缺2居250w甩<br/>
        西3环通透2居290万 130万2居限量抢购<br/>
        黄城根小学学区仅260万 121平70万抛!<br/>
        独家别墅280万 苏州桥2居优惠价248万
    </div>
    </div>
    <script>
        window.onload =function () {
            var li1 =document.getElementById("li1");
            var li2 =document.getElementById("li2");
            var li3 =document.getElementById("li3");
            var zindex1 = document.getElementById("zindex1");
            var zindex2 = document.getElementById("zindex2");
            var zindex3 = document.getElementById("zindex3");


            li1.onmousemove = function () {
                li1.style.border="none";
                li1.style.borderTop="3px solid crimson";
                zindex1.style.display ="block";
                zindex2.style.display ="none";
                zindex3.style.display ="none";
            };
            li2.onmousemove = function () {
                li2.style.border="none";
                li2.style.borderTop="3px solid crimson";
                zindex1.style.display ="none";
                zindex2.style.display ="block";
                zindex3.style.display ="none";
            };
            li3.onmousemove = function () {
                li3.style.border="none";
                li3.style.borderTop="3px solid crimson";
                zindex1.style.display ="none";
                zindex2.style.display ="none";
                zindex3.style.display ="block";
            };
            li1.onmouseout=function () {
                li1.style.border="1px #ccc solid";
                li1.style.borderBottom="3px solid crimson";
            };
            li2.onmouseout=function () {
                li2.style.border="1px #ccc solid";
                li2.style.borderBottom="3px solid crimson";
            };
            li3.onmouseout=function () {
                li3.style.border="1px #ccc solid";
                li3.style.borderBottom="3px solid crimson";
            }
        }
    </script>
</body>
</html>