适用frozenUI框架的栅格系统和多列布局，完成项目首页的宫格布局开发

效果图：

demo 代码实例：


<!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"><!-- 引入 FrozenUI --><link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"><title>栅格测试</title><style type="text/css">html,body{height: 100%;}body{background: #FFF/* url(static/images/bg.png) */; background-size: 100% 100%; max-width:640px;margin: 0 auto;}.ui-col{padding: 5px;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;}/*宫格高度*/.ui-row-flex-ver .ui-col{height: auto;}
/**注意1**//*中间x2的特色处理*/.ui-grid-icon .ui-img-icon.icon_center{width: 118px;height:118px;}/*a链接*/.links{display: inline-block;width: 100%;height: 100%;}/*宫格文字颜色*/.ui-grid-icon.card h5{color: #000;}</style></head><body><!--轮播图区域--><div style="height:178px;"></div><div class="ui-row-flex"><div class="ui-col"><div class="ui-row-flex  ui-row-flex-ver"><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_01.png')"></span></div><h5>包过卡</h5></a></li></ul></div></div><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_03.png')"></span></div><h5>试题查询</h5></a></li></ul></div></div></div></div><div class="ui-col ui-col-2"><div class="ui-grid-icon" style="padding-top:15px;"><ul><li><a class="links" href=""><div class="ui-img-icon icon_center" style=""><span style="background-image:url('static/images/icon_09.png')"></span></div></a></li></ul></div></div><div class="ui-col"><div class="ui-row-flex  ui-row-flex-ver"><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_02.png')"></span></div><h5>我的错题</h5></a></li></ul></div></div><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_04.png')"></span></div><h5>我的收藏</h5></a></li></ul></div></div></div></div></div><div class="ui-row-flex"><div class="ui-col"><div class="ui-row-flex  ui-row-flex-ver"><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_05.png')"></span></div><h5>易错题库</h5></a></li></ul></div></div><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_07.png')"></span></div><h5>做题排序</h5></a></li></ul></div></div></div></div><div class="ui-col ui-col-2"><div class="ui-grid-icon" style="padding-top:15px;"><ul><li><a class="links" href=""><div class="ui-img-icon icon_center" style=""><span style="background-image:url('static/images/icon_10.png')"></span></div></a></li></ul></div></div><div class="ui-col"><div class="ui-row-flex  ui-row-flex-ver"><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_06.png')"></span></div><h5>考试记录</h5></a></li></ul></div></div><div class="ui-col"><div class="ui-grid-icon card"><ul><li><a class="links" href=""><div class="ui-img-icon"><span style="background-image:url('static/images/icon_08.png')"></span></div><h5>课件讲义</h5></a></li></ul></div></div></div></div></div></body>
</html>

注意1：

错误的设置，（原本想调整icon尺寸）
如.ui-grid-icon .ui-img-icon{width:40px;height:40px;}，将会导致icon图片不居中。

以上就是关于“ FrozenUI框架 · 栅格应用：宫格布局 - 案例篇” 的全部内容。

FrozenUI框架 · 栅格应用：宫格布局 - 案例篇相关推荐

MUI框架：栅格系统 + grid宫格布局 - 案例篇
MUI框架 · 自定义宫格布局 · 应用案例: 通过使用MUI框架的栅格系统 + grid宫格布局 ,覆盖源码样式,以达到完美的页面效果. 效果图: 点击动画效果不再演示,具体效果参考源码效果! 全 ...
bootstrapV4.6.0 图片宫格布局（案例篇）
文章目录官方文档 (代码参考): 效果图如下: 代码示下: 使用注意事项: 附件:CSS样式表官方文档 (代码参考): 文档入口1:img图片布局 -> https://v4.bootcss ...
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局:自定义MUI底部tabs选项卡(nav组件 · 底部固定mui-bar-tab) · 案例演示效果图 html代码实例 · 如下: <!doctype html> <h ...
【Android组件开发】自定义的多宫格布局
FlexGridLayout 自定义的多宫格布局目的: 之前有个需求需要用到仿IOS相册展示图片的布局方式,将图片以不同大小布局在一起,不像其他相册应用都是使用对称列表来展示图片,没有给人惊喜乃至于 ...
android宫格式布局,Android 自定义TextView实现宫格布局，Drawable添加图片并控制宽高...
上图: 需求: 宫格布局(宽高一致,在屏幕上高度始终更随宽度变化) 图片在上文字在下布局可以控制图片的宽高布局完成,废话不多说直接上代码: /** * 时间 : 2019/7/22 0022 * ...
关于 uview-ui grid宫格布局的页面跳转
在使用 uview-ui 的宫格布局时,发现官方文档对于基本的图形展示还是很详细的,但是缺少点击事件. 于是众里寻他千百度,蓦然回首基本使用该组件外层为 u-grid 组件包裹,通过 col 设 ...
微信小程序开发实现宫格布局
微信小程序开发实现宫格布局问题背景客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析先上效果图 ...
【前端多宫格卡片自适应，再也不怕多宫格布局啦】
前言有没有小伙伴有遇到过对样式追求极致的产品啊=== 为了这页面的样式我也是没少下功夫,总结了这几个多宫格小方法, 以后再也不怕多宫格自适应问题了,尤其是不确定个数的多宫格!话不多说,展示才艺吧- ...
android 9宫格布局,android 朋友圈9宫格实现
icon9宫格效果.png 项目优化 2019-10-10 1.有人提出经常new ImageView耗内存, 我现在直接new 9个ImageView,可重复使用这几个ImageView 2.修复图 ...

FrozenUI框架 · 栅格应用：宫格布局 - 案例篇

适用frozenUI框架的栅格系统和多列布局，完成项目首页的宫格布局开发

效果图：

demo 代码实例：

注意1：

FrozenUI框架 · 栅格应用：宫格布局 - 案例篇相关推荐

最新文章

热门文章