不二如是 发表于 2020-8-11 08:43:01

050 - 看山不是山（下）

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

上一集：049 - 看山不是山（上）



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



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

**** Hidden Message *****
抛开面试挖坑的东西，行内块存在意义的就是为了方便布局！

最常用的就是快速来创建菜单栏：

<!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>
效果：



接下来我们说 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>
效果：



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

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

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


传送门





课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：051 - 总为浮云能蔽日（上）



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ）

weiter 发表于 2020-8-11 18:47:56

沙发{:10_256:}

我要好好学习= 发表于 2020-8-28 10:25:38

jjjhhh

natapon 发表于 2021-1-19 16:02:54

{:10_256:}{:10_256:}{:10_256:}加油哦 剩下的更起来~

13998929493 发表于 2021-4-5 17:48:53

赞

HM_hywj 发表于 2021-7-9 13:37:30

感谢分享

O2H2O 发表于 2021-7-12 12:07:54

有点晕

心驰神往 发表于 2021-8-4 08:48:41

what

刘彩玲 发表于 2021-8-16 18:31:30

想看

hanyuncanying 发表于 2021-8-25 21:19:05

多谢分享

douTREE 发表于 2021-9-12 23:35:10

行内元素不可调整高宽

Dragon.水魅 发表于 2021-11-4 09:53:52

沙发

hornwong 发表于 2021-11-4 11:06:01

{:5_95:}

laure 发表于 2022-1-22 15:56:56

1

xuexiaoyan 发表于 2022-8-8 18:09:27

11

c2514710281 发表于 2022-11-1 11:47:17

我爱鱼C

小坛砸 发表于 2024-4-17 16:54:37

{:10_273:}
页: [1]
查看完整版本: 050 - 看山不是山（下）