主干结构

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

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

主干结构按级别分成“站点”和“页面”，即 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>

class="site__*" 、class="page__*" 作为主干结构部分，不声明 border, margin, padding, float 等样式属性，主干结构主要用来表意，做各页面进出切换效果，节假日、做促销活动时可以挂个情景背景。

---

更新日志：

• 2015-07-18