基础布局Basic layout

创建语义清晰的布局结构

Header
Main
<!-- wrapper begin -->
<div class="wrapper">
    <!-- header begin -->
    <div class="header">Header</div>
    <!-- header end -->
    <!-- main begin -->
    <div class="main">Main</div>
    <!-- main end -->
    <!-- footer end -->
    <div class="footer">Footer</div>
    <!-- footer end -->
</div>
<!-- wrapper end -->

中心布局Centered layout

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

Header
Main
<!-- wrapper begin -->
<div class="wrapper">
    <!-- header begin -->
    <div class="header">
        <div class="shell">
        Header
        </div>
    </div>
    <!-- header end -->
    <!-- main begin -->
    <div class="main">
        <div class="shell">
        Main
        </div>
    </div>
    <!-- main end -->
    <!-- footer end -->
    <div class="footer">
        <div class="shell">
        Footer
        </div>
    </div>
    <!-- footer end -->
</div>
<!-- wrapper end -->

侧边栏与内容结构Sidebar and Container

创建侧边栏<div class="sidebar">与内容结构<div class="container">

Header
Sidebar
Container
<!-- wrapper begin -->
<div class="wrapper">
    <!-- header begin -->
    <div class="header">
        <div class="shell">
        Header
        </div>
    </div>
    <!-- header end -->
    <!-- main begin -->
    <div class="main">
        <div class="shell">
            Main
            <div class="sidebar">Sidebar</div>
            <div class="container">Container</div>
        </div>
    </div>
    <!-- main end -->
    <!-- footer end -->
    <div class="footer">
        <div class="shell">
        Footer
        </div>
    </div>
    <!-- footer end -->
</div>
<!-- wrapper end -->

侧边栏与内容结构浮动Right Sidebar and Left Container

侧边栏向右浮动添加class="fr",内容结构向左浮动添加class="fl"

Header
Sidebar
Container
<!-- wrapper begin -->
<div class="wrapper">
    <!-- header begin -->
    <div class="header">
        <div class="shell">
        Header
        </div>
    </div>
    <!-- header end -->
    <!-- main begin -->
    <div class="main">
        <div class="shell">
            Main
            <div class="sidebar fr">Sidebar</div>
            <div class="container fl">Container</div>
        </div>
    </div>
    <!-- main end -->
    <!-- footer end -->
    <div class="footer">
        <div class="shell">
        Footer
        </div>
    </div>
    <!-- footer end -->
</div>
<!-- wrapper end -->