• 无废话网页重构系列——(8)主干结构


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

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

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

    站点主干结构

    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

    如您发现有误,请联系xianghongai@gmail.com指正。
  • 相关阅读:
    制造者为什么重要
    归因理论
    初创业谨记有三法宝:顶梁柱、现金牛、北极星
    华特迪士尼语录
    说好一个创业故事的5个步骤
    接口
    抽象类_模板方法设计模式
    抽象类与抽象方法
    非static和static初始化块
    单例设计模式
  • 原文地址:https://www.cnblogs.com/daxiang/p/4661936.html
Copyright © 2020-2023  润新知