网格布局入门学习

相约爱晚亭 · 发表于 2022-10-13 11:11

马黑黑发表于 2022-10-13 07:26
那这个grid布局应该是全新的东东了

全新内容，跟着老师学习。

马黑黑 · 发表于 2022-10-13 12:17

相约爱晚亭发表于 2022-10-13 11:11
全新内容，跟着老师学习。

内的内容比较多，急得话，可以去网上找教程，一口气学透

马黑黑 · 发表于 2022-10-13 12:43

网格布局入门第二讲：行列的高宽与间距

上一讲，我们通过以下关键代码，将12个div做成了 4*3 的12宫格：

css:

.mainbox {
      display: grid;
      grid-template-rows: auto auto auto auto;
      grid-template-columns: auto auto auto;
}

html:

<div class="mainbox">
      <div>1</div>
      <! -- 其他 div 代码 -->
      <div>12</div>
</div>

css代码中，grid-template-rows 和 grid-template-columns 用以制定行和列，有多少个 auto 就表示规定了多少行和列。auto 不是唯一的行列赋值，我们可以使用具体的数值表示，例如，我们希望12宫格中，第一列为100px、中间一列自动、第三列为150px，则定义 grid-template-columns 为：

grid-template-columns: 100px auto 150px;

这样，头尾两列的宽度是固定的，列里的内容即便溢出，列的宽度也不会改变。中间一列用 auto 值，表示除去头尾两列占用的宽度之和以外，元素所制定的宽度剩下的都给中间那一列。auto在布局中仍然相当有用：有时我们不能具体确定某一区域的尺寸（比如会动态变化中的元素、或将来会修改父元素尺寸的时候），auto就是最好的选择。

设置行的高度道理一样，我们假设第一、三、四行高度分别为 100px、150px、100px，第二行自动占完剩下的高度：

grid-template-rows: 100px auto 150px 100px;

制定行、列尺寸，也可以使用百分比，试看列的设置举例（左列25%、中间列60%、右列15%）：

grid-template-columns: 25% 60% 15%;

当有共同尺寸的行或列连续存在，例如，使用了三个 auto 的三列，还可以使用 repeat 关键字表示：

grid-template-columns: repeat(3, 33.3%);

上句代码，小角括号里的 3 表示重复（repeat）三次，33.3%表示每一列的宽度占比。有时，需要第一列固定，其余的尺寸一致，则可以这样：

grid-template-columns: 200px repeat(2, 300px);

grid的行、列还可以设置间距，使用 grid-gap 属性，gap 是间隙的意思：

grid-gap: 10px 20px;

这表示，行间距为 10px，列间距为 20px。假如行间距和列间距相同，假设都是20px，则上句可写成：

grid-gap: 20px;

也可以单独设置行、列间距，分别使用 grid-row-gap 和 grid-column-gap（记住 row 指行、column 指列）：

grid-row-gap: 10px;
grid-column-gap: 20px;

本讲就那么多内容，主要讲了网格布局的行列扩展知识。小结如下：

① 行列尺寸：行和列，可以设置尺寸，行的高度通过 grid-template-rows 设定、列的宽度通过 grid-template-columns 设定，尺寸单位可以用auto、实际尺寸（如px和em等）和百分比，还可以用 repeat 关键字将尺寸相同且紧挨在一起的行或列进行快捷设置。

② 行列间距：使用 grid-gap 简写属性可以快速设定行与列的间距。grid-gap 只有一个值是，表示行列间距一样，有两个值时，两个值用空格隔开，第一个值表示行距，第二个值表示列距。也可以分别使用 grid-row-gap 和 grid-column-gap 分别设置行间距和列间距。

最后给出一组设置了行列尺寸和行列间距的完整代码，运行效果放在下一层楼：

<style>
.mainbox {
      margin: auto;
      padding: 20px;
      width: 600px;
      height: 660px;
      display: grid;
      grid-template-rows: 100px auto 150px 100px;
      grid-template-columns: 100px auto 150px;
      grid-gap: 10px 20px;
}
.mainbox > div {
      padding: 10px;
      border: 1px dotted pink;
}
</style>

