AitSchool

公共结构

为首页、详情页、历史页三个页面添加公共的结构样式，三个页面的公共结构相同，公共头尾和内容区域。

  1. 在 body 标签中添加公共头部、尾部、内容部分的结构标签
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询</title>
</head>
<body>
    <header></header>
    <div></div>
    <footer></footer>
</body>
</html>
  1. 完善公共头部标签的内容

公共头部里面包含两个模块，一个是用户信息，另一个是 导航信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询</title>
</head>
<body>
    <header>
        <div></div>
        <nav></nav>
    </header>
    <div></div>
    <footer></footer>
</body>
</html>
  1. 完善标签的class属性

如上代码我们可以看到除了 header、footer、nav 之外，有 2 个 div 标签。一眼看去我们并不知道这个 div 是干什么用的，以后涉及到跟多节点时候设置让人更加疑惑。配合之后CSS的选择器（在下一章CSS内容讲解）选择元素设置样式，class 是必要的属性。在描写 HTML 结构时候，我们建议在 body 标签内给每一个节点加上英文语意的 class 属性值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询</title>
</head>
<body>
    <header class="page-header">
        <div class="user-info"></div>
        <nav class="page-nav"></nav>
    </header>
    <div class="page-body"></div>
    <footer class="page-footer"></footer>
</body>
</html>
  1. 添加用户信息内容，分别有头像和昵称
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询</title>
</head>
<body>
    <header class="page-header">
        <div class="user-info">
            <img class="user-avatar" src="./avatar.png">
            <span class="user-nickName">张三</span>
        </div>
        <nav class="page-nav"></nav>
    </header>
    <div class="page-body"></div>
    <footer class="page-footer"></footer>
</body>
</html>
  1. 为添加公共尾部文本
<footer class="page-footer">
    <p>Copyright  2018 扎克斯未来体验技术部出品</p>
</footer>

← 首页内容 →