|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-8-24 11:24 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
使用 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>
效果：
接下来我们说 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 个视频：
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-8-11 08:43:01
置顶卡
千斤顶
显身卡
发表于 2020-8-11 18:47:56
发表于 2021-8-25 21:19:05
