grid - 隐式命名网格线名称
1.隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称.
指定网格区域会给网格区域边线添加隐式的网格线名称。这些网格线的命名是基于网格区域来命名,只是在网格区域名称的后面添加后缀-start
或-end.
1 <view class="grid"> 2 <view class='item1'>1</view> 3 <view class='item'>2</view> 4 <view class='item'>3</view> 5 <view class='item'>4</view> 6 <view class='item'>5</view> 7 <view class='item'>6</view> 8 <view class='item'>7</view> 9 <view class='item'>8</view> 10 <view class='item'>9</view> 11 </view>
View Code
1 page { 2 color: #fff; 3 font-size: 16px; 4 } 5 6 .grid { 7 /* padding: 1%; */ 8 display: grid; 9 grid-gap: 1px; 10 line-height: 100px; 11 grid-template-areas: "header header" "content sidebar" "footer footer"; 12 grid-template-rows: 80px 1fr 40px; 13 grid-template-columns: 1fr 200px; 14 } 15 16 .item1 { 17 /* grid-area: inner; */ 18 /* grid-row-start: header-start; 19 grid-row-end: content-start; 20 grid-column-start: footer-start; 21 grid-column-end: sidebar-end; */ 22 } 23 24 .item { 25 text-align: center; 26 background-color: #d94a6a; 27 } 28 29 .item1 { 30 text-align: center; 31 /* line-height: 300px; */ 32 background-color: #1aa034; 33 }
View Code
2.在这个示例中,header
通过隐式的网格线名称设置其位置
1 page { 2 color: #fff; 3 font-size: 16px; 4 } 5 6 .grid { 7 /* padding: 1%; */ 8 display: grid; 9 grid-gap: 1px; 10 line-height: 100px; 11 grid-template-areas: "header header" "content sidebar" "footer footer"; 12 grid-template-rows: 80px 1fr 40px; 13 grid-template-columns: 1fr 200px; 14 } 15 16 .item1 { 17 /* grid-area: inner; */ 18 grid-row-start: header-start; 19 grid-row-end: content-start; 20 grid-column-start: footer-start; 21 grid-column-end: sidebar-end; 22 } 23 24 .item { 25 text-align: center; 26 background-color: #d94a6a; 27 } 28 29 .item1 { 30 text-align: center; 31 /* line-height: 300px; */ 32 background-color: #1aa034; 33 }
View Code
转载于:https://www.cnblogs.com/cisum/p/10675968.html
grid - 隐式命名网格线名称相关推荐
- 万恶之源:C语言中的隐式函数声明
1 什么是C语言的隐式函数声明 在C语言中,函数在调用前不一定非要声明.如果没有声明,那么编译器会自己主动依照一种隐式声明的规则,为调用函数的C代码产生汇编代码.以下是一个样例: int main(i ...
- scala中的隐式转换、隐式参数和隐式类
scala中的隐式转换.隐式参数和隐式类 @(SCALA)[scala] scala中的隐式转换隐式参数和隐式类 一隐式转换 1示例 2隐式转换的条件 二隐式参数 1示例 三隐式类 1示例 隐式转换是 ...
- Scala入门到精通——第十八节 隐式转换与隐式参数(一)
本节主要内容 隐式转换简介 隐式转换函数 隐式转换规则 隐式参数 1. 隐式转换简介 在Scala语言当中,隐式转换是一项强大的程序语言功能,它不仅能够简化程序设计,也能够使程序具有很强的灵活性.要想 ...
- 什么是C语言中的隐式函数声明?
「1.什么是C语言的隐式函数声明」 在C语言中,函数在调用前不一定非要声明.如果没有声明,那么编译器会自动按照一种隐式声明的规则,为调用函数的C代码产生汇编代码.下面是一个例子: int main(i ...
- 6-4-JSP隐式对象
一.隐式对象的概述 在JSP页面中,有一些对象需要频繁使用,如果每次都重新创建这些对象则会非常麻烦.为了简化Web应用程序的开发,JSP2.0规范中提供了9个隐式(内置)对象,它们是JSP默认创建的, ...
- 在c语言中函数的隐函,C语言中的隐式函数声明
1 什么是C语言的隐式函数声明 在C语言中,函数在调用前不一定非要声明.如果没有声明,那么编译器会自动按照一种隐式声明的规则,为调用函数的C代码产生汇编代码.下面是一个例子: int main(int ...
- C语言一定要有函数声明吗,1 什么是C语言的隐式函数声明在C语言中,函数在调用前不一定非要声明。如果没有声明,那么编译器会自动按照一种隐式声明的规则,为调用函数的C代码产生汇编代码。下...
1 什么是C语言的隐式函数声明 在C语言中,函数在调用前不一定非要声明.如果没有声明,那么编译器会自动按照一种隐式声明的规则,为调用函数的C代码产生汇编代码.下面是一个例子: int main(int ...
- Scala隐式转换详解
1.隐式转换 当编译器第一次编译失败的时候,会在当前的环境中查找能让代码编译通过的方法,用于将类型进行转换,实现二次编译,而这些方法就是隐式转换,Scala编译器所做的事情要比Java编译器做的事情要 ...
- grid - 使用相同的名称命名网格线和设置网格项目位置
1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...
最新文章
- 用一个创业故事串起操作系统原理(二)
- Python中re(正则表达式)模块函数学习
- 神经网络的反向传导到底是在干什么?
- obj转stl_3D打印,如何编辑STL文件?
- 生活感悟 2018-06-13
- tensorboard的可视化及模型可视化
- Spark 101:它是什么,它做什么以及为什么起作用
- python u_对python 命令的-u参数详解
- linux命令进入用户模式,linux怎么切换到root用户模式
- 百度分享新浪微博无法分享图片的解决方法
- Dialog 基本使用
- Struts action-mapping 元素讲解
- Direct3D透视教程,教你做出属于自己的透视
- linux 安装xz,在Ubuntu 18.04 LTS下安装linux-5.0.8.tar.xz的方法
- 一个非常不错的JQ 插件库
- zbbz cnk
- 【一周读书】All life is problem solving
- 上传即可使用的在线缩短网址源码
- 各平台免费翻译API
- c#物联网_基于C#实现日志记录与SQL SERVER的双向存储工控数字化之旅
热门文章
- 【HDU - 5890】Eighty seven(bitset优化背包)
- 【Python学习】 - sklearn - PCA降维相关
- *【CodeForces - 859C 】Pie Rules (博弈dp,时光倒流)
- (精)DEVC++的几个实用小技巧
- 【51nod - 1875】 丢手绢(约瑟夫问题,可打表,用STL模拟)
- linux 命令pg,linux下操作PostgreSQL的常用命令
- mysql atlas更新问题_Atlas几种常见故障解决(不定期更新)
- 初学多线程使用中踩过的坑
- linux 串口 lsr 0xc9,串口发送0x0D后,从串口接收到数据被转换成了0x0A
- tomcat上传文件到不同服务器,使用SpringMVC进行跨服务器上传文件出现的那些坑