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实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...
随机推荐
- 使用纯css实现波浪效果
有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...
- Git 团队常用命令操作指南
命令如下: git clone -b <branch name> [remote repository address] 主要就是在clone的时候,后面添加branch的信息. 报错: ...
- Eucalyptus简介
1.Eucalyptus是什么? Eucalyptus n.桉树 Eucalyptus is a Linux-based software architecture that implements ...
- （转载）C#线程优先级详解
计算机中经常会有多个任务同时运行,其中总有一些看起来更紧急,更需要优先完成.比如我们现在有两个任务,一个任务是下载一部电影,另一个任务是检测用户的输入.显然及时响应用户操作应具有更高的优先级,因为我们 ...
- sql server 2016新特性 查询存储（Query Store）的性能影响
前段时间给客户处理性能问题,遇到一个新问题, 客户的架构用的是 alwayson ,并且硬件用的是4路96核心,内存1T ,全固态闪存盘,sql server 2016 . 问题 描述 客户经常出现 ...
- webpack前端构建工具学习总结（二）之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- pta 编程题14 Huffman Codes
其它pta数据结构编程题请参见:pta 题目 题目给出一组字母和每个字母的频数,因为哈夫曼编码不唯一,然后给出几组编码,因为哈夫曼编码不唯一,所以让你判断这些编码是否符合是哈夫曼编码的一种. 解题思路 ...
- win10安装mac系统
https://baijiahao.baidu.com/s?id=1587241720383991895&wfr=spider&for=pc https://mp.weixin.qq. ...
- POJ 3469 Dual Core CPU（最小割模型的建立）
分析: 这类问题的一遍描述,把一些对象分成两组,划分有一些代价,问最小代价.一般性的思路是, 把这两组看成是S点和T点,把划分的代价和割边的容量对应起来求最小割. 把S和可模版tem之间到达关系看作是 ...
- Why malloc+memset is slower than calloc?
https://stackoverflow.com/questions/2688466/why-mallocmemset-is-slower-than-calloc/ The short versio ...