qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 职场与人生 › IT职场那些事 › Web前端：百度首页克隆 - 前端开辟训练

Web前端：百度首页克隆 - 前端开辟训练

[复制链接]
发表于 2025-9-27 15:43:45 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
一、项目概述

1.1 训练目的：通过实现百度首页经典结构把握HTML+CSS底子结构本领


1.2 功能要求：



  • 顶部导航栏结构
  • 中央搜刮区结构
  • 底部信息栏结构
  • 底子交互结果


二、技能栈 



  • HTML5 语义化标签
  • CSS3 样式
  • 传统结构方案（浮动结构）
  • 底子CSS Reset


三、实现步调

 3.1 项目初始化

  1. mkdir baidu-clone
  2. cd baidu-clone
  3. touch index.html
  4. mkdir css img
  5. touch css/reset.css css/home.css
复制代码
3.2 文件结构

  1. ├── css/
  2. │   ├── reset.css      # 浏览器样式重置
  3. │   └── home.css      # 主样式文件
  4. ├── img/              # 图片资源
  5. ├── index.html        # 主页面
复制代码
3.3 HTML结构剖析

  1. <!-- 顶部导航区 -->
  2. <div class="top-nav">
  3.   <ul class="nav-list">
  4.     <li><a href="#">更多产品</a></li>
  5.     <!-- 其他导航项... -->
  6.   </ul>
  7. </div>
  9. <!-- 搜索区 -->
  10. <div class="search-area">
  11.   <div class="logo">
  12.     <img src="./img/baidu.png" alt="百度LOGO">
  13.   </div>
  14.   <div class="search-box">
  15.     <input type="text">
  16.     <button>百度一下</button>
  17.   </div>
  18. </div>
  20. <!-- 底部信息 -->
  21. <footer class="footer">
  22.   <!-- 二维码和版权信息 -->
  23. </footer>
复制代码
3.4 CSS焦点实现要点

3.4.1 导航栏结构

  1. /* 右浮动布局实现 */
  2. .nav-list li {
  3.   float: right;
  4.   margin-right: 25px;
  5. }
  7. /* 悬停交互效果 */
  8. .nav-list li:hover {
  9.   background: #315efb;
  10.   color: white;
  11. }
复制代码
3.4.2 搜刮框结构

  1. .search-box {
  2.   width: 682px;
  3.   border: 1px solid #ccc;
  4.   position: relative;
  5. }
  7. .search-box input {
  8.   width: 100%;
  9.   height: 52px;
  10.   padding-left: 15px;
  11. }
  13. .camera-icon {
  14.   position: absolute;
  15.   right: 28px;
  16.   top: 16px;
  17. }
复制代码
3.5 焦点寻衅与办理方案

1.浮动结构管理


  • 题目：浮动元素导致父容器高度塌陷
  • 方案：利用clear: both扫除浮动
  1. <div style="clear: both;"></div>
复制代码
2.垂直居中实现


  • 利用margin: 0 auto实现水平居中
  • 利用padding调解垂直间距
3.跨欣赏器样式同等性


  • 利用CSS Reset初始化默认样式
  1. /* 重置所有元素的内外边距 */
  2. body, html, ul, li,... {
  3.   margin: 0;
  4.   padding: 0;
  5. }
复制代码
四、完备代码展示