<div class="mainbox">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
</div>

马黑黑 · 发表于 2022-10-13 12:45

第二讲效果演示：

1

2

3

4

5

6

7

8

9

10

11

12

马黑黑 · 发表于 2022-10-13 23:38

前面两讲，反复用到 grid-template-rows 和 grid-template-columns ，这是网格的基础，必须能够理解，才能继续玩下去

马黑黑 · 发表于 2022-10-14 07:57

本帖最后由马黑黑于 2022-10-15 15:17 编辑

网格布局入门第三讲：网格合并

网格合并与Excel表格中的单元格合并是相同的理念。人们都说，Excel单元格合并是万恶之源，它使得表格布局美观了，却令计算函数无能为力。grid网格合并却是网格布局的精髓所在，通过网格合并，网页布局将不是一个难题。

要实现网格合并，我们需要对网格线有充分的理解。请看下图：

上图展示了网格布局初始概况，一个我们之前的课程中制作的12宫格。从结构上看，12个单元格的构成，实际上是由四条纵线（图中的蓝线）和五条横线（图中的红线）共同规划而成，图中，我们特意把纵线标蓝、横线标红，以方便大家观察。

图中的数字为单元格标号，实际上是各子 div 的文本内容，不是网格线的标志。网格线有标志，它是我们认知网格布局的虚无的标志：按照习惯，网格线的排列顺序从左往右、从上到下，所以，如果给网格线命名，则纵线可以从左往右依次用数字命名。这里我们必须弄懂的是网格线的起名顺序，竖线中，最左边的那根是 1，然后依次往右边数取，最后边的那根是 4，同理，横线中，最上边的那根是 1，然后依次往下数，最下边的那根是 5。

请再回头看看前面的插图，我们现在的任务是要将相同颜色（彩色部分）的单元格合并起来，也就是，第一行的3个单元格，亦即第 1、2、3 单元格将要合并起来成为一个新单元，第 4、5、7、8 四个单元格也要合并成一个新单元，其余白色部分保留不动。

第一行中的三个原始单元格，它们原先的HTML代码是这样：

      <div>1</div>
      <div>2</div>
      <div>3</div>

合并后，它们将不复存在，用下面的新 div 替换它们：

<div class="top">head here</div>

上一行HTML代码，里面的文本我们用 head here来代替原来的 1、2、3，表示它是网页的顶部。从代码中我们看到，这个新的取代原来3个 div 的 div 有一个 class 属性，类名为 top，它对应的 css 代码是这样：

.top {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 2;
}

就是说，.top 这个 CSS 选择器，它对应的 HTML 标签所占用的区域，从网格线第一根纵线开始（grid-column-start: 1;）到第四根纵线结束（grid-column-end: 4;）、从网格第一根横线开始（grid-row-start: 1;）到网格第二根横线结束（grid-row-end: 2;）。

接着合并第 4、5、7、8 四个单元格，现将以下代码从原来的HTML代码中删除掉：

<div>4</div>
<div>5</div>
<div>7</div>
<div>8</div>

用下面这个代替它们：

<div class="mid_left">middle left</div>

上面，我们把这个合并区域的 CSS 类选择器定义为 mid_left，其内的文本内容也更换为语义性的文本。它对应的 CSS 代码如下：

.mid_left {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 4;
}

这等于告诉浏览器，.mid_left 选择器，它对应的HTML标签所占用的区域，从网格线第一根竖线开始（grid-column-start: 1;）到第三根竖线结束（grid-column-end: 3;）、从网格线第二根横线开始（grid-row-start: 2;）到第四根横线结束（grid-row-end: 4;）。

任务完成。最后提示一下：grid 网格布局所合并的单元格是针对矩形的，意思是说，被合并的单元格们在观感上必须是相连成片且可以组成矩形形状的，否则不能合并。这与Excel合并单元格的原理一致，希望这一点不难理解。请参照本节插图理解一下以下的正确描述：

