简易仿百度首页

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易仿百度首页相关的知识，希望对你有一定的参考价值。

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="description" content="百度一下 你就知道">
        <meta name="keywords" content="百度一下 你就知道">
        <title>百度搜索框</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="search">
            <div class="search-logo">
                <img src="https://www.baidu.com/img/bd_logo1.png" width="270px" height="129px" />
            </div>
            <div class="searchBar">
                <form id="searchForm">
                    <div class="searchTxt" id="searchTxt">
                        <input type="text" id="searchInput">
                    </div>
                    <div class="searchBtn">
                        <input type="submit" value="百度一下">
                    </div>
                </form>
                
            </div>
            <p><a>1212，要爱要爱</a></p>
            <div class="suggest" id="search-suggest" style="display: none">
                <ul>
                    <li>搜索结果1</li>
                    <li>搜索结果2</li>
                    <li>搜索结果3</li>
                </ul>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="baidu.js" type="text/javascript">
        </script>
    </body>
</html>

css部分：

body, input, ul, li{
                margin: 0;
                padding: 0;
            }
            body {
                font: 12px arial;
            }
            input {
                outline: none;
                border: none;
            }

            .search {
                width: 640px;
                margin: 0 auto;

            }

            .search-logo {
                margin-bottom: 30px;
                text-align: center;
            }
            
            .searchBar {
                width: 640px;
                height: 38px;
            }
            
            .searchTxt {
                float: left;
                border: 1px solid #3385ff;
                width: 540px;
                height: 36px;
            }
            .searchTxt input{
                padding-left: 5px;
                width: 540px;
                height: 36px;
            }
            
            .searchBtn {
                float: right;
                width: 98;
                height: 38px;
            }
            .searchBtn input{
                letter-spacing: 1;
                font-size: 14px;
                color: #fff;
                width: 98;
                height: 38px;
                background: #3385ff;
                cursor: pointer;
            }

            .search p {
                margin-top: 50px;
                text-align: center;
                color: #c9c9c9;
                font-size: 12px;
            }
            p a{
                text-decoration: underline;
            }
            
            .suggest {
                width: 540px;
                border: 1px solid #3385ff;
            }
            .suggest ul {
                list-style: none;
            }
            .suggest ul li {
                padding: 3px;
                font-size: 14px;
                height: 25px;
                cursor: pointer;
            }
            .suggest ul li:hover {
                text-decoration:  underline;
                background-color: #e5e5e5;
            }

js部分：

$(‘#searchInput‘).bind(‘keyup‘,function() {
                $(‘#search-suggest‘).show().css({
                    top:$(‘#searchTxt‘).offset().top + $(‘#searchTxt‘).height(),
                    left:$(‘#searchTxt‘).offset().left,
                    position:‘absolute‘
                });
            })
            $(document).bind(‘click‘,function(){
                $(‘#search-suggest‘).hide();
            })

还有一些功能要添加，静候

以上是关于简易仿百度首页的主要内容，如果未能解决你的问题，请参考以下文章

简易版百度首页

仿百度壁纸客户端——首页单向，双向事件冲突处理，壁纸列表的实现

jQuery Mobile仿360首页，jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页

第八课简易网页制作模仿百度首页

仿百度壁纸client——实现搜索动画GestureDetector手势识别，动态更新搜索keyword

仿百度壁纸client——完结篇之Gallery画廊实现壁纸预览已经项目细节优化