轻量级超级简单的element的layout栅格化布局

947 阅读2分钟

轻量级超级简单的element的layout栅格化布局

基于element主题提取出来的. 轻量级超级简单的element的layout栅格化布局 在你使用了element框架时不需要使用这个框架 Layout 布局 通过基础的 24 分栏,迅速简便地创建布局。

使用

    <head>
        <link rel="stylesheet" href="cc-layout-simple.css">
    </head>

     <div title="基础布局">
        <h3>基础布局</h3>
        <p>使用单一分栏创建基础的栅格布局</p>
        <div class="cc-row">
          <div class="cc-col-24"><div class="demo-test bg-1"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-12"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-12"><div class="demo-test bg-2"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-8"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-8"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-8"><div class="demo-test bg-3"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-6"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-3"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-1"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-4"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-3"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-3"></div></div>
        </div>
     </div>

演示地址

GitHub仓库

欢迎给星星谢谢了