① 6、9、12可以合并；
② 10、11、12 可以合并；

③ 6、12 不可以合并；
④ 11、12、9 不可以合并。

下面提供本节课演示用的完整代码，效果请移步下一楼查看：

<style>
.mainbox {
      margin: auto;
      padding: 20px;
      width: 600px;
      height: 660px;
      display: grid;
      grid-template-rows: 100px auto 150px 100px;
      grid-template-columns: 100px auto 150px;
}
.mainbox > div {
      padding: 10px;
      border: 1px dotted red;
}
.top {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 2;
}

.mid_left {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 4;
}
</style>

<div class="mainbox">
      <div class="top">head</div>
      <div class="mid_left">middle left</div>
      <div>6</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
</div>

马黑黑 · 发表于 2022-10-14 07:59

本帖最后由马黑黑于 2022-10-15 09:14 编辑

网格单元合并演示：

head

middle left

6

9

10

11

12

马黑黑 · 发表于 2022-10-15 09:21

本帖最后由马黑黑于 2022-10-15 12:42 编辑

第四讲：小试牛刀 - 用grid布局帖子（上）

本讲，我们将使用前面所介绍的有限知识做一个音画帖，主要是尝试一下网格布局。我们用到两张图：

我们的计划是这样：在背景图之上划分出 3*3 的网格，第一行合并成一个单元、放lrc歌词，第二行第一单元格和第三行第一单元格合并、放装饰图片，第二行余下两个单元格保留原样，第三行余下两个单元格合并为一个单元、放播放器。

我们先看原始网格代码：

一、CSS部分

.mainBox {
   margin: 20px auto;
   display: grid;
   grid-template-rows: 1fr 4fr 1fr;
   grid-template-columns: repeat(3, 1fr);
   width: 600px;
   height: 400px;
   background: gold url('../pic/lemon.webp') no-repeat center/cover;
}

