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

转载于:https://www.cnblogs.com/Renyi-Fan/p/9008036.html

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

  1. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  2. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  3. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  4. amazeui学习笔记--css（常用组件4）--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  5. amazeui学习笔记--css（HTML元素2）--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  6. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  7. amazeui学习笔记--css（HTML元素4）--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  8. amazeui学习笔记--css（常用组件1）--小徽章Badge

    amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...

  9. amazeui学习笔记--css（常用组件5）--评论列表Comment

    amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...

最新文章

  1. 模板 - 二分图（包含全套常用定理性质）
  2. Android之旅---Service
  3. Matlab之for循环语句
  4. 一个故事讲清楚 NIO
  5. 访客IP API接口
  6. so文件成品评论【整理】
  7. 很多人都忽视了账号基建重要性
  8. 数据结构与算法——二叉树与图汇总整理
  9. linux内存回收 内核参数
  10. nil,NULL,NSNull的区别
  11. 修改完out不更新_CyclicBarrier 不就是比 CountDownLatch 多了个回环么？
  12. 【转】小结登录的几种交互方式
  13. 5.8Gwifi信道
  14. 【论文翻译】Deep Learning
  15. 计算机无法关闭密码保护,Win7密码保护共享关闭不了怎么办？密码保护共享关不掉的解决方法...
  16. WIN10直接运行自定义软件
  17. enumerate使用
  18. bzoj3470 Freda's Walk （期望概率DP）
  19. 照片编辑软件：DxO PhotoLab 4 Mac版
  20. echarts 地图 区域合并

热门文章

  1. php网页事件处理方法,PHP实现事件机制的方法
  2. MySQL创建价格_mysql 建表时的价格用什么类型定义？
  3. lunux安装多个mysql_实例详解linux下多个mysql5.7.19(tar.gz)安装图文教程
  4. 全国计算机考试可以异地考吗,公务员省考可以异地考吗
  5. JAVA：基础递归算法大杂烩
  6. LeetCode2. 两数相加
  7. RuntimeError: expected a Variable argument, but got torch.FloatTensor
  8. DCMTK的Lib 引用顺序
  9. Qt DLL总结【三】-VS2008+Qt 使用QPluginLoader访问DLL
  10. 07_支持向量机1_统计学习方法