百度一下案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <style>
        div {
            text-align: center;
        }

        .first {
            font-size: 14px;
        }

        .search {
            margin-top: 14px;
            margin-left: 22px;
            float: left;
        }

        a {
            text-decoration: none;
        }

        .you {
            margin-top: 14px;
            margin-right: 22px;
            float: right;
        }

        input[type='button'] {
            border: 0px;
            border-radius: 8px;
            background-color: blue;
            color: white;
            padding: 2px 10px;
        }

        .second {
            clear: both;
        }

        input[type='text'] {
            width: 548px;
            height: 38px;
            outline: 0px;
            border: 2px #C4C7CE solid;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

        }

        input[type='submit'] {
            width: 104px;
            height: 42px;
            padding-top: 12.5px;
            padding-bottom: 31px;
            background-color: blue;
            border: blue;
            color: white;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }
    </style>
    <script src="../../day24jq基础/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="first">
    <div class="search">
        <a href="http://news.baidu.com/">新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.hao123.com/">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://map.baidu.com/@12690086,2569167,13z">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://xueshu.baidu.com/">学术</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.baidu.com/more/">更多</a>
    </div>
    <div class="you">
        <a href="https://www.baidu.com/s?wd=%E9%AB%98%E8%80%83&sa=searchpromo_gk_pc_ysj"><font
                color="red">高考加油</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="登录">
    </div>
</div>

<div class="second">
    <div class="pcture">
        <img src="baidu.png" width="280px" height="120px">
    </div>
    <div class="kw">
        <form action="http://www.baidu.com">
            <input type="text" name="kw" id="txt"><input type="submit" value="百度一下">
        </form>

    </div>
</div>
</body>
<script>
    var c=null;
    $("#txt").focus(function () {
        c=this.style.borderColor;
        this.style.borderColor="blue";
    })
    $("#txt").blur(function () {
        this.style.borderColor=c;
    })

    $("#txt").mouseover(function () {
        c=this.style.borderColor;
        this.style.borderColor="#A7AAB5";
    })
    $("#txt").mouseout(function () {
        this.style.borderColor=c;
    })
   </script>
</html>
百度一下 案例

百度一下案例
