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

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

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

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

站点主干结构

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<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>

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

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-8-tree-trunk.html