CSDN搜索界面美化

想必使用CSDN是几乎所有程序员必备选择了,大部分时候我们使用百度来搜索CSDN的文章,但是由于百度的众所周知的风格,使用百度来搜索显得不如直接使用CSDN搜索来得高效,那么请问CSDN有自己的搜索引擎嘛?答案是有的,就在CSDN主页或者大多数页面右上角有个小小的搜索框,那么有没有像百度或者360搜索那样整个页面就一个搜索呢?我找了半天并没有找到,于是乎想到自己动手来做一个,效果图如下:萌新几乎不写前端,请大佬轻喷
CSDN搜索
现在做出来的效果不是太好,只能实现搜索结果的简单跳转,其实这么一个功能也就够了,但我希望以后有机会的话可以将页面效果美化,做出像 不会百度么http://buhuibaidu.me/ 那种样子
不会百度么
网页可以部署在自己的服务器上面然后收藏到浏览器的书签栏以后就可以轻松访问啦
最后附上我写的简单网页的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #search {
        height: 50px;
        width: 500px;
        margin-top: 16%;
        margin-left: 30%;
    }
    #img{
        margin-top: 120px;
        margin-left: 630px;
    }
    #myId{
        margin-top: 15.85%;
        border-color: #19b955;
        color:#000;
        border: 1;
        border-radius: 0;
        font-family: "Microsoft YaHei";
        font-size: 18px;
        height: 41px;
        left: 455px;
        padding-left: 10px;
        letter-spacing: 1px;
        outline: none;
        position: absolute;
        top: 0;
        vertical-align: top;
        width: 500px;
    }
    #btn{
        margin-top: 15.85%;
        margin-left: 30.44%;
        background: #19b955;
        color: #fff;
        -webkit-appearance: none;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        font-family: "Microsoft YaHei";
        font-size: 18px;
        height: 46.8px;
        left: 490px;
        letter-spacing: 1px;
        outline: none;
        position: absolute;
        top: 0;
        vertical-align: top;
        width: 100px;
    }
</style>
<script type="text/javascript">
    function getValue() {
        var input=document.getElementById("myId");
        var link="https://so.csdn.net/so/search/s.do?q="+input.value;
        window.location.href=link;
    }
    function keyLogin(){
        if(window.event.keyCode==13)
            getValue();
    }
</script>
<body>
    <div id="img">
        <img src="./csdn.jpg" width="200" height="100" >
    </div>
    <div id="search">
            <input type="text" id="myId" onkeypress="keyLogin()">
            <input type="button" id="btn" value="搜索" onclick="getValue()"/>
    </div>
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值