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 ...
随机推荐
- SQL注入之Sqli-labs系列第三十二关（基于宽字符逃逸注入）
开始挑战第三十二关(Bypass addslashes) 0x1查看源代码 (1)代码关键点 很明显,代码中利用正则匹配将 [ /,'," ]这些三个符号都过滤掉了 function che ...
- （转）junit简介
什么是单元测试? 所谓单元测试是测试应用程序的功能是否能够按需要正常运行,并且确保是在开发人员的水平上,单元测试生成图片.单元测试是一个对单一实体(类或方法)的测试.单元测试是每个软件公司提高产品质量 ...
- 构建gulp项目
express是node.js中的构建工具,如果需要使用express构建,首先需要安装express. 构建一个项目: |-- app| |-- css| |-- js| | `-- class| ...
- HDU - 6167： Missile Interception （二分+圆的交）
pro:二维平面上,给点N个导弹的初始位置,射出方向,速度.问你是找一点,可以从这一点向任意方向发出拦截导弹,速度未V,最小化最大拦截导弹的时间. 如果要拦截一个导弹,必须在导弹发射之后才可以发射拦 ...
- ORA-02275: 此表中已经存在这样的引用约束条件
问题描述: 针对这个问题,发表一下我的观点.emp表和dept表使用hibernate关联查询时报的错,使用的是非注解形式,和其他一样.他们各自有entity,各自有一个hbm.xml文件,emp表这 ...
- 前后端如何保持长连接？---websocket
1. pc端的应用,一般会采用前端定时请求后台; 2. app定时去访问后台的话,对用户来说并不友好,会消耗大量的流量,移动端最好的方式就是后台主动向app推送信息; 3. H5提供了一种比较好的方式 ...
- Linux scp命令详解
Linux scp命令 Linux scp命令用于Linux之间复制文件和目录. scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. 语法: ...
- WINDOWS NT操作系统的注册表文件
WINDOWS NT操作系统的注册表文件 WINDOWS NT注册表文件分为系统文件和用户文件两类. 系统设置和缺少用户 配置数据存放在系统C:\Windows\System32\config文件夹下 ...
- os.rename 和os.replace
f1 = open("hello.txt","w") f1.write("hello,my name is bobo.") f1.close ...
- ubuntu 更换为mac主题
step1. 安装相关软件包 sudo add-apt-repository ppa:noobslab/themes sudo apt-get update sudo apt-get install ...