微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 简单仿百度搜索首页
博主信息
博文 16
粉丝 2
评论 0
访问量 25547
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
简单仿百度搜索首页
肖傲的博客
原创
2314人浏览过

html代码：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入css样式 -->
  7.     <link rel="stylesheet" href="css/index.css" />
  8.     <!-- 引入图标 -->
  9.     <link rel="stylesheet" href="css/iconfont.css">
  10.     <title>仿百度</title>
  11.   </head>
  12.   <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <ul class="header-left">
  16.           <li><a href="#" target="_blank">新闻</a></li>
  17.           <li><a href="#" target="_blank">hao123</a></li>
  18.           <li><a href="#" target="_blank">地图</a></li>
  19.           <li><a href="#" target="_blank">视频</a></li>
  20.           <li><a href="#" target="_blank">贴吧</a></li>
  21.           <li><a href="#" target="_blank">学术</a></li>
  22.           <li><a href="#" target="_blank">更多</a></li>
  23.         </ul>
  24.         <div class="header-right">
  25.           <a href="">抗击疫情</a>
  26.           <span>设置</span>
  27.           <a href="">登录</a>
  28.         </div>
  29.     </header>
  30.     <!-- 中间 -->
  31.     <div class="logo">
  32.           <a href=""><img src="logo1.png" alt=""></a>
  33.     </div>
  34.     <div class="search">
  35.       <span class="iconfont icon-xiangji1 zx" ></span>
  36.         <input type="text" name="" />
  37.         <a href="">百度一下</a>
  38.     </div>
  39.     <!-- 榜单区 -->
  40.     <div class="hot-head">
  41.           <a href="" class="hot-title">百度热搜榜</a>
  42.           <a href="" class="hot-change">
  43.             <span class="iconfont icon-zhuanhuan- zh"></span>
  44.             <span>换一换</span>
  45.           </a>
  46.     </div>
  47.     <div class="hot-list">
  48.       <div class="hot-left">
  49.         <ul>
  50.           <li>
  51.             <span class="iconfont icon-1_square_solid number1"></span>
  52.             <a href="">90后姑娘熬夜战疫胖了十几斤</a>
  53.             <span class="iconfont icon-re1 re1" ></span>
  54.             </a>
  55.           </li>
  56.           <li>
  57.             <span class="iconfont icon-2_square_solid number2"></span>
  58.             <a href="#">大碗宽面的姐姐们评论张萌</a>
  59.             <span class="iconfont icon-xin1 xin1"></span>
  60.           </li>
  61.           <li>
  62.             <span class="iconfont icon-3_square_solid number3"></span>
  63.             <a href="#">教育部给本科教学打分</a>
  64.           </li>
  65.         </ul>
  66.       </div>
  67.       <div class="hot-right">
  68.         <ul>
  69.           <li>
  70.             <span class="iconfont icon-4_square_solid number4"></span>
  71.             <a href="">全国人大代表申纪兰逝世</a>
  72.             </a>
  73.           </li>
  74.           <li>
  75.             <span class="iconfont icon-5_square_solid number4"></span>
  76.             <a href="#">北京新增14例确诊病例</a>
  77.           </li>
  78.           <li>
  79.             <span class="iconfont icon-6_square_solid number4"></span>
  80.             <a href="#">快乐大本营选常驻新人</a>
  81.           </li>
  82.         </ul>
  83.       </div>
  84.     </div>
  85.     <!-- 页脚 -->
  86.     <footer>
  87.       <div class="footer-left">
  88.           <a href="" target="_blank">设为首页</a>
  89.           <a href="" target="_blank">关于百度</a>
  90.           <a href="" target="_blank">About Baidu</a>
  91.           <a href="" target="_blank">百度营销</a>
  92.           <a href="" target="_blank">使用百度前必读</a>
  93.           <a href="" target="_blank">意见反馈</a>
  94.           <a href="" target="_blank">帮助中心</a> 
  95.       </div>
  96.       <div class="footer-right">
  97.         <span>©2020 Baidu&nbsp;&nbsp;&nbsp;&nbsp;(京)-经营性-2017-0020</span>
  98.         <a href="">京公网安备11000002000001号</a>
  99.         <span>京ICP证030173号</span>
  100.       </div>
  101.     </footer>
  102.   </body>
  103. </html>

