简单百度页面---

Posted 2020-10-21 赵晓龙

    <img src="小雪.png" id="yidong">
    <div class="top">
        <div class="top_a">
            <a href="#">新闻</a>
            <a href="#">hao123</a>
            <a href="#">地图</a>
            <a href="#">视频</a>
            <a href="#">贴吧</a>
            <a href="#">学术</a>
            <a href="#">登陆</a>
            <a href="#">设置</a>
            <a href="#">更多产品 </a>
        </div>
    </div>
    <div class="bod">
        <img src="img/bd_logo1.png" class="tu" >
        <input type="text" value="" id="val"/>
        <input type="button" value="百度一下" class="inp" id="int" />
        <ul id="lia">
            <li>欢迎</li>
            <li>来到</li>
            <li>壹门徒</li>
            <li>壹门徒</li>
        </ul>
    </div>
    <div class="tu_a">
        <img src="img/baidu_2000.jpg">
    </div>
    <div id="ftConw">
        <p class="zi">
            <a href="#">把百度设为主页</a>
            <a href="#">关于百度</a>
            <a href="#">About Baidu</a>
            <a href="#">百度推广</a>
        </p >
        <p class="zi">
            把百度设为主页关于百度About  Baidu百度推广
?2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号 
        </p>
    </div>

    <style>
    *{margin: 0;padding: 0;}
    #yidong{position: absolute;width: 40px;height: 40px;}
    .bod{margin: 30px auto;width: 600px;height: 280px;}
    .tu{width: 270px;height: 129px;margin-left:140px; }
    #val{width: 500px;height: 30px;float: left;text-indent:6px;font-size: 16px;}
    .inp{width: 94px;height: 34px;font-size: 12px;float: left;background: #3385FF;cursor:pointer;color: #fff;border:none;}
    #lia{width: 503px;display: none}
    #lia li{list-style: none; width: 502px;float: left;line-height: 30px;text-indent:6px;font-size: 16px;border-right:1px solid #AAAAAA;border-left:1px solid #AAAAAA;}
    li:nth-child(4){border-bottom: 1px solid #AAAAAA;}
    #lia li:hover{background:#f3f3f3}
    /*导航*/
    .top{height:60px;}
    .top_a{height: 40px;float: right;margin-top: 20px;}
    .top_a a{margin-left:10px;color:#000;font-size: 13px;font-weight: bold;}
    .top_a a:nth-child(9){margin:1px 20px;background: #3388FF;display: block;width: 70px;height: 22px;float: right;text-align: center;line-height: 20px;color:#fff;text-decoration: none;}
    .top_a a:hover{color:#0162C2;}
    .tu_a{height:30px;width: 100px;margin: 50px auto;}
    .tu_a img{width: 100px;height: 100px;background-size: 100% 100%;margin: 0 auto;}
    #ftConw{width: 800px;height: 46px;margin: 70px auto;font-size: 12px;text-align: center;line-height: 20px;margin-top:70px; }
    .zi a{color: #999}
    .zi{color: #999}
    .zi a:nth-child(2){margin-left: 27px;}
    .zi a:nth-child(3){margin-left: 27px;}
    .zi a:nth-child(4){margin-left: 27px;}
    </style>

    <script>
        var intp = document.getElementById(‘int‘);
        var arr = document.getElementsByTagName("li");
        intp.onclick = function(){
                for(var i=arr.length-1;i>=0;i--){
                    if(val.value!=""){
                        if(i==0){
                            arr[0].innerhtml=val.value;
                        }else{
                            arr[i].innerHTML=arr[i-1].innerHTML;
                        }    
                    }
                }
        }
        var val = document.getElementById("val");

        val.onfocus = intp.onfocus=function(){         
            var jujiao=document.getElementsByTagName("ul")[0];      //聚焦
             jujiao.style.display = "block";
        }
        val.onblur = intp.onblur=function(){
            var shijiao=document.getElementsByTagName("ul")[0];      //释焦
            shijiao.style.display="none";
        }

    window.onload=function(){
        var yidong = document.getElementById("yidong");
    document.onmousemove = function(){            //鼠标跟随是在鼠标移动时发生的事情。
        var a = event || window.event
        yidong.style.left =a.clientX+ 10 +"px";        //当鼠标移动时把鼠标的当前位置赋值给元素的位置值。
        yidong.style.top =a.clientY+ (-10) + "px";
        }
    }
    </script>