.mainBox > div { border: 1px solid olive; color: #666; }

这里，有一个新知识点：网格布局专用尺寸单位 fr ：等分之意。比如这里的纵向区域的距离即帖子的高度我们分为6个等分，第一行占1个等分（1fr）、第二行占4个等分（4fr）、第三行占1个等分（1fr）；横向方向的距离即帖子的宽度分三个等分，repeat(3, 1fr)表示1fr重复3次，即第一、二、三列均衡划分三个等分。

选择器 .mainBox > div 的设置用于演示时便于观察，将来要删掉。其中的符号，> ，用以表示 .mainbox 的直系子div，非直系的比如孙代div不受此限制。

二、HTML部分

<div class="mainBox">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
</div>

上面，CSS+HTML的代码构成了九宫格，请看效果：

1

2

3

4

5

6

7

8

9

接下来，我们合并第一行，标识为 1、2、3 的单元格代码改为：

<div class="lrc_area">lrc歌词</div>

接着合并第二行第一个单元格和第三行第一个单元格，即 4 和 7 单元格的HTML代码变成：

<div class="pic_area">装饰图</div>

再合并第三行余下的后面两个单元格，标识为 8、9 的单元格代码改为：

<div class="play_area">播放器</div>

那么，现在的HTML代码现在应该是下面的样子：

   <div class="lrc_area">lrc歌词</div>
   <div class="pic_area">装饰图</div>
   <div>5</div>
   <div>6</div>
   <div class="play_area">播放器</div>

如果第 5、6 单元格我们不需要，还可以将它们删掉，需要时随时可以补上。这样，HTML代码又可简化为：

<div class="mainBox">
   <div class="lrc_area">lrc歌词</div>
   <div  class="pic_area">装饰图</div>
   <div class="play_area>播放器</div>
</div>

当然，上面的HTML，需要加入对应的CSS代码，我们所做的设计才能渲染出来：

① lrc歌词区域 : 顶部三个单元格

.lrc_area {
   grid-row-start: 1;
   grid-row-end: 2;
   grid-column-start: 1;
   grid-column-end: 4;
}

②装饰图区域：第二列第一单元个和第三列第一单元格

.pic_area {
   grid-row-start: 2;
   grid-row-end: 4;
   grid-column-start: 1;
   grid-column-end: 2;
}

③ 播放器区域 : 底部后两个单元格

.play_area {
   grid-row-start: 3;
   grid-row-end: 4;
   grid-column-start: 1;
   grid-column-end: 4;
}

现在可以看看效果了：

lrc歌词

装饰图

5

6

播放器

到这里，我们完成了本讲的任务：将帖子按高宽一定等分划分为九宫格，并将特定区域合并用以将来摆放歌词、装饰图和播放控制器等帖子元素。本讲的工作，属于布局，我们采用了grid网格布局加以实现；下一步的工作将是实现帖子功能的细节操作。

马黑黑 · 发表于 2022-10-15 12:44

本帖最后由马黑黑于 2022-10-15 23:36 编辑

第五讲：小试牛刀 - 用grid布局帖子（下）

本讲，我们将拿出一个成品帖子。

准备工作我们之前那一讲已经做了一小部分：布局帖子的功能元素。希望已经能够领会，一知半解的话就难以领悟这一讲的内容。做一个帖子，除了布局外，还有大量的工作需要做，例如，帖子的歌曲、lrc歌词、播放器以及配套的CSS和JS代码等等。有的我们需要额外准备，而有的，我们手头可能已有现成的。

我们再将上一讲的HTML代码回顾一下：

<div class="mainBox">
      <div class="lrc_area">lrc歌词</div>
      <div class="pic_area">装饰图</div>
      <div class="play_area">播放器</div>
</div>

mainBox 是帖子的父盒子，其下有三个子 div，这些子 div 又将是容器，它们也会有自己的子元素。我们一一来看“加餐”后的 HTML 代码：

① lrc歌词区域：放一个 span 标签

      <div class="lrc_area">
            <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
      </div>

② 装饰图区域：放一个 img 标签

      <div class="pic_area">
            <img src="./pic/lemon1.webp" alt="" style="width: 200px; height: 200px; mix-blend-mode: multiply; transform: rotate(-60deg);" />
      </div>

③ 播放控制器区域：放两个 div 标签，其中一个 div 又放两个 span 标签

      <div class="play_area">
            <div id="btnwrap">
                     <span id="btnplay"></span>
                     <span id="btnpause"></span>
            </div>
            <div id="prog">00:00 | 00:00</div>
      </div>

以上代码不难理解，它们，连同父元素，合起来是酱紫：

<div id="papa">
      <div class="lrc_area"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
      <div class="pic_area"><img src="./pic/lemon1.webp" alt="" style="width: 200px; height: 200px; mix-blend-mode: multiply; transform: rotate(-60deg);" /></div>
      <div class="play_area">
            <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
            <div id="prog">00:00 | 00:00</div>
      </div>
</div>

这些HTML代码，父子元素都需要CSS来事先定制样式，它们才能得以按我们的预设渲染出效果来。但是，下面我们不一一去讲解怎么做配套，而是提供帖子成品的完整代码，CSS都做了必要的注释，很容易理解，请大家自行体会：

<style>
/* 帖子父盒子 */
.mainBox {
      margin: auto;
      width: 1024px;
      height: 640px;
      display: grid; /* 定义网格布局 */
      grid-template-rows: 1fr 4fr 1fr; /* 帖子划分三行，高度六等分：首尾两行个一个等分，中间行四个等分 */
      grid-template-columns: repeat(3, 33.3%); /* 帖子划分三列，宽度三等分 */
      background: lightblue url('https://638183.freep.cn/638183/t22/webp/lemon.webp') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      z-index: 1;
}
/* 帖子直系div元素统一样式 */
.mainBox > div {
      display: grid; /* 帖子子元素也采用 grid 布局以方便约束它们自己的子元素 */       position: relative; /* 兼容低内核浏览器约束不住子子元素 */
}
/* lrc歌词容器：合并九宫格的第一行三个单元 */
.lrc_area {
      grid-row-start: 1; /* 行的开始网格线 */
      grid-row-end: 2; /* 行的结束网格线 */
      grid-column-start: 1; /* 列的开始网格线 */
      grid-column-end: 4; /* 列的结束网格线 */
      place-items: center; /* 令子元素绝对居中 */
}
/* 修饰图容器：合并九宫格的第二行第一个单元格和第三行第一个单元格 */
.pic_area {
      grid-row-start: 2;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 2;
      place-items: start; /* 其下子元素在左上角 */
}
/* 播放器区域：合并九宫格第三行后两个单元格 */
.play_area {
      grid-row-start: 3;
      grid-row-end: 4;
      grid-column-start: 2;
      grid-column-end: 4;
      place-items: center; /* 其下子元素绝对居中 */
      cursor: pointer;
}
/* 播放器区域鼠标滑过时进度条和按钮动画：上下移动 */
.play_area:hover #btnwrap, .play_area:hover #prog {
      transform: translateY(var(--yy));
}
/* 播放器区域鼠标滑过时按钮动画：形状和透明度 */
.play_area:hover #btnwrap {
      background: linear-gradient(to top right, black, orange);
      border-radius: 50%;
      opacity: 1;
}
/* 按钮容器和进度条统一样式 */
#btnwrap, #prog {
      position: absolute;
      display: grid; /* 它们也用grid布局 */
      place-items: center; /* 其内元素绝对居中 */
      transition: .5s;
}
/* 按钮容器自己的样式 */
#btnwrap {
      --yy: -15px;
      width: 40px;
      height: 40px;
      transform: rotate(45deg);
      border-radius: 6px;
      opacity: 0;
}
/* 播放按钮样式 */
#btnplay {
      width: 20px;
      height: 20px;
      transform: translateX(3px);
      background: #eee;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/* 暂停按钮样式 */
