zoukankan      html  css  js  c++  java

  • 无废话网页重构系列——（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

    如您发现有误，请联系xianghongai@gmail.com指正。
  • 相关阅读:
    预编译命令 #if DEBUG
    conda常用命令
    tensorflow 安装指南
    LocNET和池化理解
    同时安装cuda8和cuda9
    np.transpose
    python中List的slice用法
    书单
    训练工程
    linux 查看进程
  • 原文地址：https://www.cnblogs.com/daxiang/p/4661936.html
Copyright © 2011-2022 走看看