这是一个正在测试中的百度历史记录栏
.ss{ width: 644px; margin:0 auto; } input{ width: 480px; height: 20px; padding: 9px 48px 9px 7px; } #sss{ display: none; width: 536px;border:0.5px solid #cccccc; font-size: 14px;text-indent: 6px;position: absolute;margin-top: -2px; } p{ margin:0; padding:0; } p:hover{ background-color: #efefef; } ul{ list-style: none; float: right; } li{ float: left;margin-left: 20px;font-size: 14px;text-decoration: line;font-weight: 700;background-color: white; } .m25{ margin-left: 25px; } a{ color: #333333; } .c99{ color: #999999; } .bg{ width: 100%; height: 80px; } .more{ color: white;background-color: #3388FF;padding: 2px;margin-top: -2px;font-weight: 100;text-decoration: none; } .k1{ width: 641px;height: 181px; } .k2{ margin:0 auto;width:270px;height:129px; } .input{ border:1px solid #CCCCCC;border-radius: 0px;height: 19px; } .input2{ width: 102px;height: 39px;background-color: #317EF3;text-align: center;color: white;text-indent: 13px;border:none;font-size: 16px;float: right;margin-right: 2px; } .mg20{ margin-top: 20px; } .k3{ width: 60px;height: 90px;margin:0 auto;padding-top: 260px;text-align: center; } .k5{ text-align: center;font-size: 13px;margin-top: 14px;color: #999999;line-height: 26px; } .f12{ font-size: 12px; }
<!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="baidu-icon.ico" /> <link rel="bookmark" href="baidu-icon.ico" /> <meta charset="utf-8"> <title>百度一下 , 我不知道</title> </head> <body> <div class="bg"> <nav> <ul><li><a href="">新闻</a></li><li><a href="">hao123</a></li><li><a href="">地图</a></li><li><a href="">视频</a></li><li><a href="">贴吧</a></li><li><a href="">学术</a></li><li><a href="">登录</a></li><li><a href="">设置</a></li><li > <a href="" class="more">更多产品</a></li> </ul> </nav> </div> <div> <div class="ss"> <div class="k1"> <div class="k2"> <img src="bd_logo1.png" width="270px" height="129px" class="mg20"> </div> </div> <div> <input type="text" class="ts" name="" onblur="uc()" id="ad" onclick="fz()" class="input"><input type="submit" name="" value="百度一下" class="input2" onclick="ts(this)"></div> <div class="k4" id="sss"><p onclick="g(1)"></p><p onclick="g(2)"></p><p onclick="g(1)"></p></div> </div> </div> <div class="k3"> <img src="zbios_efde696.png"> <span class="f12">手机百度</span> </div> <div class="k5"> <span><span class="m25"><a href="" class="c99">把百度设为主页</a><span class="m25"><a href="" class="c99">关于百度</a><span class="m25"><a href="" class="c99">About Baidu</a><span class="m25" class="c99"><a href="" class="c99">百度推广</a></span><br> <span> ©2018 Baidu <a href="" class="c99">使用百度前必读</a> <a href="" class="c99">意见反馈</a> 京ICP证030173号</span> <span><a href="" class="c99">京公网安备11000002000001号</a></span>
</div> </body> </html>
b=0 function fz(){
//在点击时将历史框从none变成block元素 document.getElementById('sss').style.display="block"; } function ts(a){ var n1=document.getElementsByClassName('ts');
//根据内容来改变历史记录的情况，在少于3条时，记录上补，多于3条时，第二条变成第一条，第三条变成第二条，然后更新第一条信息 for (var i = 0; i <n1.length; i++) { text=n1[i].value; ba= a.parentNode.nextSibling.nextSibling.childNodes; for (i=0;i<ba.length;i++) { if (b<ba.length) { ba[b].innerHTML=text; b=b+1; break; } else{ b=ba.length; for (var d = 0; d <ba.length-1; d++) { ba[d].innerHTML=ba[d+1].innerHTML; } ba[b-1].innerHTML=text;
break; } } } }
//在失去焦点时消失
function uc(){
document.getElementById('sss').style.display="none"; }