基础布局Basic Layout

创建语义清晰的布局结构

基础布局 Base - 图1

  1. <div class="wrapper">
  2. <div class="header">Header</div>
  3. <div class="main">Main</div>
  4. <div class="footer">Footer</div>
  5. </div>

中心布局Centered Layout

创建<div class="shell">将界面居中,容器是可以独立设定的,若你只想让它在<div class="main">中生效就仅在其中添加即可,容器默认设定是max-width:91rem

基础布局 Base - 图2

  1. <div class="wrapper">
  2. <div class="header">
  3. <div class="shell">Header</div>
  4. </div>
  5. <div class="main">
  6. <div class="shell">Main</div>
  7. </div>
  8. <div class="footer">
  9. <div class="shell">Footer</div>
  10. </div>
  11. </div>