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 ...
随机推荐
- Mondrian辅助组件----Schema WorkBench(架构平台简介)
Schema WorkBech 是Pentaho套件的另一个组件,是mondrian中schema文件生成工具.通过Schema WorkBench我们可以快速生成一个schema文件,不再需要手写. ...
- C#中关于对out和ref的认识
1.两者都是按照地址进行传递的.2.ref关键字是的参数按照引用传递的方式进行.他的效果是控制权传递会调用方法是,可以对这个参数进行修改 要使用ref参数,那么方法的定义和调用方法都必须进行显示的 ...
- datePecker时间控件区间写法
成交时间: <input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$d ...
- centos安装VirtualBox增强包VBoxGuestAdditions
1.如果你的CentOS 版本早于 6,那么需要在 /etc/grub.conf 中添加一行 divider=10,以将这个参数传递给核心,以减少 idle CPU load. 2.#yum up ...
- PHP输出缓存ob系列函数详解
PHP输出缓存ob系列函数详解 ob,输出缓冲区,是output buffering的简称,而不是output cache.ob用对了,是能对速度有一定的帮助,但是盲目的加上ob函数,只会增加CPU额 ...
- Vue组件的介绍与使用
组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...
- jmeter 关联
(1)正则表达式提取器 注:正则表达式部分配置说明 案例: 动态值:name=userSession value=119828.306682868zVzDzzipfcfDzQicpAVVVf> ...
- Python 解决： from pip import main ImportError: cannot import name 'main'
此次报错是因为 pip 升级出的问题: from pip import mainif __name__ == '__main__': sys.exit(main()) 改为: from pip imp ...
- PostgreSQL 自定义自动类型转换(CAST)
转载自:https://yq.aliyun.com/articles/228271 背景 PostgreSQL是一个强类型数据库,因此你输入的变量.常量是什么类型,是强绑定的,例如 在调用操作符时,需 ...
- flask-appbuilder +echarts 展示数据笔记
pip install flask-appbuilder fabmanager create-app cd newapp fabmanager create-admin fabmanager run ...