CSS: Grid homework redact.
The web homework:
Finished design：
(I use six block with different color to show this homework and I put the web's code below there)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practise</title>
<link rel="stylesheet" href="practise.css">
</head>
<body>
<div>
<div class="wrapper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
CSS:
.wrapper {
display:grid;
grid-template-columns: 80px 80px 80px;
grid-template-rows: 80px 80px 80px 80px;
}
.item1{
background: red;
grid-area: 1/1/2/4;
}
.item2{
background: green;
grid-area: 2/1/5/2;
}
.item3{
background: blue;
grid-area: 2/2/3/3;
}
.item4{
background: black;
grid-area: 3/2/4/3;
color: white;
}
.item5{
background: yellow;
grid-area: 4/2/5/3;
}
.item6{
background: pink;
grid-area: 2/3/5/4;
}
Finally, put up a simple and exhaustive website about CSS : https://blog.csdn.net/hj7jay/article/details/70670467
CSS: Grid homework redact.的更多相关文章
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
- 各个浏览器开启CSS Grid Layout的方式
2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...
- 如何使用Flexbox和CSS Grid，实现高效布局
CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- 快速使用CSS Grid布局，实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- CSS Grid 读书笔记
基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...
- CSS Grid 布局
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...
随机推荐
- Django App(五) load static files
经过前面4篇的努力,已经基本完成了,polls站点的功能,但是所有界面都没有涉及样式,和JavaScript的导入.到目前为止了解到的Django是通过解析Url来完成对客户端的响应的,那么组成站点所 ...
- Java错误：结束的字符文字
编译器为NetBeans 在学习java的时候突然出现了以下错误 错误代码是: Gen <Integer ,String> a = new Gen <Integer, String& ...
- 05_解决mac百度网盘下载速度慢问题
第一步:下载软件 下载工具包:aria2GUI和chrom插件 链接:https://pan.baidu.com/s/104t6aZXx9zfxBV9rS_eLfg 密码:yg96 ①下载Aria2 ...
- （转）junit简介
什么是单元测试? 所谓单元测试是测试应用程序的功能是否能够按需要正常运行,并且确保是在开发人员的水平上,单元测试生成图片.单元测试是一个对单一实体(类或方法)的测试.单元测试是每个软件公司提高产品质量 ...
- Error: No EPCS layout data - looking for section [EPCS-C84018]
/********************************************************************** * Error: No EPCS layout data ...
- InstallShield-常用prq文件的下载地址
VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...
- Python学习之路基础篇--02Python基础+小作业
1 变量 变量就是将一些运算的中间结果暂存到内存中,以便后续代码调用.必须由数字,字母,下划线任意组合,且不能数字开头.不能是python中的关键字,如['and', 'as', 'assert', ...
- 几个特殊的IP地址
1)私有地址 IP地址在全世界范围内唯一,看到这句话你可能有这样的疑问,像192.168.0.1这样的地址在许多地方都能看到,并不唯一,这是为何?Internet管理委员会规定如下地址段为私有 ...
- webpack初步学习
https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.
- linux shell 指令搜索顺序
在linux shell 中输入一个命令,如果有多个同名指令,shell需要按照一定规则去取优先级高的一个执行,shell命令的搜索顺序为: 1.别名,使用alias创建的命令. 2.关键字,如if, ...