960网格系统

960网格系统：

可以帮助我们在ps中快速布局

12栏，16栏，24栏

我们也可以利用css样式表模板快速写网页

两栏布局网页部分代码

  <!-- 工具栏开始 -->
    <div id="toolbar">
        <div class="container_12">
            <div class="grid_12">
                工具栏
            </div>
        </div>
    </div>
    <!-- 工具栏结束 -->

    <div class="container_12">
        <!-- 页头开始 -->
        <div id="header">
            <div class="grid_2">
                <h2>页头</h2>
            </div>
        </div>
        <!-- 页头结束 -->

        <!-- 主体开始 -->
        <div id="mainbody" class="grid_8">
            <h2>mainbody 主体</h2>
            <div class="grid_2 alpha">主体1</div>
            <div class="grid_2">主体2</div>
            <div class="grid_2">主体3</div>
            <div class="grid_2 omega">主体4</div>
        </div>

        <!-- 主体结束 -->

        <!--边栏开始 -->
        <div id="sidebar" class="grid_4">
            <h2>sidebar 边栏</h2>
        </div>
        <!--边栏结束 -->

        <!-- 清除浮动 -->
        <div class="clear"></div>


        <!-- 页脚开始 -->
        <div id="footer">
            <h2>页脚</h2>
            <div class="grid_8">
                页脚1
            </div>
            <div class="grid_2">
                页脚2
            </div>
            <div class="grid_2">
                页脚3
            </div>
           <!-- 页脚结束 -->

        </div>

    </div>

三栏布局网页部分代码

<!-- 工具栏开始 -->
    <div data-brackets-id='1256' id="toolbar">
        <div data-brackets-id='1257' class="container_12">
            <div data-brackets-id='1258' class="grid_12">
                工具栏
            </div>
        </div>
    </div>
    <!-- 工具栏结束 -->

    <div data-brackets-id='1259' class="container_12">
        <!-- 页头开始 -->
        <div data-brackets-id='1260' id="header">
            <div data-brackets-id='1261' class="grid_2">
                <h2 data-brackets-id='1262'>页头</h2>
            </div>
        </div>
        <!-- 页头结束 -->

        <!-- 主体开始 -->
        <div data-brackets-id='1263' id="mainbody" class="grid_6 push_2">
            <h2 data-brackets-id='1264'>mainbody 主体</h2>
            <div data-brackets-id='1265' class="grid_3 alpha">主体1</div>
            <div data-brackets-id='1266' class="grid_3 omega">主体4</div>
        </div>

        <!-- 主体结束 -->

        <!-- 左边栏开始 -->
        <div data-brackets-id='1267' id="left-sidebar" class="grid_2 pull_6">
          <h2 data-brackets-id='1268'> 左边栏</h2>
        </div>
        <!-- 左边栏结束 -->

        <!--边栏开始 -->
        <div data-brackets-id='1269' id="sidebar" class="grid_4">
            <h2 data-brackets-id='1270'>sidebar 边栏</h2>
        </div>
        <!--边栏结束 -->

        <!-- 清除浮动 -->
        <div data-brackets-id='1271' class="clear"></div>


        <!-- 页脚开始 -->
        <div data-brackets-id='1272' id="footer">
            <h2 data-brackets-id='1273'>页脚</h2>
            <div data-brackets-id='1274' class="grid_8">
                页脚1
            </div>
            <div data-brackets-id='1275' class="grid_2">
                页脚2
            </div>
            <div data-brackets-id='1276' class="grid_2">
                页脚3
            </div>
            <!-- 页脚结束 -->

        </div>

    </div>