0551-62380569

营销之道 干货分享

了解企业动态,分享前沿的营销推广干货,成长路上,我们携手同行
当前位置:主页 > 营销学院 > 建站知识 >
HTML5重复网格线
来源: www.jiufei.net 时间:2021-01-10 11:27浏览量:0 次

  目前为止,本章所定义的网格都很易学习,且能应用于一些实际情况,然而为了实现更好的控制性能,常常会用到更复杂的网格,12列或者16列的网格是最常见的,每两列之间通常还有一个孔(gutter,空白的间隔)用来把相邻列隔开.但如果使用网格而已语法,即使是6列带孔的网格的代码都是十分繁琐的:
  E{grid-columns;1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;}
  想象如果有16列的话代码有多繁琐吧,为了解决这个问题,可以使用repeat()函数.此函数有两个参数:一个用来设置重复次数的整数,另一个是要被重复的网格线的值:
  E{grid-columes:1fr repeat(5,10px 1fr);}
  此行代码定义了一个轨迹,它宽1个fr,然后把一个10像素和1fr的样式重复4次,和上例中的代码是等效的.
  IE10使用的是一个老版本标准的语法,此语法里重复次数这个参数放在圆周括号后面的一个方括号里,若要为win8的界面设计应用,则用以下语句:
  E{ -ms-grid-columns:1fr repaet(10px 1fr)[5];}

[免责声明] 本站部分文章和图片均来自用户分享和网络收集,版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如有侵权请联系本站, 合肥网络公司专注于网络推广,转载请说明出处:www.jiufei.net/study/webdesign6868.html

返回目录 在线咨询
上一篇:DOMContentLoaded事件 下一篇:HTML5网格布局介绍
相关推荐

售后响应及时

全国7×24小时客服热线

阿里云硬件支持

更安全、更高效、更稳定

价格公道透明

全国统一价,不弄虚作假

合作风险小

重合同讲信誉,无效全额退款

全国客户服务热线(7X24小时)

0551-62380569

Copyright © 2008-2021 安徽省久飞软件工程技术研究中心    ICP备案: 皖ICP备2022014487号
公司地址:合肥市瑶海区和平路周谷堆物流园1号楼(自有物业)   联系电话:0551-62380569    13625515912
友情链接: 合肥网站推广   合肥抖音快手推广   合肥百度优化   网站优化知识   合肥网站建设   合肥网络公司