#btnpause {
      width: 2px;
      height: 20px;
      border-style: solid;
      border-width: 0px 4px;
      border-color: transparent #eee;
      display: none;
}
/* 进度条样式 */
#prog {
      --yy: 20px;
      width: 300px;
      height: 16px;
      border-radius: 10px;
      background: linear-gradient(90deg, hsla(160,100%,50%,.45), hsla(160,0%,0%,.5) 100%, transparent 0);
      border: 1px solid gray;
      font: normal 14px / 16px sans-serif;
      color: snow;
      text-shadow: 1px 1px 0 #111;
}
/* lrc歌词元素的样式 */
#lrc {
      position: absolute;
      font: bold 2.6em sans-serif;
      color: hsla(160,100%,100%,.95);
      text-shadow: 1px 1px 1px #000;
      --motion: cover2;
      --tt: 1s;
      --state: running;
}
/* lrc歌词伪元素样式 */
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 0;
      height: 100%;
      left: 0;
      top: 0;
      color: hsla(160,80%,50%,.95);
      overflow: hidden;
      white-space: nowrap;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
/* 下面是两个内容相同的动画，用于模拟歌词逐字同步 */
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>


<div class="mainBox">
      <div class="lrc_area"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
      <div class="pic_area"><img src="https://638183.freep.cn/638183/t22/webp/lemon1.webp" alt="" style="width: 200px; height: 200px; mix-blend-mode: multiply; transform: rotate(-60deg);" /></div>
      <div class="play_area">
            <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
            <div id="prog">00:00 | 00:00</div>
      </div>
</div>




