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 ...
随机推荐
- nginx下运行php的程序时返回200访问却是空白页问题的解决方法
由于nginx与php-fpm之间的一个小bug,会导致这样的现象: 网站中的静态页面 *.html 都能正常访问,而 *.php 文件虽然会返回200状态码, 但实际输出给浏览器的页面内容却是空白. ...
- Django runserver UnicodeDecodeError
编码问题可以说是我遇到过的python 2.7最大的败笔 今天写django时,很简单的一个项目却报UnicodeDecodeError,而我的代码中一个中文字符都没有出现. 如下: 网上找到的所谓解 ...
- php网站速度性能优化（转）
一个网站的访问打开速度至关重要,特别是首页的打开加载过慢是致命性的,本文介绍关于php网站性能优化方面的实战案例:淘宝首页加载速度优化实践 .想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这 ...
- 初见 fultter for MAC
第一步:下载flutter https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 第二步:(development ...
- Tomcat配置虚拟主机、tomcat的日志
1.配置Tomcat的虚拟主机修改:vim /usr/local/tomcat9/conf/server.xml 添加一个虚拟主机:加入: <Host name="www.tomcat ...
- maven编译错误maven-assembly-plugin:2.2-beta-5:assembly (default-cli) on project
maven对项目编译时报错 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-assembly-plugin:2.2-beta ...
- 学习笔记TF029:实现进阶卷积网络
经典数据集CIFAR-10,60000张32x32彩色图像,训练集50000张,测试集10000张.标注10类,每类图片6000张.airplance.automobile.bird.cat.deer ...
- kolla单节点部署openstack
virtualbox环境: 双网卡:enp0s3(桥接) 192.168.102.194 enp0s8(桥接) 无ip 块存储 50G 关闭防火墙,selinux. 配置yum源:wget ...
- js正则表达式讲的最好的
https://www.cnblogs.com/chenmeng0818/p/6370819.html
- iOS兼容性（不断完善）
1.iOs不支持iframe,不支持flash,如果移动端要嵌入视频,请用html5 的video标签.