html5网格布局模板,CSS3 网格布局模板区域（grid-template-areas）属性使用实例

CSS

语言：

CSSSCSS

确定

body {

width: 100vw;

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

background: #eee;

}

.area {

display: grid;

width: calc(5 * 60px);

height: calc(5 * 60px);

padding: 60px;

border-radius: 50%;

box-shadow: 20px 20px 20px #bdbdbd;

background: white;

-webkit-transition: all 1s ease-out;

transition: all 1s ease-out;

grid-template-rows: repeat(5, 60px);

grid-template-columns: repeat(5, 60px);

grid-template-areas: ". g g g . " "o_ . . . . " "o . e e . " "o . . . l " ". g_ g_ g_ . ";

}

.area:hover {

-webkit-transform: translate(20px, 20px);

-ms-transform: translate(20px, 20px);

transform: translate(20px, 20px);

box-shadow: 0 0 0 #9e9e9e;

}

.g {

grid-area: g;

background: #ea4335;

}

.o_ {

grid-area: o_;

background: #ff9800;

}

.o {

grid-area: o;

background: #fbbc05;

}

.g_ {

grid-area: g_;

background: #34a853;

}

.l {

grid-area: l;

background: #00bcd4;

}

.e {

grid-area: e;

background: #4285f4;

}

.x {

grid-area: x;

background: #9e9e9e;

}

html5网格布局模板,CSS3 网格布局模板区域（grid-template-areas）属性使用实例相关推荐

网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
html国字型布局,结合CSS3的布局新特征谈谈常见布局方法
写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局在拿到设计稿时,作为一个前端人员, ...
css flex布局 padding,CSS3 flex布局之快速实现BorderLayout布局
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代 ...
Flex布局让你的布局更完美
Flex布局让你的布局更完美 CSS3 Flex布局有很多人和我一样吧,刚开始学HTML的时候用的都是传统的布局,有时用心设计的HTML+CSS样式可能由于对方的设备.浏览器的原因,导致用户浏览页 ...
polished css,CSS3网格布局（grid）模板在线构建工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const {render} = ReactDOM; const {Component, PropTypes ...
CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格. 当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道. 这些隐 ...
一篇文章搞懂CSS3网格布局（Grid）
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
布局的神---网格布局最全总结，建议点赞收藏
网格布局一.什么是网格布局网格布局,顾名思义就是像网一样有一个个格子一样的布局.在一个容器里面,我们可以切割成很多行很多列,形成一个个网格,从而对这些网格进行规则性的排序,使用,达到我们复杂的页面 ...
div布局、table布局、flex布局、多列布局、网格布局示例
目录基础代码 demo.html css/common.css div实用布局示例代码效果图 table布局代码效果图 flex布局代码效果图多列布局代码效果图网格布局代码效 ...

html5网格布局模板,CSS3 网格布局模板区域（grid-template-areas）属性使用实例

html5网格布局模板,CSS3 网格布局模板区域（grid-template-areas）属性使用实例相关推荐

最新文章

热门文章