这篇文章主要介绍了阿马泽伊网格的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了阿马泽伊网格的实现示例，分享给大家，也给自己留个笔记。具体如下：
！声明文档类型
html class=’no-js ‘
头
meta charset=’utf-8 ‘
meta http-equiv=’ X-UA-Compatible ‘ content=’ IE=edge ‘
元名称=’描述’内容=’ ‘
meta name=’keywords’ content=’ ‘
meta name=’ viewport ‘ content=’ width=device-width，initial-scale=1 ‘
标题网格/标题
meta name=’ renderer ‘ content=’ WebKit ‘
meta http-equiv=’ Cache-Control ‘ content=’ no-site app ‘/
link rel=’ icon ‘ type=’ image/png ‘ href=’ assets/I/favicon。巴布亚新几内亚
元名称=’支持移动网络应用内容=’是’
link rel=’ icon ‘ size=’ 192 x192 ‘ href=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚
meta name=’ apple-mobile-we b-app-capable ‘ content=’ yes ‘
meta name=’ apple-mobile-we B- app-状态栏-style ‘ content=’ black ‘
meta name=’ apple-mobile-we B- app-title ‘ content=’ Amaze UI ‘/
link rel=’ apple-touch-icon-pre composed ‘ href=’ assets/I/app-icon 72 x 72 @ 2x。巴布亚新几内亚
meta name=’ ms application-tile image ‘ content=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚
meta name=’ ms应用程序-磁贴颜色’ content=’ # 0e 90d 2 ‘
link rel=’样式表’ href=’ assets/CSS/amaze ui。量滴’ CSS ‘
风格
div div:n-child(1){ background-color:# 06f；}
div div:n-child(2){ background-color:# 0 F6；}
div div:n-child(3){ background-color:# 60f；}
div div:n-child(4){背景色：# 6f 0；}
div div:n-child(5){ background-color:# f60；}
div div:n-child(6){ background-color:# f06；}
/风格
/头
身体
h3示例1:一个基本的网格/h3
div class=’am-g ‘
div class=’am-u-sm-4’4/div
div class=” am-u-sm8 ” 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-6md-4lg-3/div
div class=’ am-u-sm-6am-u-MD-8am-u-LG-9 ‘ sm-6md-8lg-9/div
/div
h3示例3:限制宽度的网格/h3
am-g am-g-fixed ‘
div class=’am-u-sm-4’4/div
div class=” am-u-sm8 ” 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
！-未添加am-u端的情形-
div class=’am-g ‘
div class=’am-u-sm-3’3/div
div class=’am-u-sm-3’3/div
div class=’am-u-sm-3’3/div
/div
！-添加am-u端后-
div class=’am-g ‘
div class=’am-u-sm-3’3/div
div class=’am-u-sm-3’3/div
div class=’ am-u-sm-3am-u-end ‘ 3/div
/div
h3示例6:响应式辅助类控制元素显隐/h3
div class=’am-g ‘
div class=’am-u-sm-2 am-u-lg-4 ‘
span=am-show-MD-down ‘ sm-2/span
span=am-show-LG-仅LG-4/span
/div
div class=’ am-u-sm-4am-u-LG-4 ‘ sm4 lg4/div
div class=’am-u-sm-6 am-u-lg-4 ‘
span=am-show-MD-down ‘ sm-6/span
span=am-show-LG-仅LG-4/span
/div
/div
div class=’am-g ‘
div class=” am-u-LG-3 ”
span=am-show-MD-down ‘ sm-full/span
span=am-show-LG-仅LG-3/span
/div
div class=” am-u-LG-6 ”
span=am-show-MD-down ‘ sm-full/span
span=am-show-LG-仅LG-6/span
/div
div class=” am-u-LG-3 ”
span=am-show-MD-down ‘ sm-full/span
span=am-show-LG-仅LG-3/span
/div
/div
div class=’am-g ‘
div class=’am-u-sm-6 am-u-lg-2 ‘
span=am-show-MD-down ‘ 6/span
span=am-hide-MD-down 2/span
/div
div class=’am-u-sm-6 am-u-lg-8 ‘
span=am-show-MD-down ‘ 6/span
span=am-hide-MD-down ‘ 8/span
/div
div class=’am-u-sm-12 am-u-lg-2 ‘
span class=’ am-show-MD-down ‘完整/span
span=am-hide-MD-down 2/span
/div
/div
div class=’am-g ‘
div class=’am-u-sm-3’3/div
div class=” am-u-sm-9 ” 9/div
/div
div class=’am-g ‘
div class=’am-u-lg-4 ‘
span class=’ am-show-MD-down ‘完整/span
span=am-hide-MD-down ‘ 4/span
/div
div class=’am-u-lg-8 ‘
span class=’ am-show-MD-down ‘完整/span
span=am-hide-MD-down ‘ 8/span
/div
/div
div class=’am-g ‘
div class=’am-u-sm-6 am-u-lg-5 ‘
span=am-show-MD-down ‘ 6/span
span=am-hide-MD-down ‘ 5/span
/div
div class=’am-u-sm-6 am-u-lg-7 ‘
span=am-show-MD-down ‘ 6/span
span=am-hide-MD-down ‘ 7/span
/div
/div
div class=’am-g ‘
div class=” am-u-LG-6 ”
span class=’ am-show-MD-down ‘完整/span
span=am-hide-MD-down ‘ 6/span
/div
div class=” am-u-LG-6 ”
span class=’ am-show-MD-down ‘完整/span
span=am-hide-MD-down ‘ 6/span
/div
/div
h3示例7:列边距啪啪啪/h3
div class=’am-g ‘
div class=” am-u-sm-1 ” 1/div
div class=” am-u-sm-11 ” 11/div
/div
div class=’am-g ‘
div class=” am-u-sm-1 ” 1/div
div class=’ am-u-sm-10am-u-sm-offset-1 ‘ 10，偏移量1/格
/div
div class=’am-g ‘
div class=” am-u-sm-1 ” 1/div
div class=’ am-u-sm-9am-u-sm-offset-2 ‘ 9，offset 2/div
/div
div class=’am-g ‘
div class=” am-u-sm-1 ” 1/div
div class=’ am-u-sm-8am-u-sm-offset-3 ‘ 8，offset 3/div
/div
div class=’am-g ‘
div class=” am-u-sm-1 ” 1/div
div class=’ am-u-sm-7am-u-sm-offset-4 ‘ 7，offset 4/div
/div
h3示例8:居中，生存还是毁灭/h3
！- .以am-u-sm为中心始终居中-
div class=’am-g ‘
div class=’ am-u-sm-3am-u-sm-centered ‘ 3居中/div
/div
！- .am-u-lg中心大于1024 时居中-
div class=’am-g ‘
div class=’ am-u-sm-6am-u-LG-居中’ 6居中/div
/div
！-大于1024 时不居中-
div class=’am-g ‘
div class=’am-u-sm-9 am-u-sm居中am-u-LG-不居中9md-向下居中/div
/div
！-始终居中-
div class=’am-g ‘
div class=’ am-u-sm-11am-u-sm-centered ‘ 11居中/div
/div
h3示例9:结构与表现表里不一/h3
！-
结构中主要的在前，侧栏在后
通过推/拉，在媒介区间将补充报道显示到左侧，主要显示到右侧
大的区间重置回结构排序
–
div class=’am-g ‘
div class=” am-u-MD-8am-u-MD-push-4am-u-LG-reset-order ” 8 main/div
div class=” am-u-MD-4am-u-MD-pull-8am-u-LG-reset-order ” 4边栏/div
/div
h3示例10: 没有内边距的列/h3
‘ am-g 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
！- [if (gte IE 9)|！(IE)]！-
脚本src=’ assets/js/jquery。量滴js ‘/脚本
！- ![endif] –
！-[如果lte IE 8 ]
脚本src=’ assets/ie8/jquery。量滴js ‘/脚本
script src=’ assets/ie8/modernizr。js ‘/脚本
脚本src=’ assets/js/amaze ui。ie 8聚填充。量滴js ‘/脚本
！[endif] –
脚本src=’ assets/js/amaze ui。量滴js ‘/脚本
/body
/html
效果图：
到此这篇关于阿马泽伊网格的实现示例的文章就介绍到这了，更多相关阿马泽伊网格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www。jb51。net/html 5/740409。超文本标记语言
