百度首页制作 （仿百度首页）
2024-04-12 05:38:17
百度首页制作 （仿百度首页）
介绍：
用html+css制作的百度首页
带搜索功能，点击会进行跳转到搜索页面
效果图：
鼠标移入悬浮效果：
代码
<!DOCTYPE html>
<html lang="zn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度一下，你就知道</title><link rel="shortcut icon" href="./static/img/baidu_icon.png" type="image/x-icon"><link rel="stylesheet" href="./static/css/index.css"></head><body><div class="header"><div class="banner"><div class="left-bar"><a href="#" class="left-item">新闻</a><a href="#" class="left-item">hao123</a><a href="#" class="left-item">地图</a><a href="#" class="left-item">视频</a><a href="#" class="left-item">贴吧</a><a href="#" class="left-item">网盘</a><div class="more"><a href="#" class="left-item">更多</a><div class="more-item"><div class="more-icon"><a href="#"><img src="./static/img/newfanyi.png" alt=""><p>翻译</p></a><a href="#"><img src="./static/img/newxueshuicon.png" alt=""><p>学术</p></a><a href="#"><img src="./static/img/newwenku.png" alt=""><p>文库</p></a><a href="#"><img src="./static/img/newbaike.png" alt=""><p>百科</p></a><a href="#"><img src="./static/img/newzhidao.png" alt=""><p>知道</p></a><a href="#"><img src="./static/img/newjiankang.png" alt=""><p>健康</p></a><a href="#"><img src="./static/img/yingxiaoicon.png" alt=""><p>营销推广</p></a><a href="#"><img src="./static/img/newzhibo.png" alt=""><p>直播</p></a><a href="#"><img src="./static/img/newyinyue.png" alt=""><p>音乐</p></a></div><a class="more-link" href="">查看全部百度产品></a></div></div></div><div class="right-bar"><li><a href="#" class="right-item">设置</a><ul><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></li><li><a href="#" id="login" class="right-item"> 登陆 </a></li></div></div></div><div class="content"><div class="baidu-logo"><a href="#" title="百度一下,你就知道"><img src="./static/img/baidu_logo.png" alt="百度"></a></div><div class="search"><span class="search-bar"><form action="https://www.baidu.com/s?wd=" method="get" target="_blank"><input type="text" id="search-text" name="wd" class="input-bar"><input type="submit" value="百度一下" class="search-btn"><span class="photo-search"></span></form></span></div><div class="news-title"><div class="news-header"><p class="left">百度热榜<img src="static/img/arrow.png" /></p><p class="right"><img src="static/img/refresh.png" />换一换</p></div><div class="news-list"><a href="#"><li><p>1</p><p class="news-text">中美元首通话释放三大关键信息</p></li></a><a href="#"><li><p>2</p><p class="news-text">今日春分</p><span class="hot">热</span></li></a><a href="#"><li><p>3</p><p class="news-text">2021年结婚登记人数创36年新低</p><span class="hot">热</span></li></a><a href="#"><li><p id="seccol">4</p><p class="news-text">我们一起跨过这场“倒春寒”</p><span class="hot">热</span></li></a><a href="#"><li><p class="seccol">5</p><p class="news-text">当事人回应拼多多六万人砍价失败热</p><span class="hot">热</span></li></a><a href="#"><li><p class="seccol">6</p><p class="news-text">女子晚走一分钟被隔离在火锅店</p></li></a></div></div></div><div class="footer"><div><span><a href="#">关于百度</a></span><span><a href="#">About Baidu</a></span><span><a href="#">使用百度前必读</a></span><span><a href="#">帮助中心</a></span><span><a href="#">京公网安备11000002000001号</a></span><span><a href="#">京ICP证030173号</a></span><span>©2022 Baidu </span><span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span><span><a href="#">信息网络传播视听节目许可证 0110516</a></span></div></div></body></html>百度首页制作 （仿百度首页）资源下载
百度首页制作 （仿百度首页）相关推荐
- html如何设置跳转到百度页面,js仿百度切换皮肤功能（html+css）
js仿百度切换皮肤效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: 换肤 热门 收起 css代码: * { margin:0px; pad ...
- 使用html仿支付宝首页,iOS 仿支付宝首页样式（二）
那篇文章里面方法有个一弊端,就是UITableView的高度和Cell的总高度一致,也就是UITableView不能滑动,UITableViewCell的复用机制页就不起作用了.哈哈,懒人版的支付宝首 ...
- 仿百度地图 android,仿百度地图街景实现
使用过百度地图的同学知道,它有个街景功能,可以看到许多地方的实景.这里就其街景内容的实现,进行下学习. 在百度地图SDK的官网上可以看到,百度对开发者提供了很多相关的内容,方便我们进行学习.关于SDK ...
- 仿百度搜索html,仿百度搜索智能提示(纯JS实现)
类型:搜索查找大小:699KB语言:中文 评分:10.0 标签: 立即下载 项目中经常用到搜索智能提示,开源的象jQuery.yui等都有,但是觉得有点臃肿,于是自己用ajaxpro+JavaScri ...
- 仿百度壁纸客户端（三）——首页单向，双向事件冲突处理，壁纸列表的实现
仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
- 仿百度壁纸客户端（三）——首页单向，双向事件冲突处理，壁纸列表的实现...
仿百度壁纸客户端(三)--首页单向,双向事件冲突处理,壁纸列表的实现 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
- 仿百度壁纸客户端（四）——自定义上拉加载实现精选壁纸墙
仿百度壁纸客户端(四)--自定义上拉加载实现精选壁纸墙 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端(二)--主页自 ...
- 仿百度壁纸客户端（一）——主框架搭建,自定义Tab+ViewPager+Fragment
仿百度壁纸客户端(一)--主框架搭建,自定义Tab+ViewPager+Fragment 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment ...
- 仿百度壁纸客户端（六）——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
仿百度壁纸客户端(六)--完结篇之Gallery画廊实现壁纸预览已经项目细节优化 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度 ...
- 仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
最新文章
- Java DNS查询内部实现
- Python入门100题 | 第007题
- 标普500指数成分股公司2020年的全年每股收益为110美元，较2019年下跌33%。
- GDT、GDTR、LDT、LDTR的理解
- 1、绪论初识机器学习
- wget抓取网站, 模拟手机端抓取
- 【算法】java 用 数组 模拟 队列
- Redis报错#MISCONF Redis is configured to save RDB snapshots, but is currently not
- 强化学习笔记：马尔科夫链介绍及基于Python的蒙特卡洛仿真
- DN值、辐射率、反射率等
- 英特尔服务器主板怎么重装系统,foxconn主板怎么重装系统
- Android根build.gradle中buildscript和allprojects的作用和区别是什么
- 文章：Mapping regulatory variants controlling gene expression in drought response and tolerance
- 求生之路2服务器ip直连,正版求生之路2好友直连显示该会话已不可用，无法联机...
- Python 金融量化 RSI相对强弱指标
- 猫咪藏在哪个房间python项目_铲屎官必读：猫咪为什么都喜欢藏在盒子里？
- 利用FFMPEG实现音频视频升降调
- 太赫兹芯片是什么原理_太赫兹科学与技术原理
- 判断h5在两端是在微信环境还是企业微信环境
- VSCode正则搜索中文字符