<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [[0,"苏慧伦 - Lemon Tree",13],[13.07,"一个人孤单单的下午",3.2],[16.82,"当风吹得每棵树都想跳舞",2.9],[20.11,"记得昨天你穿蓝色衣服",2.8],[23.44,"你说对爱太专注容易孤独",2.8],[26.34,"这句话什么意思我不清楚",4.6],[33.54,"我爱上了云爱上你",2.8],[36.82,"多么希望像你自由来去",2.8],[40.17,"原来星期天容易思念",2.8],[43.53,"反覆看部电影一遍一遍",2.8],[46.51,"孤独的流着眼泪回忆太美",4.5],[53.42,"爱多美丽充满香气",2.8],[56.82,"只是在心里它总是酸溜溜地",2.8],[59.77,"我不懂我自己越来越像 Lemon Tree",5.0],[66.85,"我一天一天更爱你",2.8],[70.2,"我不管不管不管爱会苦苦地",2.8],[73.21,"海蓝蓝的天气我的爱是 Lemon Tree",5.0],[93.5,"我爱上了云爱上你",2.8],[96.85,"多么希望像你自由来去",2.8],[100.29,"原来星期天容易思念",2.8],[103.58,"反覆看部电影一遍一遍",2.8],[106.57,"孤独的流着眼泪回忆太美",4.6],[114.24,"Isolation 想住进你心里",4.6],[120.68,"Isolation 期待下雨的一棵 Lemon Tree",6.0],[127.1,"你总是望着蓝蓝海面",2.8],[130.22,"说着流浪过的梦容易实现",2.8],[133.04,"这句话什么意思我不清楚",4.6],[140.17,"爱多美丽充满香气",2.8],[143.54,"只是在心里它总是酸溜溜地",2.8],[146.46,"我不懂我自己越来越像 Lemon Tree",5.0],[153.5,"我一天一天更爱你",2.8],[156.99,"我不管不管不管爱会苦苦地",2.8],[159.78,"海蓝蓝的天气我的爱是 Lemon Tree",5.0],[164.84,"哦不管不管",2.0],[167,"我一天一天更爱你",2.6],[170.17,"我不管不管不管爱会苦苦地",2.8],[173.06,"海蓝蓝的天气",2.8],[176.58,"海蓝蓝的天气",2.5],[180.08,"海蓝蓝的天气",2.5],[182.96,"我的爱是 Lemon Tree",3.2]];
aud.src = 'https://music.163.com/song/media/outer/url?id=287853.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(160,100%,50%,.45), hsla(160,0%,0%,.5) ' + aud.currentTime / aud.duration * 100 + '%, hsla(160,0%,100%,.35) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
</script>

效果 → 苏慧伦 - Lemon Tree

马黑黑 · 发表于 2022-10-15 12:46

29楼代码请不要在本帖测试，需要测试的建议另外开帖

小辣椒 · 发表于 2022-10-15 13:19

越来越难了，小辣椒以前没有学习过的

马黑黑 · 发表于 2022-10-15 13:39

小辣椒发表于 2022-10-15 13:19
越来越难了，小辣椒以前没有学习过的

这个绝大多数人都没有学习过，包括前端程序员也未必有过亲密接触（但他们知道有这个东东）

马黑黑 · 发表于 2022-10-16 08:33

本帖最后由马黑黑于 2022-10-16 16:31 编辑

第六讲：grid-area

grid，网格；area，区域。grid-area，网格区域。

grid-area 属性用于设置网格项目的尺寸以及网格项目在网格布局中的位置。它实际上是一个语法糖表示法，但又可以做全新的grid布局属性使用（下一讲会谈到）。作为语法糖，grid-area 与我们之前几讲所介绍的内容息息相关，它是以下几个属性的简写属性：

      grid-row-start       开始行网格线序号
      grid-column-start       开始列网格线序号
      grid-row-end       结束行网格线序号
      grid-column-end       结束列网格线序号

这些属性，通过制定网格横线和竖线，将相连成片的由多个单元格组成的矩形区域合并成一个新的单元格项目。例如，我们要将 4*4 的网格单元中的 5、6、9、10 四个单元格合并为 class="article" 的文章正文区域，我们就用到这些属性：

.article {
      grid-row-start: 2; /* 开始行网格线序号 2 */
      grid-column-start: 1; /* 开始列网格线序号 1 */
      grid-row-end: 4; /* 结束行网格线序号 4 */
      grid-column-end: 3; /* 结束列网格线序号 3 */
}

