这篇文章主要介绍了AmazeUI网格的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了AmazeUI网格的实现示例，分享给大家，也给自己留个笔记。具体如下：
！声明文档类型
html class='no-js '
头
meta charset='utf-8 '
元http-equiv=' X-UA-兼容'内容='IE=edge '
元名称='描述'内容=' '
元名称='关键字'内容=' '
元名称='视口'内容='宽度=设备宽度，初始比例=1 '
标题网格/title
meta name=' renderer ' content=' web kit '
元http-equiv='缓存-控制'内容='no-siteapp'/
link rel=' icon ' type=' image/png ' href=' assets/I/fav icon。png '
meta name=' mobile-web-app-ability ' content=' yes '
link rel=' icon ' size=' 192 x 192 ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' apple-mobile-web-app-ability ' content=' yes '
meta name=' apple-mobile-web-app-status-bar-style ' content=' black '
meta name=' apple-mobile-web-app-title ' content='拍案惊奇UI'/
link rel=' apple-touch-icon-precompted ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' ms application-Tileimage ' content=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' ms application-TileColor ' content=' # 0e 90d 2 '
链接rel='样式表href=' assets/CSS/amazeui。量滴' CSS '
风格
div :n th-child(1){ background-color : # 06f；}
第n个孩子(2){背景色： # 0 F6；}
div : th-child(3){ background-color : # 60f；}
div :n th-child(4){ background-color : # 6f 0；}
div div :n th-child(5){ background-color : # f60；}
div :n th-child(6){ background-color : # f06；}
/style
/head
身体
h3示例1:一个基本的网格/h3
div class='am-g '
div class='am-u-sm-4'4/div
div class='am-u-sm-8'8/div
/div
h3示例2:不同区间不同的划分比例/h3
div class='am-g doc-am-g '
div class=' am-u-sm-6am-u-MD-4am-u-LG-3 ' sm-6 MD-4LG-3/div
div class=' am-u-sm-6am-u-MD-8am-u-LG-9 ' sm-6 MD-8 LG-9/div
/div
h3示例3:限制宽度的网格/h3
div class='am-g am-g-fixed '
div class='am-u-sm-4'4/div
div class='am-u-sm-8'8/div
/div
h4示例4:容器/h4
div class='am-container '
div class='am-g '
div class='am-u-sm-6 ' .am-u-sm-6/div
div class='am-u-sm-6 ' .am-u-sm-6/div
/div
/div
h3示例5:不足12 份的网格/h3
