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实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...
随机推荐
- vue实现选中列表功能
<template> <div> <ul v-for="prop in items"> <dt>{{prop.name}}</ ...
- vue-实现一个购物车结算页面
这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用 如果实在一个页面中的兄弟组件,可以使用$emit和$on 中间件,eventBus.js 放在components目录下面 ...
- 解决windows7系统的快捷方式无法添加到任务栏
#以下4条,进入cmd命令界面下逐个执行cmd /k reg add "HKEY_CLASSES_ROOT\lnkfile" /v IsShortcut /fcmd /k reg ...
- 调用cmd命令行命令（借鉴）
留待以后观看 ———————————————————————————————————————————————————————————————————————————— public class IP_ ...
- es6 随笔
记录一些学习es6中学习的新特性,挺有用,作为日后复习es6用,便于记忆. 1.变量定义let和const es6用let.const代替,let是定义块级作用域中的变量,const声明之后必须赋值, ...
- 从用户访问网站流程开始，细说web网络基础
1.用户访问网站流程框架 2.dns解析原理 3.tcp/ip三次握手过程原理,11种连接状态 4.tcp/ip四次挥手过程原理,11种连接状态 5.http协议原理(www服务的请求过程)请求细节, ...
- CSS布局--垂直水平居中
···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...
- Centos 编译安装bind错误
[root@linux-node1 tmp]# tar xf bind-9.11.1-P1.tar.gz [root@linux-node1 tmp]# cd bind-9.11.1-P1 [root ...
- python实现剑指offer对称的二叉树
题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. # -*- coding:utf-8 -*- # class TreeNode ...
- UVA1629 Cake slicing
题目传送门 直接暴力定义f[x1][y1][x2][y2]是使对角为\((x1, y1),(x2, y2)\)这个子矩形满足要求的最短切割线长度 因为转移顺序不好递推,采用记忆化搜索 #include ...