一个简单的gridlayout栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/girdlayout.css">
</head>
<body>
<h1>这是一个关于gridLayout的栗子</h1>
<hr>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
css:
h1{display: block;text-align:center;}
hr{color: blue; font-size: 12px;}
* {box-sizing: border-box;}
.main {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.main > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: blue;
padding: 1em;
color: red;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
一个简单的gridlayout栗子的更多相关文章
- 应用OpenMP的一个简单的设计模式
小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...
- 一个简单易用的容器管理平台-Humpback
什么是Humpback? 在回答这个问题前,我们得先了解下什么的 Docker(哦,现在叫 Moby,文中还是继续称 Docker). 在 Docker-百度百科 中,对 Docker 已经解释得很清 ...
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少. ...
- 第四章 .net core做一个简单的登录
项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 在Openfire上弄一个简单的推送系统
推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库
57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
随机推荐
- Spring Developer Tools 源码分析:二、类路径监控
在 Spring Developer Tools 源码分析一中介绍了 devtools 提供的文件监控实现,在第二部分中,我们将会使用第一部分提供的目录监控功能,实现对开发环境中 classpath ...
- Debian/Ubuntu/Deepin下AndroidStudio2/3打开AVD模拟器无反应
Debian系AS无法启动模拟器 问题描述 早在半年前将开发环境从windows迁移到了Linux:当时用的是Debian系统,也是在安装完成AndroidStudio之后无法开启模拟器,也没出现什么 ...
- python全栈开发笔记---------数据类型---字典方法
def clear(self) 清空字典里所有元素 # info = { # "k1":18, # "k2":True, # "k3":[ ...
- Code::Blocks环境下导入WS2_32.lib文件
打开菜单选项中 Settings -> Compiler 点击Add 找到lib文件的路径,导入 点击OK--OK,完成!
- 输入、输出与Mad Libs游戏
name1 = input('请输入一个名字:') name2 = input('再输入一个名字:') article = input('请输入一种物品:') print('{}掉进了{},{}去救她 ...
- LNMP(二)
第二十一课 LNMP(二) 目录 一.默认虚拟主机 二.Nginx用户认证 三.Nginx域名重定向 四.Nginx访问日志 五.Nginx日志切割 六.静态文件不记录日志和过期时间 七.Nginx防 ...
- Hadoop学习笔记01_Hadoop搭建
想往大数据方向转, 难度肯定是有的. 基础知识肯定是要有的,如果是熟悉JAVA开发的人,转向应该优势大. 像我这样的,只有Linux基础以及简单的PHP基础的人,转向难度很大.但是事在人为,努力学习多 ...
- B-trees
B-trees are balanced search trees designed to work well on disks or other direct accesssecondary sto ...
- [转] C++ 和 python之间的互相调用
转载自:https://www.cnblogs.com/apexchu/p/5015961.html 一.Python调用C/C++ 1.Python调用C动态链接库 Python调用C库比较简单,不 ...
- Java错误:结束的字符文字
编译器为NetBeans 在学习java的时候突然出现了以下错误 错误代码是: Gen <Integer ,String> a = new Gen <Integer, String& ...