AitSchool

练习 - 百度首页

在浏览器中打开百度首页，本节课程我们将参照百度首页完成其 HTML 结构。

首先我们分析其页面结构，分别包含：

  • 头部
    • 导航
  • 主体
    • Logo图片
    • 搜索表单
      • 输入框
      • 按钮
  • 脚部
    • 二维码
    • 注脚内容

我们完成的逻辑为：

  1. 新建项目文件夹及文件
  2. 创建 HTML 结构
  3. 创建 头部导航信息
  4. 创建 主体内容信息 Logo/表单
  5. 创建 脚步信息

1. 新建项目

在桌面创建baidu_demo文件夹

cd ~/Desktop && mkdir baidu_demo

进入baidu_demo文件夹，创建 index.html 文件

cd baidu_demo && touch index.html

2. 创建页面结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>百度一下，你就知道</title>
</head>
<body>
  <header class="page-header"></header>
  <div class="page-mainer"></div>
  <footer class="page-footer"></footer>
</body>
</html>

3. 头部导航信息

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>百度一下，你就知道</title>
</head>
<body>
  <header class="page-header">
    <!-- 导航 -->
    <nav>
      <a href="javascript:;">新闻</a>
      <a href="javascript:;">hao123</a>
      <a href="javascript:;">地图</a>
      <a href="javascript:;">视频</a>
      <a href="javascript:;">贴吧</a>
      <a href="javascript:;">学术</a>
      <a href="javascript:;">登录</a>
      <a href="javascript:;">设置</a>
      <a href="javascript:;">更多产品</a>
    </nav>
    <!-- 导航 end -->
  </header>
  <div class="page-mainer"></div>
  <footer class="page-footer"></footer>
</body>
</html>

4. 主体内容信息

我们可以观察到主体区域里面有比较醒目的 Logo 和一个搜索框

  • Logo
  • 搜索框
  1. Logo 图片自己独立一行，因为图片是行内元素，如果他希望自己独立一行的话需要在外面单独包一成块级元素就是 div 。
<div class="logo-container">
  <img class="logo" src="https://www.baidu.com/img/bd_logo1.png" alt="baidu"/>
</div>
  1. 搜索框包含输入框和提交按钮
<div class="form-container">
  <form>
    <input class="form-search" type="text" name="search" placeholder="">
    <button class="submit-btn">百度一下</button>
  </form>
</div>

合并代码

<div class="page-mainer">
  <div class="logo-container">
    <img class="logo" src="https://www.baidu.com/img/bd_logo1.png" alt="baidu"/>
  </div>
  <div class="form-container">
    <form>
        <input class="form-search" type="text" name="search" placeholder="">
        <button class="submit-btn">百度一下</button>
    </form>
  </div>
</div>

5. 脚步信息

脚部分信息包含三个内容

  • 二维码
  • 信息（把百度设为主页 关于百度About Baidu百度推广）
  • 信息（©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号 京公网安备11000002000001号 ）

同样我们一个个来拆分其结构

  1. 二维码
<div class="qrcode-contaienr">
  <img class="qrcode" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png">
</div>
  1. 信息部分我们可以看到有下划线的都是可以调整的部分，都应该使用 a 标签
<p class="footer-info">
  <a href="javascript:;">把百度设为主页</a>
  <a href="javascript:;">关于百度About</a>
  <a href="javascript:;">Baidu百度推广</a>
</p>
  1. 剩下的信息部分同理，在需要跳转的文字，使用 a 标签
<p class="footer-info">©2018 Baidu <a href="javascript:;">使用百度前必读</a> <a href="javascript:;">意见反馈</a> 京ICP证030173号  <a href="javascript:;">京公网安备11000002000001号</a></p>
  1. 在 footer 标签中合并三小部分的代码
<footer class="page-footer">
  <div class="qrcode-contaienr">
    <img class="qrcode" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png">
  </div>
  <p class="footer-info">
    <a href="javascript:;">把百度设为主页</a>
    <a href="javascript:;">关于百度About</a>
    <a href="javascript:;">Baidu百度推广</a>
  </p>
  <p class="footer-info">©2018 Baidu <a href="javascript:;">使用百度前必读</a> <a href="javascript:;">意见反馈</a> 京ICP证030173号  <a href="javascript:;">京公网安备11000002000001号</a></p>
</footer>

最终代码参考

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>百度一下，你就知道</title>
</head>
<body>
  <header class="page-header">
    <nav>
      <a href="javascript:;">新闻</a>
      <a href="javascript:;">hao123</a>
      <a href="javascript:;">地图</a>
      <a href="javascript:;">视频</a>
      <a href="javascript:;">贴吧</a>
      <a href="javascript:;">学术</a>
      <a href="javascript:;">登录</a>
      <a href="javascript:;">设置</a>
      <a href="javascript:;">更多产品</a>
    </nav>
  </header>
  <div class="page-mainer">
    <div class="logo-container">
      <img class="logo" src="https://www.baidu.com/img/bd_logo1.png" alt="baidu"/>
    </div>
    <div class="form-container">
      <input class="form-search" type="text" name="search" placeholder="">
      <button class="submit-btn">百度一下</button>
    </div>
  </div>
  <footer class="page-footer">
    <div class="qrcode-contaienr">
      <img class="qrcode" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png">
    </div>
    <p class="footer-info">
      <a href="javascript:;">把百度设为主页</a>
      <a href="javascript:;">关于百度About</a>
      <a href="javascript:;">Baidu百度推广</a>
    </p>
    <p class="footer-info">©2018 Baidu <a href="javascript:;">使用百度前必读</a> <a href="javascript:;">意见反馈</a> 京ICP证030173号  <a href="javascript:;">京公网安备11000002000001号</a></p>
  </footer>
</body>
</html>

←