版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hero82748274/article/details/89415704
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样式
使用时候可以引用下面的链接。该链接是样式库的链接。
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
然后，我们创建一个html 来实现该布局。这个布局 首先实现2张图片左右布局。图片尺寸会根据屏幕拉伸适配。
使用ui-row 需要和ui-col ui-col-50 结合一起使用。例如这样方式
<div class="ui-row">
<div class="ui-col ui-col-50">
...
</div>
<div class="ui-col ui-col-50">
...
</div>
</div>
下面使用2张图片实现一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>FrozenUI Demo</title>
<!-- 引入 FrozenUI -->
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"/>
</head>
<style>
.ui-col-50 img{
width: 100%;
vertical-align: bottom;
}
</style>
<body>
<div class="ui-row">
<div class="ui-col ui-col-50">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555742493964&di=2db382e2ebd5a84ec3a65883aef5de1e&imgtype=0&src=http%3A%2F%2Fimg.chewen.com%2Fpics%2F2012%2F01%2F08%2F13260283728722415.jpg">
</div>
<div class="ui-col ui-col-50">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555742543527&di=af4c15c5f3da352bc044cf3290460ac0&imgtype=0&src=http%3A%2F%2Fcar0.autoimg.cn%2Fupload%2Fspec%2F5742%2Fu_20101014155122659264.jpg">
</div>
</div>
</body>
</html>
从结果可以看到 实现的布局已经是实现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;
}
结合以上的代码，对图片进行约束处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>FrozenUI Demo</title>
<!-- 引入 FrozenUI -->
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"/>
</head>
<style>
.ui-col-50 img{
width: 100%;
vertical-align: bottom;
}
.ui-col-l{
padding: 6px 3px 0px 6px;
}
.ui-col-r{
padding: 6px 6px 0px 3px;
}
.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: ' ';
background: rgba(255,255,255,0.3);
width: 100%;
height: 30px;
position: absolute;
z-index: -1;
left:0;
right:0;
}
</style>
<body>
<div class="ui-row">
<div class="ui-col ui-col-50 ui-col-l">
<div class="ui-info">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555742493964&di=2db382e2ebd5a84ec3a65883aef5de1e&imgtype=0&src=http%3A%2F%2Fimg.chewen.com%2Fpics%2F2012%2F01%2F08%2F13260283728722415.jpg">
<div class="ui-info-txt">图片一</div>
</div>
</div>
<div class="ui-col ui-col-50 ui-col-r">
<div class="ui-info">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555742543527&di=af4c15c5f3da352bc044cf3290460ac0&imgtype=0&src=http%3A%2F%2Fcar0.autoimg.cn%2Fupload%2Fspec%2F5742%2Fu_20101014155122659264.jpg">
<div class="ui-info-txt">图片二</div>
</div>
</div>
</div>
</body>
</html>
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: ' ';
background: rgba(255,255,255,0.3);
width: 100%;
height: 30px;
position: absolute;
z-index: -1;
left:0;
right:0;
}
修改的结构变化，实现图文布局的效果。
<div class="ui-col ui-col-50 ui-col-l">
<div class="ui-info">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555742493964&di=2db382e2ebd5a84ec3a65883aef5de1e&imgtype=0&src=http%3A%2F%2Fimg.chewen.com%2Fpics%2F2012%2F01%2F08%2F13260283728722415.jpg">
<div class="ui-info-txt">图片一</div>
</div>
</div>
这样就可以实现对图片加上文字的效果。
好了，上述是frozenui 的ui-row 其中一个简单用法。但学习里面的源代码也是一件不错的事情。