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

使用网络构建复杂布局超实用的技巧,赶紧收藏吧

前端开发工程师必读书籍有哪些值得推荐?我们直接进入代码复杂版式设置,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid

前端开发工程师必读书籍有哪些值得推荐?我们直接进入代码复杂版式设置,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid/pen/zYqNvgv

  Header  

  
Section
    
Footer
在上面,我们创建了一个header、两个aside和一个footer元素,并将它们包装在一个container 元素中复杂版式设置。我们为容器元素中的所有元素添加背景色和字体大小。

.container > * {  background: aquamarine;  font-size: 30px;}运行的网页如下:

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

现在我们添加一些网格属性:

.container {  display: grid;  grid-gap: 5px;  grid-template-areas:     "header"    "aside-1"    "aside-2"    "section"    "footer"}/* Assign grid areas to elements */header {  grid-area: header;}aside:nth-of-type(1) {  grid-area: aside-1;}aside:nth-of-type(2) {  grid-area: aside-2;}section {  grid-area: section;}footer {  grid-area: footer;}首先,我们定义了display:grid,它将启用网格布局,然后我们使用grid-gap在网格元素中增加间隙复杂版式设置

接下来,我们为每个html元素分配了一个网格区域名称复杂版式设置。在container 类中,我们可以使用grid-template-areas`属性定 义html 模板的外观,注意网格模板区域是如何排列的。

grid-template-areas:     "header"    "aside-1"    "aside-2"    "section"    "footer" 元素的顺序与 dom 结构不同复杂版式设置。但是,最终按我们网络区域的顺序来展示。

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

下一步是使我们的页面具有响应性复杂版式设置。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码:

@media (min-width: 670px) {  .container {    grid-template-areas:       "header  header  header"      "aside-1 section  aside-2"      "footer    footer    footer"  }}我们所要做的就是在媒体查询中重新排序网格模板区域复杂版式设置

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

网格列和行如何使用 CSS 网格来组织列和复杂版式设置?先从下面的代码开始:

  One

  Two
  Three  Four  Five  Six添加一些基本的 css

.container {  display: grid;  height: 100vh;  grid-gap: 10px;}.item {  background: lightcoral;}我们为上面的 dom 结构使用了网格布局,并使用grid-gap增加了风格之间的间距复杂版式设置。现在,我们使用grid-template-columns属性来添加一些列。

.container {    display: grid;    height: 100vh;    grid-gap: 10px;    grid-template-columns: 100px 200px auto auto;}就像这样,我们使用了列复杂版式设置。我们指定第一列为100px,第二列为200px。由于我们在第3列和第4列中应用了auto,因此剩余的屏幕长度将在其中分成两半。

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

可以看到现在页面中有一个空白复杂版式设置。如果我想将第六列移至第三列和第四列怎么办?为此,我们可以使用grid-column-start和grid-column-end属性。

.item:nth-of-type(6) {  grid-column-start: 3;  grid-column-end: 5;}注意,我们使用grid-column-end: 5,值5指向列线复杂版式设置。第四列在网格的第五行结束。grid-column-start和grid-column-end值是指网格线。

如果你觉得网格线的值让人困惑复杂版式设置,你也可以使用span,下面的效果与上面一样:

.item:nth-of-type(6) {  grid-column-start: 3;  grid-column-end: span 2;}对于span 2,指定div占用网格中的两个插槽复杂版式设置。现在,假设要扩展第二列填充下面的空白区域。我们也可以通过grid-column-start属性轻松地做到这一点。

.item:nth-of-type(2) {  grid-row-start: span 2;}我们使用span和grid-row-start来指定我们想要占据两个插槽复杂版式设置

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

如上所见,我们已经能够使用少量的CSS网格属性来构建非常复杂的布局复杂版式设置

有效地使用 grid-templates现在来看看grid-templates,在本节中,我们将讨论如何为不同的屏幕大小创建不同的布局复杂版式设置

首先复杂版式设置,还是先来一段 dom 结构:

  header  

  
Section
    
Footer
接着复杂版式设置,添加一些样式:

`` .container { display: grid; height: 100vh; grid-gap: 10px; }

.container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``

我们给元素添加了背景色复杂版式设置。从上面的代码中可以看到,我们也使用了flex属性。我们可以将flex和grid结合在一起。在这个特殊的例子中,我们使用flex属性中心对齐内容。

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

对于移动端,我们希望section在header下面,right 在 section下面,我们可以使用网格区域来完成复杂版式设置。首先,我们定义网格区域:

.container {  display: grid;  height: 100vh;  grid-gap: 10px;  grid-template-areas:    "header"    "section"    "right"    "left"    "footer"}aside:nth-of-type(1) {  grid-area: left;}aside:nth-of-type(2) {  grid-area: right;}section {  grid-area: section;}footer {  grid-area: footer;}header {  grid-area: header;}在 grid-template-areas 中可以看到,我们先有header ,然后是section,然后是right,最后是left复杂版式设置。此外,我们希望我们的section比 left 和 right都大点。为了实现这一点,我们可以使用rid-template-rows属性

.container {  display: grid;  height: 100vh;  grid-gap: 10px;  grid-template-areas:     "header"    "section"    "right"    "left"    "footer";  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;}少了一张图片

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

我们可以根据需要设置移动端的视图复杂版式设置,接下我们使用媒体查询来适配一下大屏幕:

@media (min-width: 500px)  {  .container {    grid-template-areas:       "header header  header"      "left   section right"      "footer footer  right";    grid-template-rows: 1fr 6fr 1fr;    grid-template-columns: 1fr 6fr 1fr;  }}如何使用minmax函数动态跟踪元素的大小假设我们有两列,它们均匀地占据了屏幕上的可用空间复杂版式设置。通过使用 grid-template-columns,我们可以很容易地做到这一点。但是,如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸,但其中一个永远不会大于500px或小于200px。

对于这些类型的场景,我们使用minmax函数复杂版式设置。让我们来看看它的实际效果。

  One  Two.container {  display: grid;  height: 100vh;  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);}.one {  background: cyan;}.two {  background: pink;}在这个例子中,第一列总是在200px到500px之间复杂版式设置。然而,第二列的最小值可以是100px,对于更大的屏幕,它将覆盖屏幕的其余部分。

如何使用 repeat 函数?我们讨论一下元素中的重复模式复杂版式设置。我们如何处理它们?我们可以重复我们的代码或使用Javascript。不过,还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段,允许以更紧凑的形式编写显示重复模式的大量列或行。

  

    This item is 50 pixels wide.  
  
    Item with flexible width.  
  
    This item is 50 pixels wide.  
  
    Item with flexible width.  
  
    Inflexible item of 100 pixels width.  
#container {  display: grid;  grid-template-columns: repeat(2, 50px 1fr) 100px;  grid-gap: 5px;  box-sizing: border-box;  height: 200px;  width: 100%;  background-color: #8cffa0;  padding: 10px;}#container > div {  background-color: #8ca0ff;  padding: 5px;}使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

嵌套网格我还可以将网格嵌套在另一个网格中复杂版式设置, 来看看如何实现这一点:

  One  Two  Three      i    ii    iii    iv    v    vi    Five  Six我们首先在外部container上声明网格:

.container {  display: grid;  height: 100vh;  grid-gap: 10px;  grid-template-columns: repeat(auto-fill, minmax(200px, auto))}注意,我们在网格模板中有一个repeat函数,并将其与一个minmax函数组合在一起复杂版式设置。我们现在也可以将网格属性应用到内部网格。

.inner-grid {  display: grid;  background: white;  height: 100%;  grid-gap: 5px;  grid-template-columns: repeat(3, auto);}这样,我们网格中嵌套了一个网格复杂版式设置

使用网络构建复杂布局超实用的技巧<strong>复杂版式设置</strong>,赶紧收藏吧

今天就跟大家分享到这里复杂版式设置,感谢大家的观看,我们下期再见!

作者:Shadid Haque 译者:前端小智 来源:soshace

原文:https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/


推荐阅读
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 本文介绍了Java的集合及其实现类,包括数据结构、抽象类和具体实现类的关系,详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接,帮助读者更好地理解和使用Java的集合类。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 单点登录原理及实现方案详解
    本文详细介绍了单点登录的原理及实现方案,其中包括共享Session的方式,以及基于Redis的Session共享方案。同时,还分享了作者在应用环境中所遇到的问题和经验,希望对读者有所帮助。 ... [详细]
  • position属性absolute与relative的区别和用法详解
    本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • 本文介绍了一种图片处理应用,通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]
  • 本文介绍了H5游戏性能优化和调试技巧,包括从问题表象出发进行优化、排除外部问题导致的卡顿、帧率设定、减少drawcall的方法、UI优化和图集渲染等八个理念。对于游戏程序员来说,解决游戏性能问题是一个关键的任务,本文提供了一些有用的参考价值。摘要长度为183字。 ... [详细]
author-avatar
小辣椒jie
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有