quickcss
/
grid.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>栅格系统 - 快切</title>
<meta name="keywords" content="快切,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<meta name="author" content="快切 kuai.qietu.com">
<link rel="stylesheet" href="assets/css/quick.css">
<link rel="stylesheet" href="css/addons.css">
<!--[if ie 6]>
<link rel="stylesheet" href="assets/css/ie6.css">
<![endif]-->

<!--[if lt IE 9]>
<script src="assets/js/html5.js"></script>
<![endif]-->
<script src="assets/js/jquery-1.3.2.min.js"></script>
<script src="assets/js/quick.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>

<body>


<div class="naver">
    <div class="wrapper">
    	<div class="brand">
        	<a href="./index.html"><img src="imgs/logo.png"/></a>        </div>
    <div class="collapse"><span></span><span></span><span></span></div>
    	<div class="module">
        	<ul>
                <li>
                    <strong><a href="started.html">入门</a></strong>                </li>
                <li>
                    <strong><a href="grid.html" class="selected">12列栅格</a></strong>                </li>
                <li>
                    <strong><a href="base.html">基础css</a></strong>                </li>
                <li>
                    <strong><a href="widget.html">组件</a></strong>                </li>
                <li>
                    <strong><a href="javascript.html">javascript插件</a></strong>                </li>
                <li>
                    <strong><a href="icon.html">图标</a></strong>                </li>
            </ul>
        </div>
        <div class="sub">
        	<a href="http://kuai.qietu.com">前往官网</a>        </div>
    </div>
</div>


<div class="heading">
  <div class="wrapper">
  	<h1>栅格系统</h1>
    <h2>基于html5文档申明，12列栅格化格子系统。以960px为基本宽度，12个格子为基准的一个格子框架。<br>
    当您的网页满足它的条件时，它将能够为您灵活的打造网页的排版结构体系。</h2>
  </div>
</div>


<div class="wrapper">
	<div class="row">
    	<div class="col3">
        	<ul class="sidebar">
            <li class="selected">
            <a href="#grid">栅格系统</a></li>
            <li><a href="#multiple">多重嵌套</a></li>
            <li><a href="#percent">百分比栅格</a></li>
            </ul>
        </div>
        <div class="col9">

            <div class="part" id="grid">
            <!--演示-->
            <h1 class="phead">栅格系统<small>默认12列的单元格栅格系统</small></h1>

    <div class="pbody">
    <h2>栅格系统的基本写法</h2>
    <h2>先写一行<code>class="row"</code>,行的里面写列（即格子系统）<code>class="gird"</code><br>1~12的英文单词被作为了栅格系统的12列格子的命名。</h2>
    <pre>&lt;div class=&quot;row&quot;&gt;<br>	&lt;div class=&quot;col5 &quot;&gt;
	...
	&lt;/div&gt;<br>	&lt;div class=&quot;col4 &quot;&gt;
	...
	&lt;/div&gt;<br>  &lt;/div&gt;</pre>

    <h2>演示</h2>

  <div class="row">
	<div class="col5 ">
        <p class="bordered">&nbsp;</p>
	</div>
	<div class="col4 ">
		<p class="bordered">&nbsp;</p>
	</div>
  </div>
  </div>
  </div>


  <div class="part" id="multiple">

  <h1 class="phead">多重嵌套<small>实现栅格系统的多重嵌套 嵌套依然先写一行<code>class="row"</code></small></h1>

  <div class="pbody">

  <pre>&lt;div class=&quot;row&quot;&gt;<br>	&lt;div class=&quot;col6 &quot;&gt;<br>        &lt;div class=&quot;row&quot;&gt;<br>        	&lt;div class=&quot;col3&quot;&gt;<br>            	...<br>            &lt;/div&gt;<br>        	&lt;div class=&quot;col3&quot;&gt;<br>            	...<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>	&lt;/div&gt;<br>	&lt;div class=&quot;col3 &quot;&gt;<br>		...<br>	&lt;/div&gt;<br>  &lt;/div&gt;d
  </pre>


  <div class="row">
	<div class="col6 ">
        <div class="row">
        	<div class="col3">
            	<p class="bordered">&nbsp;</p>
            </div>
        	<div class="col3">
            	<p class="bordered">&nbsp;</p>
            </div>
        </div>
	</div>
	<div class="col3 ">
		<p class="bordered">&nbsp;</p>
	</div>
  </div>


    <h2>完整的栅格系统演示</h2>
<div class="row">

         <div class="col9 ">
        <p class="bordered">&nbsp;        </p>
  </div>


  <div class="clear"></div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col8">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col2">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col7">
   <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col3">
   <p class="bordered">&nbsp;</p>
  </div>
  <div class="col6">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col4">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col5">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col5">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col4">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col6">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col3">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col7">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col2">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col8">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
   <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  </div>
            <!--演示-->

            </div>
            </div>


            <div class="part" id="percent">
            <h1 class="phead">百分比栅格</h1>
            <div class="pbody">
            <!--百分比栅格-->
            <div class="percent">
            	<h2>100%百分比格子系统，应使用者要求，新增了百分比的栅格系统，此演示仅为抛石引玉，百分比栅格系统经过测试在实际应用中还有很多问题需要解决，我们期待与使用者一同探讨解决！<font color="red">项目使用需谨慎！</font> <code>.percent</code></h2>

<pre>&lt;div class=&quot;percent&quot;&gt;<br>&lt;div class=&quot;row&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;</pre>
<div class="row">
	 <div class="col12 ">
        <p class="bordered">&nbsp;        </p>
  </div>


  <div class="clear"></div>
  <div class="col1">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col11">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col2">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col10">
   <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col3">
   <p class="bordered">&nbsp;</p>
  </div>
  <div class="col9">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col4">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col8">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col5">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col7">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col6">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col6">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col7">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col5">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col8">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col4">
    <p class="bordered">&nbsp;</p>
  </div>


  <div class="clear"></div>
  <div class="col9">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col3">
    <p class="bordered">&nbsp;</p>
  </div>

  <div class="clear"></div>
  <div class="col10">
    <p class="bordered">&nbsp;</p>
  </div>
  <div class="col2">
    <p class="bordered">&nbsp;</p>
  </div>
</div>
            </div>
            <!--百分比栅格-->
            </div>
            </div>


        </div>
    </div>

</div>


<div class="wrapper footer">
	<p>&copy; CopyRight 2002-2013, 快切 kuai.qietu.com, Inc.All Rights Reserved.<br/>
	代码基于<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow" target="_blank">Apache License v2.0</a>, 文档基于创作共享的 <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="nofollow" target="_blank">署名-非商业使用-相同方 式分享 2.5</a> 协议发布</p>
</div>


</body>
</html>