N宫格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<style type="text/css">
#wrap {
height: 100%;
display: flex;
}
#wrap #main {
display: flex;
flex-flow: row;
flex: 1;
}
.jiu {
display: flex;
flex: 1;
flex-flow: column;
}
.item {
flex: 1;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div class="jiu">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
4
</div>
<div class="item">
3
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
</script>
</html>
N宫格的更多相关文章
- 宫格布局实例（注意jquery的版本号要统一）
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- 宫格布局实例（注意jquery的版本号要统一）2
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- css-九宫格自适应的实现
高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...
- HTML5 Canvas中9宫格的坑
近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
- Android自定义多宫格解锁控件
在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...
- vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...
- golang 六宫格、九宫格头像生成
图片示例就不传了,在原WordPress上. //Merge6Grid 6宫格 //rule NO1:至少3张图 最多6张图 // NO2:第一张大小 60*60 其他大小 28*28 间隔4px 合 ...
- Python爬虫学习笔记之微信宫格验证码的识别(存在问题)
本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...
- 前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...
随机推荐
- 使用Python开发环境Wing IDE设立项目注意事项
使用Wing IDE的第一步是建立一个项目文件,这样Wing IDE就可以找到并分析源代码,存储工作. Wing IDE会自动以默认的项目进行启动.在本教程中用户也可以使用这个默认项目进行示例操作.如 ...
- 【Oracle】曾经的Oracle学习笔记（4-7）多表联合查询，子查询，动态条件查询
一.多表联合查询 二.子查询 三.动态条件查询 LESSON 4 Displaying Data from Multiple Tables------------------------------- ...
- newsyslog.conf详解
newsyslog.conf 指出了哪个日志文件要被管理,要保留多少和它们什么时候被创建.日志文件可以在它们达到一定大小或者在特定的日期被重新整理.# configuration file for n ...
- mybatis-映射器的CRUD
设计步骤:model.mapper.dao.service.junit单元测试.log4j日志 项目和之前的一样在此只是创建了test和修改了mapper 1.修改映射 1.1修改接口 package ...
- 打包ios软件并发布到应用商店
真心感慨程序员是一个神奇的动物. 昨天接到任务,将项目打包并发布到apple商店.于是乎... 利用Hbuilder打包 需要的3个文件: AppId,描述文件profile,以及私钥证书 必须条件: ...
- System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。解决办法
查一下数据库的UID数据是否格式正确,如: 错误格式1: {E056BB36-D824-4106-A9C3-D8D8B9ADC1C 错误格式2: E056BB36-D824-4106-A9C3-D8D ...
- 为什么L1稀疏，L2平滑？
使用机器学习方法解决实际问题时,我们通常要用L1或L2范数做正则化(regularization),从而限制权值大小,减少过拟合风险.特别是在使用梯度下降来做目标函数优化时,很常见的说法是, L1正 ...
- 在mininet上基于ovs，ovx，pox搭建三点虚拟网络
本次试验基于mininet平台,在平台中利用ovs新建1个交换机,以pox为控制器,ovx作为中间层实现虚拟化. 基础请参照http://ovx.onlab.us/getting-started/tu ...
- Activiti学习记录(三)
1.流程变量 1.1 流程图 流程变量在整个工作流中扮演很重要的作用.例如:请假流程中有请假天数.请假原因等一些参数都为流程变量的范围.流程变量的作用域范围是只对应一个流程实例.也就是说各个流程实例的 ...
- C#继承机制 C#中的继承符合下列规则
1.继承是可传递的.如果C从B中派生,B又从A中派生,那么C不仅继承了B中声明的成员,同样也继承了A中的成员.Object 类作为所有类的基类. 2.派生类应当是对基类的扩展.派生类可以添加新的成员, ...