主干结构

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

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

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

站点主干结构

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

页面主干结构

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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


更新日志:

  • 2015-07-18

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai