js仿百度搜索 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>百度搜索</title>
        <link rel="stylesheet" type="text/css" href="css/baidu.css" />
    </head>
    <body>
        <div id="head">
            <h1>百度搜索</h1>
        </div>
        <div id="main">
            <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
            <input type="text" name="" id="input" value="" placeholder="百度一下..." />
            <input type="button" name="" id="bth" value="搜索" onclick="bth()" />
        </div>
    </body>
</html>
<script type="text/javascript">
    var text = document.getElementById("input");
    // var bth = document.getElementById("bth");
    //点击事件
    function bth(){
        var txt = text.value;
        location.href = "https://www.baidu.com/s?wd=" + txt + "";
    }
    // 绑定回车事件
    document.onkeydown = function(e){
       if(!e){
        e = window.event;
       }
       if((e.keyCode || e.which) == 13){
        bth();
       }
      }
</script>

css代码：

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    outline: none;
}

h1 {
    font-weight: 300;
    font-family: 华文彩云;
    line-height: 50px;
}

#head {
    width: 100%;
    height: 50px;
    text-align: center;
    background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}

#main {
    width: 100%;
    height: 100px;
    text-align: center;
}

#input {
    width: 480px;
    height: 40px;
    background-color: #eee;
    border: 2px solid #000;
    font-size: 16px;
    border-radius: 8px;
}

@media screen and (min-width: 500px) {
    #main img {
        position: relative;
        top: 11px;
        left: 0;
    }

    #input {
        width: 480px;
        height: 40px;
        background-color: #eee;
        border: 2px solid #999;
        font-size: 16px;
        border-radius: 8px;
    }
}

@media screen and (max-width: 500px) {
    #input {
        width: 400px;
        height: 40px;
        background-color: #999;
        border: 2px solid #fff;
        font-size: 16px;
        border-radius: 8px;
        background-image: linear-gradient(90deg, #08AEEA 0%, #2AF598 100%);

    }
}

#bth {
    width: 100px;
    height: 40px;
    margin-top: 10px;
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 19px;
    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    font-family: 华文彩云;
}

 

posted @ 2020-12-25 15:11  君莫笑007  阅读(90)  评论(0)  编辑  收藏  举报