grid-area 属性可以简化上面的表达：

.article {
      grid-area: 2 / 1 / 4 / 3;
}

grid-area 的语法是（所使用的值均为网格线序号，各参数间用符号 / 隔开）：

      grid-area: 开始行 / 开始列 / 结束行 / 结束列;

有时候，grid-area 可以不用关心在第几行、第几列结束一个合并区域，转而将关注点放在跨越几行、几列，此种情形，grid-area 的语法使用关键字 span 来表示跨越的行数和列数：

      grid-area: 开始行 / 开始列 / span 行数 / span 列数;

例如上例，所合并的单元格跨越两行、两列，则 .article 可以写成：

.article {
      grid-area: 2 / 1 / span 2 / span 2;
}

span 在这里是跨越的意思，第三个参数是跨越多少行、第四个参数是跨越多少列。

下面是本讲示例的完整代码，三种合并网格的方法都有提供，体验效果时，只能令其中的一种处于激活状态，不能同时使用，然后观察它们运行的结果是否是一样的：

<style>

.gridBox {
      width: 400px;
      height: 400px;
      border: 1px solid gray;
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(4, 1fr);
}

.gridBox > div { border: 1px solid tan; }

/** 网格合并方法一：设定起始行列
.article {
      grid-row-start: 2;
      grid-column-start: 1;
      grid-row-end: 4;
      grid-column-end: 3;
}
**/

/**  网格合并方法二：用 grid-area 设定起始行列 **/

.article {
      grid-area: 2 / 1 / 4 / 3;
}

/** 网格合并方法三：用 grid-area 设定起始行列+跨越行数、列数
.article {
      grid-area: 2 / 1 / span 2 / span 2;
}
**/
</style>

<div class="gridBox">
      <div class="article">article区域 : 5、6、9、10合并</div>
</div>

马黑黑 · 发表于 2022-10-16 08:36

grid-area 实例演示：

article区域 : 5、6、9、10合并

马黑黑 · 发表于 2022-10-16 18:05

grid-area 应用实例：

→ 红梅赞（献礼20大）

马黑黑 · 发表于 2022-10-17 07:31

第七讲：grid-area 和 grid-template-area

上一讲我们讨论了 grid-area 作为语法糖代替 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 对网格单元格进行合并的操作，本讲则探讨 grid-area 命名单元格的功能。

grid-area 可以对网格布局中的单一单元格进行命名，我们将通过 3*3 九宫格网格的另一种创建方式来介绍这个知识点。在这个九宫格里，假如我们将第一行的3个单元格全部命名为 header，第二行的3个单元格统一命名为middle，第三行的3个单元格都命名为 footer，那么，对应的 CSS 类选择器这么写：

/* 页眉选择器 */
.head {
grid-area: header; /* 单元格名称为 header */
}

/* 正文选择器 */
.mid {
grid-area: middle; /* 单元格名称为 middle */
}

/* 页脚选择器 */
.foot {
grid-area: footer; /* 单元格名称为 footer */
}

/* 父元素选择器 */
.gridBox {
width: 400px;
height: 400px;
border: 1px solid gray;
display: grid; /* 定义使用网格布局 */
/* 下面用名字排列进行布局：按行布置 */
grid-template-areas:
'header header header'
'middle middle .'
'footer footer .';
}

这里我们需要理解父元素CSS代码中 grid-template-areas 这个新属性：它用来在网格布局中规定区域，以排列网格名的方式组合行、列，达到布局的目的。规定区域的方法是名词性排列描述，在上面的主元素代码中，第一行由三个名为 header 的单元格组成、且合并在了一起；第二行，两个 middle 加一个小角句号 . 构成，句号 . 表示不使用此单元格，结果是，第二行实际合并了前面两个单元格，第三个单元格留着没有使用；第三行情形与第二行相同，只启用左边两个单元格并合并，最右边的单元格不启用。

