无废话网页重构系列——（8）主干结构

前面章节方法论，从本章节开始实践。

布局中的层级关系，主要体现在主干结构、栅格结构、组件模块结构三部分，本篇讲主干结构。

主干结构按级别分成“站点”和“页面”，即site和page。如电商或门户站点，站点有统一的头尾、悬浮挂件，站点有很多不一样的子站和栏目。

站点主干结构

<div class="site__topbar">
  <!-- nav, user info, sign  -->
</div>

<header class="site__header">
  <!-- logo, menu, category, search, cart -->
</header>

<main class="site__container">
  <!-- page -->
</main>

<footer class="site__footer">
  <!-- service, copyright, beian -->
</footer>

<div class="site__pendant">
  <!-- qr, back to top -->
</div>

页面主干结构

<div class="page">

  <header class="page__header">
    <!-- logo, nav -->
  </header>

  <main class="page__container">
    <!-- container -->
  </main>

  <footer class="page__footer">
    <!-- service, copyright, beian -->
  </footer>

  <div class="page__pendant">
    <!-- qr, back to top -->
  </div>

</div>