1.index.html代码：

  1. <!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title></title>                <link rel="stylesheet" href="./css/reset.css" />                <link rel="stylesheet" href="./css/home.css" />        </head>        <body>                <!-- 右上角内容 -->                <div>                        <ul class="new">                                <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>                                <li><a href="">视频</a></li>                                <li><a href="">hao123舆图</a></li>                                <li><a href="">消息</a></li>                        </ul>                </div>                <!-- 扫除浮动 -->                <div style="clear: both;"></div>                <!-- 中央大LOGO -->                <div class="logo">                        <img src="./img/baidu.png" alt="百度" />                </div>                <!-- 搜素栏 -->                <div>                        <div class="sousuo">                                <input class="text" type="text" />                                <a href="https://www.baidu.com"><img src="./img/camera.png" alt="照相机" /></a>                        </div>                        <button class="button"> 百度一下</button>                </div>                <!-- 扫除浮动 -->                <div style="clear: both;"></div>                <!-- 底部标签 -->                <footer class="dibu">                        <div><img src="./img/erweima.png" alt="二维码" /></div>                        <p style="color: #9f9f9f; margin-top: 10px;">百度</p>                        <div class="dibuneiron">                                <p class="xiahuaxian">把百度设为主页</p>                                <p class="xiahuaxian">关于百度</p>                                <p class="xiahuaxian">About Baidu</p>                                <p class="xiahuaxian">百度推广</p>                        </div>                        <div class="dibuneiron">                                <p>©2018 Baidu</p>                                <p class="xiahuaxian">利用百度前必读</p>                                <p class="xiahuaxian">意见反馈</p>                                <p class="xiahuaxian">京ICP证030173号</p>                                <p>京公网安备11000002000001</p>                        </div>                </footer>        </body></html>
复制代码
2.rest.css代码：

  1. body,
  2. html,
  3. h1,
  4. h2,
  5. h3,
  6. h4,
  7. h5,
  8. h6,
  9. ul,
  10. ol,
  11. li,
  12. dl,
  13. dt,
  14. dd,
  15. header,
  16. menu,
  17. section,
  18. p,
  19. input,
  20. td,
  21. th,
  22. ins {
  23.         padding: 0;
  24.         margin: 0;
  25. }
  27. a {
  28.         text-decoration: none;
  29.         color: #333;
  30. }
  32. img {
  33.         vertical-align: top;
  34. }
  36. ul,
  37. li {
  38.         list-style: none;
  39. }
  41. button {
  42.         outline: none;
  43.         border: none;
  44. }
复制代码
3.home.css代码：

  1. .new>li {
  2.         font-size: 14px;
  3.         float: right;
  4.         margin-right: 25px;
  5.         text-decoration: black underline;
  6. }
  8. .new>li:hover a {
  9.         background-color: #315efb;
  10.         text-decoration: white underline;
  11.         color: white;
  13. }
  15. .logo {
  17.         text-align: center;
  18. }
  20. .logo>img {
  21.         image-rendering: auto;
  22. }
  24. .sousuo {
  25.         border: 1px solid #ccc;
  26.         height: 52px;
  27.         width: 682px;
  28.         margin-left: 320px;
  29.         float: left;
  30. }
  32. .text {
  33.         padding-left: 15px;
  34.         font-size: 16px;
  35.         border: 0;
  36.         height: 52px;
  37.         width: 682px;
  38. }
  40. .text:active {
  41.         border: 0;
  42. }
  44. .sousuo a>img {
  45.         width: 20px;
  46.         height: 20px;
  47.         float: right;
  48.         margin-top: 16px;
  49.         margin-right: 28px;
  50.         z-index: 1;
  51.         position: relative;
  52.         top: -52px;
  55. }
  57. .button {
  58.         float: left;
  59.         height: 54px;
  60.         width: 140px;
  61.         font-size: 20px;
  62.         color: white;
  63.         background-color: #4e6ef2;
  64. }
  66. .dibu {
  67.         margin: 0px auto;
  68.         text-align: center;
  69.         margin-top: 247px;
  70. }
  72. .dibu div>img {
  73.         width: 100px;
  74.         height: 100px;
  75. }
  77. .dibuneiron {
  78.         margin-top: 15px;
  79. }
  81. .dibuneiron>p {
  82.         color: #9f9f9f;
  83.         display: inline-block;
  84. }
  86. .xiahuaxian {
  87.         text-decoration: #9f9f9f underline;
  89. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

返回列表

伤心客
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表