现在让我们将 CSS 代码归拢一下，并配套给出HTML代码。效果请在后面的回复查看。

<style>

.head {
grid-area: header;
}

.mid {
grid-area: middle;
}

.foot {
grid-area: footer;
}

.gridBox {
width: 400px;
height: 400px;
border: 1px solid gray;
display: grid;
grid-template-areas:
'header header header'
'middle middle .'
'footer footer .';
}
</style>

<div class="gridBox">
<div class="head">页眉区域</div>
<div class="mid">正文区域</div>
<div class="foot">页脚区域</div>
</div>

以上，是通过 grid-area 属性在类选择器中命名单元格名称，再通过 grid-template-areas 属性在主元素中使用直观的单元格组合方法将各行全部（第1行）或部分（第2、3行）合并起来。grid-area 针对的是单一单元格的命名，所以 area 使用的是单数形式，而grid-template-areas 针对的是多个单元格的组合，所以 area 使用了复数形式；grid-template-areas 描述的是各行的单元格排列，每一行、都用小角单引号将描述内容包裹起来、且行对应于网格区域中的行；每行中，如果存在不参与合并的单元格，用小角句号表示，但请注意，组合规则要遵从单元格相连成矩形的原则，例如，'footer footer .' 和 '. footer footer' 是合法的，但 'footer . footer' 是不正确的。另外，特别需要注意的是，grid-template-areas 尽管已行描述单元格的组合情况，却同样也能描述列，我们将马上改造那两个闲置单元格，以此展现 grid-template-areas 对列的操作。

对列的操作，实际上等同于这么一个问题：grid-area + grid-template-areas 能实现跨行合并吗？答案是：当然可以！我们上面的示例中，第二、第三行都留下最后一个单元格，这两个跨行的单元格就可以合并成起来。做法是：

首先需要用一个选择器给这两个单元格命名。我们设定一个右边栏 right_side 类选择器，在里面命名一个 side 单元格：

.right_side {
grid-area: side;
}

然后改造主元素的 grid-template-areas 排列构造：

grid-template-areas:
'header header header'
'middle middle side'
'footer footer side';

注意观察，原先的两个小角句号符号 . 换上了 side。

最后，HTML代码加入一行：

<div class="gridBox">
<img id="mpic" src="../pic/kite.gif" alt="" />
<div class="head">页眉区域</div>
<div class="mid">正文区域</div>
<div class="foot">页脚区域</div>
<div class="right_side">右边栏</div>
</div>

这就有了跨行合并。代码和效果演示在后面的回复中提供。

本讲小结：通过在CSS选择器中命名单元格，即，使用 grid-area 指定一系列相连成矩形的单元格群进行统一命名，然后在主元素中使用 grid-template-areas 按预设（且遵从一定规律）以网格行为单位排列组合这些单元格的名字，再配套写出HTML代码，达成用网格布局的目的。

马黑黑 · 发表于 2022-10-17 07:37

第七讲示例演示一：用 grid-area + grid-template-areas 合并单元格

页眉区域

正文区域

页脚区域

马黑黑 · 发表于 2022-10-17 07:40

本帖最后由马黑黑于 2022-10-17 07:56 编辑

第七讲演示示例二：grid-area + grid-template-areas 跨列布局

页眉区域

正文区域

页脚区域

右边栏

马黑黑 · 发表于 2022-10-17 07:57

38楼代码：

<style>

.head1 {
grid-area: header;
}

.mid1 {
grid-area: middle;
}

.foot1 {
grid-area: footer;
}

.right_side1 {
grid-area: side;
}

._gridBox1 {
width: 400px;
height: 400px;
border: 1px solid tan;
display: grid;
grid-template-areas:
'header header header'
'middle middle side'
'footer footer side';
position: relative;
}

._gridBox1 > div { border: 1px solid tan; }

</style>

<div class="_gridBox1">
<div class="head1">页眉区域</div>
<div class="mid1">正文区域</div>
<div class="foot1">页脚区域</div>
<div class="right_side1">右边栏</div>
</div>