h5学习笔记：学习frozenui的uirow代码

1.什么是FrozenUI？

FrozenUI
是一套基于移动端的UI库。它非常轻量、精美，遵从手机QQ设计规范，提供了表单、对话框、列表等常用组件。此外，FrozenUI还提供文字截断、1px边框、rem、两端留白等常用场景的解决方案。CSS做得更模块化和颗粒化，使用sass编写CSS代码，你完全可以按照实际情况按需加载。

2.ui-row样式

ui-row 是frozenui 里面其中一个样式。使用它能够轻松地实现左右布局的效果。首先查看一下里面的代码。ui-row 使用block 显示。ui-col 使用浮动float left来处理栅格化的内容布局，关键也是在这里。

.ui-row {display: block;overflow: hidden
}.ui-col {float: left;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%
}


frozenui 的样式库，还包含对 ui-col 宽度修改的声明。如下代码，其中ui-col-* 后面的数字是代表宽度的百分比的意思。

.ui-col-10 {width: 10%
}.ui-col-20 {width: 20%
}.ui-col-25 {width: 25%
}.ui-col-33 {width: 33.33%
}.ui-col-50 {width: 50%
}.ui-col-67 {width: 66.66%
}.ui-col-75 {width: 75%
}


3.使用ui-row样式

使用时候可以引用下面的链接。该链接是样式库的链接。

然后，我们创建一个html 来实现该布局。这个布局 首先实现2张图片左右布局。图片尺寸会根据屏幕拉伸适配。

使用ui-row 需要和ui-col ui-col-50 结合一起使用。例如这样方式

下面使用2张图片实现一下。

从结果可以看到 实现的布局已经是实现2张图片左右布局。

4.使用padding 约束图片的间隙

在上面的显示中，尽管2张图片已经实现了左右布局，但没有间隙显得空间感缺失。所以接下来会 加入自定义的样式来实现这样的步骤。为了让图片间距保持均衡，所以左边的图片和右边的图片在间隙上 需要区分下来。这是因为在2张图片的缝隙下间距需要保持与一致。下面定义一个ui-col-l 和 ui-col-r的样式。（l 为left缩写，r 为right的缩写）

.ui-col-l{padding: 6px 3px 0px 6px;}.ui-col-r{padding: 6px 6px 0px 3px;}


结合以上的代码，对图片进行约束处理。

图片一

图片二

5.图文布局

在上述代码中，同时加入对图片加上图文混排。将文字显示在图片上面。这是一个非常常见的需求。上述代码中，对 ui-col 的div 下声明了一个图文div 样式，该样式实现图文混排的一个做法。图文混排采用了相对和绝对布局来达到这样一个效果。

.ui-info {position: relative; }.ui-info .ui-info-txt{text-align: center;position: absolute;z-index: 22;top: 50%;left:0;right:0;height: 30px;color: #333;line-height: 30px;transform: translateY(-50%); }.ui-info .ui-info-txt:before{content: &＃39; &＃39;;background: rgba(255,255,255,0.3);width: 100%;height: 30px;position: absolute;z-index: -1;left:0;right:0; }


修改的结构变化，实现图文布局的效果。

图片一

这样就可以实现对图片加上文字的效果。

好了，上述是frozenui 的ui-row 其中一个简单用法。但学习里面的源代码也是一件不错的事情。