简易仿百度首页

时间：2016-12-11 21:10:16 阅读：232 评论：0 收藏：0 [点我收藏+]

标签：功能 ide absolute pos baidu let .sh orm search

html：部分

<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();
            })

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

简易仿百度首页

标签：功能 ide absolute pos baidu let .sh orm search

原文地址：http://www.cnblogs.com/geddy/p/6160409.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行