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

最新推荐文章于 2020-12-11 10:03:40 发布
最新推荐文章于 2020-12-11 10:03:40 发布
阅读量3.2k 收藏
点赞数
分类专栏： FrozenUI
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/90079896
版权

适用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框架 · 栅格应用：宫格布局 - 案例篇” 的全部内容。

草巾冒小子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谈谈FrozenUI前端框架（应用心得） - 入坑篇
草巾冒小子的博客
05-10 5942
FrozenUI框架，是一个相对比较纯粹的css类框架，只适合小项目的样式开发；官方并没有太多，甚至可以说没有提供任何js相关的功能性包，所以个人不推荐开发者使用。 官方宣称： FrozenUI 是一套基于移动端的UI库，轻量、精美、遵从手机 QQ 设计规范。 FrozenUI · 专注于移动web的UI框架，基于腾讯手机QQ规范. 即便如此，个人仍感觉：这个框架也不怎么适用和满足我们日...
FrozenUI(移动WEB开发框架)
09-20
FrozenUI(移动WEB开发框架) 1.3.0.zip
移动端前端UI库—Frozen UI、WeUI、SUI Mobile
weixin_33868027的博客
10-29 320
Frozen UI 自述：简单易用，轻量快捷，为移动端服务的前端框架。 主页：http://frozenui.github.io/ 开发团队：QQVIP FD Team Github：https://github.com/frozenui/frozenui Demo：http://frozenui.github.io/frozenui/demo/index.html WeUI ...
FrozenUI 实战项目《可可DJ音乐网》
志远有18CM
10-04 1898
前言可可DJ音乐网是一个汇聚国内外知名DJ的DJ平台.我们提供DJ舞曲app,包括ios,Android,pc端和微信公众号多客户端，提供求职招聘，原创舞曲发布,电音现场,舞曲视频,在线舞曲试听下载的综合性DJ门户网。
FrozenUI - 专注于移动web的UI框架
weixin_33989780的博客
12-05 210
http://frozenui.github.io/   移动框架 重磅出击 简单易用，轻量快捷，为移动端服务的前端框架 开始使用 立即下载
移动开发框架--------基于腾讯手Q样式规范Frozen UI
每天进步一点点
03-06 4954
原文：http://www.cnblogs.com/shanyou/p/4152981.html Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。 css组件包括按钮，列表，表单，通知，提示条，弹出框，选项卡，等级图标，角标，红点，1px解决方案等
rio-rgbify:psuedo base-256中的编码的任意位深度栅格
05-06
将psuedo base-256中的任意位深度栅格编码为RGB 安装 从PyPi pip install rio-rgbify 发展 git clone git@github.com:mapbox/rio-rgbify.git cd rio-rgbify pip install -e '.[test]' CLI用法 输入可以是rasterio可...
前端-移动端布局-案例
03-20
- Bootstrap框架：提供了预设的响应式栅格系统、组件和JavaScript插件，简化了移动端布局的开发工作。 - Foundation框架：与Bootstrap类似，提供一套强大的响应式设计工具和组件。 - CSS预处理器（Sass, Less）：...
微信小程序经典demo学习案例：flex布局栅格
03-15
亲测图片：       免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
栅格框架：对Spark DataFrames的地理空间栅格支持
02-05
RasterFrames提供了以DataFrame为中心的任意栅格数据视图，从而实现了时空查询，地图代数栅格操作以及与Spark ML算法生态系统的兼容性。 通过使用DataFrames作为核心的认知和计算数据模型，它能够以普通分析师可...
Frozen UI框架制作手机特效代码
05-03
Frozen UI框架制作手机特效代码 Frozen UI框架制作手机特效代码
FrozenUI的CSS组件库基于腾讯手Q样式规范
08-10
FrozenUI的CSS组件库,基于腾讯手Q样式规范
h5 css3移动端漂亮登录界面
04-10
h5 css3移动端漂亮登录界面,使用了vue.js,已经打包,响应式布局,自动适应不同设备.
raster-playground:栅格操作-剪辑，着色和覆盖！
04-30
栅格游乐场 栅格地图的彩色游乐场。 为什么我们要建立栅格游乐场？ 栅格处理（着色和切片拼贴）在计算上很繁琐，并且在浏览器（前端）上不太可行，因此我们将其移至后端，然后由CDN分发。 但是，这又带来了另一个...
frozenui 移动端 搜索框
skysys的研究小屋
02-18 513
点击一下 （或者根据情境改成搜索） <link rel="stylesheet" type="text/css" href="./css/frozen.css"> .header{ position:fixed; top:0px; width: 100%; z-index: 10; } <div class="header"> <div cla...
element 手机适配_FrozenUI - 腾讯出品的手机QQ风格前端UI库
weixin_39673947的博客
12-11 234
一套基于移动端web UI库，轻量、精美、遵从手机 QQ 设计规范。 介绍专注于移动 web 的 UI 框架，基于腾讯手机QQ规范。目前QQ会员前端开发组所用的通用样式库，封装了很多灵动的动画效果，有很多酷炫好玩的案例秀。手机QQ风格的UI组件FrozenUI 酷炫案例demo特点简单易用，轻量快捷，基本样式使用离线包的方式，减少请求，加载速度很快；样式类引用简洁明了，栅格系统运用简单自如；遵循手...
jquery 移动端 ui 组件库 移动端前端UI库—Frozen UI、SUI Mobile、light7、WeUI、jqweui
时间在飞飞的博客
05-27 6791
Frozen UI开发团队：QQVIP FD Team 特点：简单易用，轻量快捷，为移动端服务的前端框架 主页：http://frozenui.github.io/ Github：https://github.com/frozenui/frozenui Demo：http://frozenui.github.io/frozenui/demo/index.html WeUI 特点：这是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用体验更加统一。 开发团队：W.
Frozen UI 的css规范
weixin_33725722的博客
03-15 371
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值