grid简单布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a {
grid-area: 1 / 1 / 2 / 6;
}
.b {
grid-area: 1 / 7 / 10 / 8;
background: orange;
}
.c {
grid-area: 3 / 1 / 4 / 2;
}
.d {
grid-area: 3 / 3 / 4 / 4;
}
.e {
grid-area: 3 / 5 / 4 / 6;
}
.f {
grid-area: 5 / 1 / 6 / 4;
}
.g {
grid-area: 5 / 5 / 6 / 6;
}
.h {
grid-area: 7 / 1 / 8 / 2;
}
.i {
grid-area: 7 / 3 / 8 / 6;
}
.j {
grid-area: 9 / 1 / 10 / 6;
word-break: break-all;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">JkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkk</div>
</div>
</body>
</html>
grid简单布局的更多相关文章
- WPF简单布局 浅尝辄止
WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- grid栅格布局
前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...
- python之tkinter使用-Grid(网格)布局管理器
# 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...
- table 和 div 简单布局
table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
随机推荐
- symfony手动触发修饰html
symfony会修饰一些标签,如input[type=file],input[type=checkbox],input[type=radio]等 有时html是页面生成后插入的,需要手动使symfon ...
- Map与实体之间转换
package com.thunisoft.maybee.engine.utils; import java.lang.reflect.Field; import java.lang.reflect. ...
- CodeWarrior WarningC12056
C12056:SP debug info incorrect because of optimization or inline assemble 该warning是代码最优化时(common cod ...
- 8个日志级别（OFF、FATAL、ERROR、WARN、INFO、DEBUG、TRACE、 ALL）
log4j定义了8个级别的log(除去OFF和ALL,可以说分为6个级别),优先级从高到低依次为:OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE. ALL. ALL 最低等 ...
- Apache Commons CLI
简单的说,就是对命令的参数进行定义和解析的工具 -- 这里说的参数是我们常用的说法,而CLI里则是Option.Options,参数值(如果有)则是Option的arg(s). ## 为什么 那么,为 ...
- OpenGL基本框架与三维对象绘制
上次我们介绍了OpenGL的环境构建和二维对象的绘制,这次我们来讲讲三维对象的绘制: 绘制代码如下: Github代码仓库 // opengltest2.cpp : Defines the entry ...
- WCF Service 配置文件注释(转)
VS 2008 SP1(不确定是否不打SP1是否有)自带的一个编辑工具,可以更快的帮助定制配置文件, 以前看到过没有注意, 昨天正好一个同事提起, 这里记录一笔:打开VS 2008->Tools ...
- linux drwxr-xr-x 是什么意思
linux drwxr-xr-x 第一位表示文件类型.d是目录文件,l是链接文件,-是普通文件,p是管道 第2-4位表示这个文件的属主拥有的权限,r是读,w是写,x是执行. 第5-7位表示和这个文件属 ...
- php写文件操作
function writeLog($file, $msg, $mode='a+') { $fp = fopen($file, $mode); if(flock($fp, LOCK_EX)) { fw ...
- MATLAB出现：错误使用 xlsread (line 251)
背景: matlab 2015b和Excel2003 方法: 改Excel的Com加载项 步骤: 1 2 3 4