Amaze UI

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

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):

这部分代码已经整合到缩略图,无需再添加。

.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-*,应用于所有屏幕尺寸。

<ul class="am-avg-sm-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/001.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/002.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/003.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/004.jpg" /></li>
</ul>

响应式

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

<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/001.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/002.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/003.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/004.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/001.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/002.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/003.jpg" /></li>
  <li><img class="am-thumbnail" src="http://amazeui.p2hp.com/static/images/004.jpg" /></li>
</ul>

九宫格

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

  • 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>
.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;
}
侧栏导航
Amaze UI 微信
在微信上关注我们