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

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

一、总结

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

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

1 <ul class="am-avg-sm-4 am-thumbnails">
2   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
3   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
4   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
5   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
6 </ul>

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

1 <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
2   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
3   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
4   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
5   <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
6 </ul>

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;
    }
  }
}

演示图标版权归微软 Bing 所有。

基本使用

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

 Copy

• 
• 
• 
• 

<ul class="am-avg-sm-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li> </ul>

响应式

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

 Copy

• 
• 
• 
• 
• 
• 
• 
• 

<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li> <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li> </ul>

九宫格

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

 Copy

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

<ul class="am-avg-sm-3 boxes">
  <li class="box box-1">1</li> <li class="box box-2">2</li> <li class="box box-3">3</li> <li class="box box-4">4</li> <li class="box box-5">5</li> <li class="box box-6">6</li> <li class="box box-7">7</li> <li class="box box-8">8</li> <li class="box box-9">9</li> </ul>

 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; }

 

来源：oschina

链接：https://my.oschina.net/u/4369214/blog/3981326