鱼C论坛

 找回密码
 立即注册
查看: 7652|回复: 17

[学习笔记] 050 - 看山不是山(下)

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

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

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

x
本帖最后由 不二如是 于 2020-8-24 11:24 编辑






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





在线视频:传送门





课程思维导图

50.jpeg

猛戳

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





使用 inline-block 来布局,有一些事情需要牢记:

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

抛开面试挖坑的东西,行内块存在意义的就是为了方便布局!

最常用的就是快速来创建菜单栏:
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>简约而不简单的菜单栏</title>
  <style>
    #nav a {
      display: inline-block;
      width: 200px;
      height: 50px;
      color: white;
      background: #429296;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div id="nav">
    <a href="#" target="_blank">首页</a>
    <a href="#" target="_blank">论坛</a>
    <a href="#" target="_blank">宝典</a>
    <a href="#" target="_blank">起飞</a>
  </div>
</body>

</html>
效果:

2020-08-13_18-01-50.jpg


接下来我们说 display:none 和 visibility:hidden 。

它们都可以让元素不可见,但是是有区别的:

  • none 元素消失,在页面中不占据空间
  • hidden 元素消失,在页面中仍占据空间

光说不行,上代码:
<div>
    <strong>给元素设置display:none样式</strong>
    <p>A元素</p>
    <p style='display:none;'>B元素</p>
    <p>C元素</p>
  </div>

  <div>
    <strong>给元素设置visibility:hidden样式</strong>
    <p>A元素</p>
    <p style='visibility:hidden;'>B元素</p>
    <p>C元素</p>
  </div>
效果:

2020-08-13_18-06-58.jpg


效果一目了,都是消失的 B 元素,但是页面效果是不一样滴。

display 属性还有很多值,重点就是 flex 和 grid,前者启动弹性布局,后者启动栅格布局。

以后肯定会讲到,有兴趣可以先看这 3 个视频:








课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


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

本帖被以下淘专辑推荐:

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

使用道具 举报

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

使用道具 举报

发表于 2020-8-28 10:25:38 | 显示全部楼层
jjjhhh
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-19 16:02:54 | 显示全部楼层
加油哦 剩下的更起来~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-4-5 17:48:53 | 显示全部楼层

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

使用道具 举报

发表于 2021-7-9 13:37:30 | 显示全部楼层
感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-12 12:07:54 | 显示全部楼层
有点晕
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 2021-8-25 21:19:05 | 显示全部楼层
多谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-9-12 23:35:10 | 显示全部楼层
行内元素不可调整高宽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-11-4 09:53:52 | 显示全部楼层
沙发
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 2024-11-25 15:32:24 | 显示全部楼层
学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-12-22 14:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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