amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

一、总结

1、与grid区别：网格中：am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在ul中，里面有li) 记住这个avg（表示等分网格） 这里数字的意思不一样，这里的数字表示几等份

2、基本使用：被ul和li统治

1 
     
      2   
      
3   
      
4   
      
5   
      
6 
     

3、响应式是什么？：针对不同屏幕有不同响应

1 
     
      2   
      
3   
      
4   
      
5   
      
6 
     

4、配合css的特效，挺好玩的：

1 .boxes .box { 2   height: 100px; 3   color: #eee; 4   line-height: 100px; 5   text-align: center; 6   font-weight: bold; 7   transition: all .2s ease; 8 } 9 10 .boxes .box:hover {11   font-size: 250%;12   transform: rotate(360deg);13 }

 

 

 

二、等分网格 AVG Grid

目录

Average Grid，均分网格（原 Block Grid），使用 ul / ol 创建等分列，用于内容的排列。

响应式断点为：

Class	区间
.am-avg-sm-*	0 - 640px
.am-avg-md-*	641px - 1024px
.am-avg-lg-*	1025px +

与布局网格不同的是，这里的数字表示几等分，而不是占 12 等分中的几列，比如 .am-avg-sm-2 会将子元素 <li>的宽度设置为 50%。

考虑到通用性（菜单、图片）等，<li> 没有设置 padding，使用时需根据需求自行设置。

另外需要注意的 AVG Grid 只能用于 <ul> / <ol> 结构。

下面的演示中，添加了以下自定义样式（Less）：

这部分代码已经整合到，无需再添加。

 Copy

.doc-block-grid {  margin-left: -5px;  margin-right: -5px;  > li {    padding: 0 5px 10px 5px;    img {      border: 1px solid #CCC;      padding: 2px;      background: #FFF;    }  }}

演示图标版权归 所有。

基本使用

只添加 .am-avg-sm-*，应用于所有屏幕尺寸。

 Copy

• 
• 
• 
• 

响应式

按需增加更多响应式 class，缩放窗口可以查看响应效果。

 Copy

• 
• 
• 
• 
• 
• 
• 
• 

九宫格

看到同学提这样的需求，就简单写一个示例。

 Copy

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

     
  
      
1
 
      
2
 
      
3
 
      
4
 
      
5
 
      
6
 
      
7
 
      
8
 
      
9
 
     

 Copy

.boxes {  width: 300px;}.boxes .box { height: 100px; color: #eee; line-height: 100px; text-align: center; font-weight: bold; transition: all .2s ease; } .boxes .box:hover { font-size: 250%; transform: rotate(360deg); } .box-1 { background-color: red; } .box-2 { background-color: orange; } .box-3 { background-color: #0000ff; } .box-4 { background-color: #008000; } .box-5 { background-color: red; } .box-6 { background-color: orange; } .box-7 { background-color: #0000ff; } .box-8 { background-color: #008000; } .box-9 { background-color: red; }