簡單百度頁面---
阿新 • • 發佈:2018-01-22
else 16px aaa href ora client over for 元素
<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>
簡單百度頁面---