百度搜索栏历史记录(test)

这是一个正在测试中的百度历史记录栏

    .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="">hao123a>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 Baidua><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{      if (b=text;      b=b+1;      break;      }      else{      b=ba.length;      for (var d = 0; d =ba[d+1].innerHTML;      }      ba[b-1].innerHTML=text;
          break;       
}      }    } }
//在失去焦点时消失
function uc(){
document.getElementById('sss').style.display="none";
}

 

转载于:https://www.cnblogs.com/LastFire/p/8326379.html

你可能感兴趣的:(百度搜索栏历史记录(test))