热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

计算机英语第3句:grid布局中的area

今天的句子是关于CSS布局中的grid布局。1.句子Inthepreviousguidewelookedatgridlines,andhowtopositionitemsagain
今天的句子是关于 CSS 布局中的 grid 布局。
1.句子
In the previous guidewe looked atgrid lines, and how to position items againstthose lines. When you use CSS Grid Layout you always have lines, and this can be a straightforwardway to place items on your grid. However, there is an alternatemethod to use for positioning items on the grid which you can use alone or in combination withline-based placement. This method involvesplacing our items using named template areas, and we will find out exactlyhow this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout!

来自:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

2.关键词解析:

previous guide:上一篇指南,guide 经常会遇到,可以理解放指南;

looked at:查看,作者的意思是上一篇指南中学习了网格线;

against:依赖;

straightforward:简单的,容易的,直接的;

alternate:可替换的;

combination with:与.......相结合;

involved:包含、需要、牵涉、加入;

exactly:确切地,准确地;

involved:包含

3.译文

在上一篇指南中我们研究了网格线,以及如何根据网格线定位项目(grid item)。在使用网格布局的时,因为总会有网格线,所以使用网格线定位项目是最直接的方法。不过,还有一种方法可以定位项目,它可以单独使用,也可以把它和基于网格线的定位结合起来。这种方法需要涉及到使用模板区域命名来定位项目,接下来我们将弄清楚这种方法如何使用。很快你就会明白在网格布局中为什么我们称这种方法为 ASCII艺术方法。

4.打卡指令(任意一个):

<1>自己翻译试试。
<2>.自由发挥&#xff0c;有什么想说的&#xff0c;欢迎留言交流。
<3>.直接打卡吧&#xff01;&#xff01;&#xff01;


推荐阅读&#xff1a;
第2天&#xff1a;图解 FlexBox 布局&#xff08;上&#xff09;
死磕 CSS 布局 - 前端小课第二阶段


推荐阅读
  • 前端开发工程师必读书籍有哪些值得推荐?我们直接进入代码复杂版式设置,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • 带添加按钮的GridView,item的删除事件
    先上图片效果;gridView无数据时显示添加按钮,有数据时,第一格显示添加按钮,后面显示数据:布局文件:addr_manage.xml<?xmlve ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • Java图形化计算器设计与实现
    本文介绍了使用Java编程语言设计和实现图形化计算器的方法。通过使用swing包和awt包中的组件,作者创建了一个具有按钮监听器和自定义界面尺寸和布局的计算器。文章还分享了在图形化界面设计中的一些心得体会。 ... [详细]
  • 本文介绍了Python字典视图对象的示例和用法。通过对示例代码的解释,展示了字典视图对象的基本操作和特点。字典视图对象可以通过迭代或转换为列表来获取字典的键或值。同时,字典视图对象也是动态的,可以反映字典的变化。通过学习字典视图对象的用法,可以更好地理解和处理字典数据。 ... [详细]
  • 今日份分享:Flutter自定义之旋转木马
    今日份分享:Flutter自定义之旋转木马-先上图,带你回到童年时光:效果分析子布局按照圆形顺序放置且平分角度子布局旋转、支持手势滑动旋转、快速滑动抬手继续旋转、自动旋转支持X轴旋 ... [详细]
  • python3 logging
    python3logginghttps:docs.python.org3.5librarylogging.html,先3.5是因为我当前的python版本是3.5之所 ... [详细]
  • java io换行符_Java IO:为什么从stdin读取时,换行符的数字表示出现在控制台上?...
    只是为了更好地理解我在讲座中听到的内容(关于Java输入和输出流),我自己做了这个小程序:publicstaticvoidmain(String[]args)thro ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • 关于extjs开发实战pdf的信息
    本文目录一览:1、extjs实用开发指南2、本 ... [详细]
  • 转自:http:www.phpweblog.netfuyongjiearchive200903116374.html一直对字符的各种编码方式懵懵懂懂,什 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
author-avatar
忽而今秋_丶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有