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 ...
随机推荐
- 51单片机数据类型int,float,指针所占字节数
1.int===2个字节 2.sfr===特殊功能寄存器,也是一种扩充数据类型,占用1个内存单元,利用它可以访问51单片机内的所有特殊功能寄存器. sfr P1 = 0x90;/////////这一句 ...
- SpringBoot（三）thymeleaf+JPA+MySql
接着上一节的 第一步:在pom文件中加入以下代码: <!--JPA--> <dependency> <groupId>org.springframework.boo ...
- spring集成jedis简单实例
jedis是redis的java客户端,spring将redis连接池作为一个bean配置. redis连接池分为两种,一种是“redis.clients.jedis.ShardedJedisPool ...
- [转]Golang TLS
首先是自签证书: openssl与数字证书的使用 https://blog.csdn.net/yue7603835/article/details/72569012 Golang TLS服务端/客户端 ...
- 认识：人工智能AI 机器学习 ML 深度学习DL
人工智能 人工智能(Artificial Intelligence),英文缩写为AI.它是研究.开发用于模拟.延伸和扩展人的智能的理论.方法.技术及应用系统的一门新的技术科学. 人工智能是对人的意识. ...
- js补零方法
方法如下: function getZero(num, index) { if((parseInt(num) != 0) && (typeof num == "undefin ...
- 网络编程-----IO
IO模型介绍 阻塞IO 非阻塞 多路复用 异步 IO模型比较分析 selectors 阻塞IO:之前写的所有的socket,recv,accput都是 阻塞原理: 其实多数时间多用到了等待数据那里. ...
- CentOS6.5安装mysql5.7
CentOS6.5安装mysql5.7 查看mysql的安装路径: [root@bogon ~]# whereis mysql mysql: /usr/bin/mysql /usr/lib/mysql ...
- 《Linux内核原理与分析》第七周作业
课本:第六章 进程的描述和进程的创建 操作系统内核实现操作系统的三大管理功能 进程管理 内存管理 文件系统 在操作系统原理中,通过进程控制块PCB描述进程:在Linux内核中,通过一个数据结构stru ...
- poj 3264 倍增 ST表
#include<iostream> #include<cmath> using namespace std; ; int a[maxn]; ]; ]; int quick(i ...