仿百度首页（可进行百度搜索）

谦卑a

已于 2022-05-11 16:01:24 修改

阅读量835

点赞数

文章标签： webview html javascript

于 2022-05-11 14:13:33 首次发布

本文链接：https://blog.csdn.net/qq_38679197/article/details/124708765

版权

仿制百度首页制作，搜索框可调用百度搜索

体验地址：百度一下，你就知道

网页结构：

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="./static/images/baidu.svg">
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="./static/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
        <header>
            <div class="left-nav">
                <a href="">新闻</a>
                <a href="">hao123</a>
                <a href="">地图</a>
                <a href="">贴吧</a>
                <a href="">视频</a>
                <a href="">图片</a>
                <a href="">网盘</a>
                <a href="">更多</a>
            </div>
            <div class="right-nav">
                <div class="drown-list-hover">
                    <a href="">设置</a>
                    <ul class="menu" style="display: none;">
                        <li><a href="">搜索设置</a></li>
                        <li><a href="">高级搜索</a></li>
                        <li><a href="">关闭预测</a></li>
                        <li><a href="">隐私设置</a></li>
                        <li><a href="">开启热键</a></li>
                    </ul>
                </div>
                <div>
                <a href="" class="login-btn">登录</a>
                </div>
            </div>
        </header>
    
        <div class="section-wrap">
            <div class="logo-content">
                <img src="./static/images/baidu.png" alt="" width="270" height="129">
            </div>
            <div class="form-content">
                <form action="https://www.baidu.com/baidu" method="get" target="_blank">
                    <input type="text" name="wd" size="20" autocomplete="off">
                    <div class="right-camera">
                        <i class="fa fa-camera"></i>
                    </div>
                    <button type="submit" class="right-button">百度一下</button>
                </form>
    
            </div>
        </div>
        <div class="bottom-content">
            <div class="bottom-wrap">
                <li><a href="//home.baidu.com" target="_blank">关于百度</a></li>
                <li> <a class="text-color" href="http://ir.baidu.com" target="_blank">About Baidu</a></li>
                <li><a class="text-color" href="//www.baidu.com/duty" target="_blank">使用百度前必读</a></li>
                <li> <a class="text-color" href="//help.baidu.com" target="_blank">帮助中心</a></li>
                <li> <a class="text-color"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
                        target="_blank">京公网安备11000002000001号</a></li>
                <li> <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a></li>
                <li> <span class="text-color">©2022&nbsp;Baidu&nbsp;</span></li>
                <li><span class="text-color">互联网药品信息服务资格证书 (京)-经营性-2017-0020</span></li>
                <li><a class="text-color" href="//www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a></li>
    
                <li><img class="aria-img"
                        src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/footer/aria-3006e33cce.png">
                </li>
    
            </div>
    
        </div>
   
    <script src="static/js/main.js"></script>
</body>

</html>

网页样式：

* {
    margin: 0;
    padding: 0;
}

a,
li {
    text-decoration: none;
    list-style: none;
    color: #000000;
}
header {
    position: relative;
    height: 60px;
    font-size: 13px;
    min-width: 1000px;
}

header .left-nav {
    position: absolute;
    left: 0;
    line-height: 60px;
}

header .left-nav a {
    display: inline-block;
    position: relative;
    margin-left: 20px;
}

header .left-nav a:hover {
    color: #315efb;
}

.right-nav {
    position: absolute;
    right: 0;
    line-height: 60px;
}

.right-nav div{
    display: inline-block;
    margin-right: 20px;
}

.right-nav .drown-list-hover {
    position: relative;
}

.right-nav .drown-list-hover .menu {
    position: absolute;
    right: -20px;
    top: 45px;
    width: 84px;
    overflow: hidden;
    box-shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.15);
    border-radius: 10px;
}

.right-nav .menu a {
    display: block;
    line-height: 30px;
    margin-left: 15px;
}

.right-nav .drown-list-hover:hover {
    color: #315efb;
}

.right-nav .menu a:hover {
    color: #315efb;
}

.login-btn {
    color: #ffffff;
    background-color: #4e71f2;
    height: 24px;
    width: 48px;
    line-height: 24px;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    margin-top: 18px;
}

.login-btn:hover {
    color: #ffffff;
    background-color: #315efb;
}

.section-wrap {
    width: 654px;
    height: 314px;
    margin: 0 auto;
    /**/
    vertical-align: middle;
    text-align: center;
}

.logo-content img {
    margin-top: 120px;
}

.form-content {
    position: relative;
}

.form-content input {
    margin-top: 20px;
    width: 620px;
    height: 16px;
    padding: 12px;
    border-radius: 11px;
    outline-color: #315efb;
    border: 2px solid #b5b5b5;
    font-size: 16px;
}

.right-camera {
    position: absolute;
    top: 0;
    right: 108px;
    margin: 20px 10px 0 20px;
    height: 44px;
    line-height: 44px;
    color: #b5b5b5;
}

.right-button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    margin: 20px 0 0 20px;
    width: 108px;
    height: 44px;
    color: #ffffff;
    border-radius: 0 11px 11px 0;
    background-color: #315efb;
}

.right-button:hover {
    background-color: #4662d9;
}

.bottom-content {
    position: absolute;
    width: 1300px;
    height: 240px;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap;
}

.bottom-wrap {
    position: absolute;
    bottom: 0;
}

.bottom-content li {
    float: left;
    margin-left: 15px;
}

.bottom-content .aria-img {
    width: 49px;
    height: 20px;
    margin-bottom: -5px;
}

.bottom-content span,
.bottom-content a {
    font-size: 12px;
    color: #bbb;
}

.bottom-content a:hover {
    color: #000000;
}

Js：

var drownhover=document.querySelector('.drown-list-hover')
var drownlist=document.querySelector('.menu')
// 要在父元素上监听mouseenter
drownhover.addEventListener('mouseenter',function () {
    drownlist.style.display='block';
})
drownhover.addEventListener('mouseleave',function () {
    drownlist.style.display='none';
})

谦卑a

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
仿百度首页（可进行百度搜索）

仿制百度首页制作，搜索框可调用百度搜索网页结构：<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-sc.
复制链接

扫一扫