鱼C论坛

 找回密码
 立即注册
查看: 6497|回复: 15

[学习笔记] 056 - 苟日新,日日新,又日新

[复制链接]
发表于 2020-11-3 08:51:23 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-11-16 08:21 编辑






哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

56.png

猛戳

                               
登录/注册后可看大图
超清





本节重点是多列布局,可以实现之前用 float 和 position 能实现的一切布局。

并且容易简单很多倍,小甲鱼老师解释了其中玄机:

游客,如果您要查看本帖隐藏内容请回复

容易归容易,我们还是要实操下。

先来基础的 html:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多列布局</title>
</head>

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident quas tempore esse quasi consequatur iusto fuga
    accusamus, explicabo adipisci vitae exercitationem sed est illo obcaecati, porro atque qui repellendus incidunt!
  </div>
</body>

</html>
看到 div 元素中有一断很长的文本。

现在只需通过 column-count 指定列数即可实现多列,添加 css:
div
{
column-count:3;
}
效果:

2020-11-03_19-16-55.jpg


1 行代码,轻松实现 3 列有木有?!

其他几个都是类似的“快捷”实现,一步到位,是不是很爽?!

column-rule-xxx 系列类似我们的 border 属性,只不过用来修改列之前的样式效果。

例如我们修改上面列之间的样式:
div {
      column-count: 3;
      /* 增加列样式 */
      column-rule: 10px solid red;
    }
效果:

2020-11-03_19-21-22.jpg


这里我们通过 column-rule 将 column-rule-color、column-rule-style、column-rule-width 合并到一起写。

columns 是 column-count 和 column-width 的缩写一个道理,不做解释啦。

剩下再来说下 column-fill,它用来指定如何填充列,有两个值:balance 和 auto

auto,列高度自适应内容。

balance,所有列的高度以其中最高的一列统一。

重新编写代码:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>多列布局</title>
  <style type="text/css">
    .balance {
      column-count: 3;
      column-fill: balance;
      background-color: pink;
      height: 200px;
    }

    .auto {
      column-count: 3;
      column-fill: auto;
      background-color: lightblue;
      height: 200px;
    }

    h2 {
      column-span: all;
    }
  </style>
</head>

<body>
  <div class="balance">
    <h2>下面是 column-fill: balance 的演示</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi labore optio cupiditate, voluptatibus beatae amet
      iure culpa voluptatem animi quos quo hic, consequuntur eaque aspernatur reprehenderit autem dolor rem. Provident
      iure sed animi pariatur quasi nemo, rerum mollitia numquam debitis, necessitatibus ducimus distinctio incidunt
      corrupti excepturi inventore blanditiis, nisi culpa!</p>
  </div>

  <div class="auto">
    <h2>下面是 column-fill: auto 的演示</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, facere natus nisi iure magnam deleniti pariatur
      ad officia fugit, ut odit quas dolorem. Expedita, soluta. Voluptatibus optio delectus quo saepe consequuntur
      cumque vitae animi provident ex quod natus quis aspernatur consequatur mollitia nulla temporibus est sequi id ea,
      quia autem.</p>
  </div>
</body>

</html>
效果:

2020-11-03_20-00-59.jpg


大家按需使用即可。




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 淘专辑传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-3 08:55:49 | 显示全部楼层
顶!!!!!!!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-10 22:47:50 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-1-29 12:25:18 | 显示全部楼层
回复看看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-30 07:18:50 | 显示全部楼层
回复快快快
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-4-13 10:21:27 | 显示全部楼层
wa
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-13 16:55:54 | 显示全部楼层
玄机来咯
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-13 17:24:01 | 显示全部楼层
速查宝典漏了column-fill这个属性哟~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-13 21:53:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-8-4 10:43:31 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-8-19 20:11:43 | 显示全部楼层
想看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-9-13 16:33:04 | 显示全部楼层
column
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-8-8 20:17:50 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-11-5 10:33:49 | 显示全部楼层
爱鱼C
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-12-12 08:15:40 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2024-4-18 10:28:10 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-21 19:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表