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.的更多相关文章

  1. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  2. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

  3. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  4. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  5. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  6. 快速使用CSS Grid布局，实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  7. CSS Grid 读书笔记

    基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...

  8. CSS Grid 布局

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  9. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

随机推荐

  1. C# 实现CRC16校验

    前言 本文将使用一个NuGet公开的组件技术来实现CRC16校验功能,提供了一些简单的API,来方便的实现. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控 ...

  2. python 前端 html

    web 服务本质: 浏览器发出请求--HTTP协议--服务端接收信息----服务端返回响应---服务端把HTML文件发给浏览器--浏览器渲染页面. HTML: 超文本标记语言是一种用于创建网页的标记语 ...

  3. 3.6 html报告乱码问题优化

    3.6 html报告乱码问题优化 前言python2用HTMLTestRunner生成测试报告时,有中文输出情况会出现乱码,这个主要是编码格式不统一,改下编码格式就行.下载地址:http://tung ...

  4. Arch Linux pacman 与其他发行版操作比较

    原文:https://wiki.archlinux.org/index.php/Pacman/Rosettahttps://old-en.opensuse.org/Software_Managemen ...

  5. 【java编程】java中的移位运算符

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  6. Oracle的导入和导出

    导出命令: EXP 用户名/密码@数据库名  BUFFER=64000 file=G:\dmp\full1.dmp  OWNER=用户名 导入命令: IMP 用户名/密码@数据库名 BUFFER=64 ...

  7. 我发起并创立了一个 C 语言编译器 开源项目 InnerC

    本文是 VMBC / D#  项目 的 系列文章, 有关 VMBC / D# ,  见 <我发起并创立了一个 VMBC 的 子项目 D#>(以下简称 <D#>)  https: ...

  8. SQL特殊comment语法

    SQL 注释的特殊用法: /*!版本号 语句*/ 表示大于等于某个版本是,才执行相应的语句. 在版本为5.7.23的MySQL上做测试如下: 测试1 mysql> select 1 /*!507 ...

  9. 【java】this用法

    this代表当前类的引用对象:哪个对象调用方法,该方法内部的this就代表那个对象this关键字主要有两三个应用: (1)this调用本类中的属性,也就是类中的成员变量: class People { ...

  10. windows环境python2.7安装MySQLdb

    我电脑是64位,并且安装python不是默认路径,使用pip和mysql-python的exe文件安装都失败了. 后在网上找到一种安装方法,记录下. 确保安装了wheel,我的2.7默认安装了 pip ...