css代码：

  1. * {
  2.   /* 初始化样式 */
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. /* 去a标签除下划线 */
  8. a {
  9.   text-decoration: none;
  10.   font-size: 13px;
  11.   color: #222;
  12. }
  13. li {
  14.   list-style: none;
  15. }
  17. /* 设置为弹性容器，并垂直排列 */
  18. html,
  19. body {
  20.   display: flex;
  21.   flex-direction: column;
  22.   height: 100%;
  23. }
  24. /* 头部区域 */
  25. header {
  26.   display: flex;
  27.   min-width: 1265px;
  28.   height: 60px;
  29.   align-items: center;
  30.   /* 水平方向靠两边排列 */
  31.   justify-content: space-between;
  32. }
  33. /* 左边部分 */
  34. header > .header-left {
  35.   display: flex;
  36.   /* 居中对齐 */
  37.   align-items: center;
  38.   height: 60px;
  39.   /* 左外边距20px */
  40.   margin-left: 20px;
  41. }
  42. header > .header-left > li > a {
  43.   padding: 0 15px;
  44. }
  45. header > .header-left > li > a:hover {
  46.   color: #4e71f2;
  47. }
  49. /* 右边部分 */
  50. header > .header-right {
  51.   display: flex;
  52.   /* 居中对齐 */
  53.   align-items: center;
  54.   height: 60px;
  55.   /* 左外边距20px */
  56.   margin-right: 23px;
  57. }
  58. header > .header-right > a,
  59. span {
  60.   padding: 3px 14px;
  61.   font-size: 13px;
  62. }
  64. header > .header-right > a:first-of-type {
  65.   color: #f63051;
  66. }
  67. header > .header-right > a:first-of-type:hover {
  68.   color: #4e71f2;
  69. }
  70. header > .header-right > a:last-of-type {
  71.   background-color: #4e71f2;
  72.   border-radius: 6px;
  73.   height: 25px;
  74.   color: #eef2fe;
  75.   margin: 0 10px;
  76. }
  78. header > .header-right > span:hover {
  79.   color: #4e71f2;
  80. }
  82. /* logo部分 */
  84. .logo {
  85.   display: flex;
  86.   align-content: center;
  87.   margin: 0 auto;
  88. }
  89. .logo > a > img {
  90.   height: 129px;
  91.   width: 270px;
  92. }
  93. /* 搜索区 */
  94. .search {
  95.   display: flex;
  96.   justify-content: center;
  97.   line-height: 44px;
  98.   position: relative;
  99. }
  100. .search > input {
  101.   width: 546px;
  102.   height: 44px;
  103.   border: 2px solid #a7aab5;
  104.   border-right: none;
  105.   border-radius: 10px 0 0 10px;
  106. }
  107. /* 定位后通过反向高度和内边距撑开到想要的位置 */
  108. .search > span {
  109.   position: absolute;
  110.   /* border: 1px solid red; */
  111.   padding-left: 400px;
  112.   top: -25%;
  113. }
  114. /* 设置照相机图标大小颜色 */
  115. .search > .zx {
  116.   font-size: 25px;
  117.   color: #a7aab5;
  118. }
  119. .search > a {
  120.   height: 44px;
  121.   width: 108px;
  122.   text-align: center;
  123.   background-color: #4e6ef2;
  124.   color: #eef2fe;
  125.   font-size: 17px;
  126.   border-radius: 0 15px 15px 0;
  127. }
  128. /* 鼠标悬停样式 */
  129. .search > a:hover {
  130.   background-color: #4662d9;
  131. }
  133. .search > .zx:hover {
  134.   color: #4e6ef2;
  135. }
  137. .search > input:hover {
  138.   border: 2px solid #626675;
  139.   border-right: none;
  140. }
  142. /* 热搜区 */
  144. .hot-head {
  145.   width: 654px;
  146.   display: flex;
  147.   /* 主轴为水平靠两端边对齐排列 */
  148.   justify-content: space-between;
  149.   margin: 25px auto;
  150. }
  151. .hot-head > a:first-of-type {
  152.   font-size: 14px;
  153. }
  154. .hot-head > a > span:last-of-type {
  155.   font-size: 13px;
  156.   color: #9195a3;
  157.   /* 字体变细 */
  158.   font: 400;
  159. }
  160. .hot-head > a > .zh {
  161.   font-size: 16px;
  162.   color: #9195a3;
  163.   margin-right: -28px;
  164. }
  166. /* 列表区 */
  167. .hot-list {
  168.   display: flex;
  169.   width: 654px;
  170.   height: 100%;
  171.   margin: 5px auto;
  172. }
  173. /* 右边 */
  174. .hot-list > .hot-left {
  175.   display: flex;
  176.   flex-grow: 1;
  177.   margin-right: 50px;
  178. }
  179. .hot-list > .hot-left > ul > li {
  180.   padding-top: 10px;
  181. }
  182. .hot-list > .hot-left > ul > li > a {
  183.   font-size: 14px;
  184.   line-height: 20px;
  185.   text-align: center;
  186. }
  187. /* 左边 */
  188. .hot-list > .hot-right {
  189.   display: flex;
  190.   flex-grow: 1;
  191. }
  192. .hot-list > .hot-right > ul > li {
  193.   padding-top: 10px;
  194. }
  195. .hot-list > .hot-right > ul > li > a {
  196.   font-size: 14px;
  197.   line-height: 20px;
  198.   text-align: center;
  199. }
  200. /* 鼠标悬停样式 */
  201. .hot-list > .hot-left > ul > li > a:hover {
  202.   color: #4e6ef2;
  203. }
  204. .hot-list > .hot-right > ul > li > a:hover {
  205.   color: #4e6ef2;
  206. }
  207. /* 图标样式 */
  208. .hot-list > .hot-left > ul > li > .number1 {
  209.   color: #fcd533;
  210. }
  211. .hot-list > .hot-left > ul > li > .re1 {
  212.   color: #faab06;
  213. }
  214. .hot-list > .hot-left > ul > li > .number2 {
  215.   color: #b9d5f3;
  216. }
  217. .hot-list > .hot-left > ul > li > .xin1 {
  218.   color: #ff4589;
  219. }
  220. .hot-list > .hot-left > ul > li > .number3 {
  221.   color: #ead1bb;
  222. }
  223. .hot-list > .hot-right > ul > li > .number4 {
  224.   color: #9195a3;
  225. }
  226. /* 页脚区 */
  227. footer {
  228.   display: flex;
  229.   min-width: 1265px;
  230.   height: 40px;
  231.   align-items: center;
  232.   justify-content: space-between;
  233.   background-color: #fafafa;
  234. }
  235. /* 页脚区 */
  236. footer > .footer-left {
  237.   margin-left: 14px;
  238. }
  239. footer > .footer-left > a {
  240.   font-size: 12px;
  241.   color: #9e95ad;
  242.   padding: 13px;
  243. }
  244. footer > .footer-right {
  245.   margin-right: 14px;
  246. }
  247. footer > .footer-right > a,
  248. span {
  249.   font-size: 12px;
  250.   color: #9e95ad;
  251.   padding: 13px;
  252. }
  253. /* 鼠标悬停样式 */
  254. footer > .footer-left > a:hover {
  255.   color: #000;
  256. }
  257. footer > .footer-right > a:hover {
  258.   color: #000;
  259. }

总结：flex布局可以快速让页面向两边靠边对齐。弹性布局中定位使用不太掌握。目前只能写简单页面，复杂的还要多学习下。多后面要多练习写几个其他网页，争取让自己多熟练一点。页面小小，代码不少。要想掌握，还需练好。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：仿得不错， 其实百度并不好做的， 科技含量很高， 现在只是仿的静态页面而已
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录