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

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

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

网页结构：

<!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';
})

仿百度首页（可进行百度搜索）相关推荐

改html更改百度首页背景颜色,百度地图_更改标注颜色
一.前期准备 1. 申请密匙去百度地图控制台申请密匙. 2. 在index.html引入注:去掉地图左下角的logo .BMap_cpyCtrl{display:none; }.anchorB ...
python实现简单爬虫百度首页_python使用百度进行爬虫简单学习例子
root@kali:~/py# python table.py list: ['http://www.baidu.com/s?wd=python&pn=10&oq=python& ...
Chrome地址输入栏搜索跳转百度首页解决方法
在Chrome浏览器地址栏输入内容搜索,跳转到百度首页而不是内容搜索页面的解决方案: Ⅰ. 在Chrome设置中打开"管理搜索引擎",点击 "更多操作" --& ...
python opencv屏幕找图_使用Python+OpenCV进行图像模板匹配(Match Template)实例－找到百度首页按钮并点击...
意图:准备一张小图,在电脑屏幕上找到小图坐标,并点击. 1 安装 opencv 和 numpy: pip3 install opencv-python 上述命令将 opencv 和 numpy都安装 ...
技术泡妹子二：篡改百度首页，惊呆女神
"大多数网民上网的入口都是先打开百度,然后再搜索xxx,进入,为了给女神惊喜,决定篡改百度首页让女神惊呆,当然不是黑了百度,目前没这个实力,但是我们可以修改host文件,将www.baidu ...
css top 定位百分比,css 使用relative设置top为百分比值的方法(仿百度首页)
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现垂直伸缩 * ...
如何开发一个用户脚本系列(3)——脚本一:百度首页和搜索页面添加 Google 搜索框...
2019独角兽企业重金招聘Python工程师标准>>> 在本系列的前两篇文章中,我们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍.从这篇文章开始,将以已发布可用的脚本为基础, ...
防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...
仿百度html页面,HTML实战篇：html仿百度首页
原标题:HTML实战篇:html仿百度首页本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面. 1)制作页面所用的知识点我们首先来分析一下百度首页的页面效果图百度首页由头部的一 ...

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

仿百度首页（可进行百度搜索）相关推荐

最新文章

热门文章