关注
分享
是用趣味的动画来分享IT知识的课堂
我们将原本复杂、不易理解的编程知识，转化为一个个有趣的动画短视频，为更多人提供生动有趣的IT内容/服务
无论是大咖还是小白，都可以快速学会并深度了解每一个知识点。
IT修真院
这个作者很懒，什么都没留下…
展开
-
果冻公开课第一课：HTML三分钟快速入门
果冻公开课第一课：什么是HTML果冻公开课，开讲啦修真院倾情奉献的动画课堂：每堂几分钟，用趣味生动又逻辑清晰 的方式，为你分享编程学习中的知识点及趣味小故事本节课为大家带来第一课：HTML三分钟快速入门http://link.zhihu.com/?target=https%3A//www.zhihu.com/video/1033373036795437056动画视...原创 2019-05-31 20:59:50 · 551 阅读 · 0 评论 -
果冻公开课第二课：CSS在HTML中的作用
被称为前端三剑客的HTML、CSS、JSHTML我们上节课已经进行了简单的介绍，未看过的同学可以点击传送门：果冻公开课：什么是HTML本节课，我们就来用几分钟快速了解下，附着在HTML骨骼上，使得页面呈现出丰富内容的CSS层叠样式表。动画视频：果冻公开课：三分钟了解CSS文字解析：CSS，全称为层叠样式表。简单来说，就是给被H...原创 2019-05-31 21:00:24 · 362 阅读 · 0 评论 -
果冻公开课第三课：CSS选择器都有哪些类型
果冻公开课第三课：CSS选择器果冻公开课已认证的官方帐号4 人赞了该文章在前端界有过这么一个上古传说，传说只要掌握了CSS选择器，就能成为页面之神。动画视频https://v.qq.com/x/page/l0785udewqa.html果冻公开课第三课：CSS选择器文字解析概述CSS选择器，简单来说，就是选择Html元素的工具。如果将...原创 2019-05-31 21:00:56 · 352 阅读 · 0 评论 -
果冻公开课第四课：浏览器渲染HTML页面的过程
果冻公开课第四课：浏览器渲染页面的过程果冻公开课已认证的官方帐号9 人赞了该文章上网浏览网页对普通人来讲是非常简单的操作而对于程序员来说，这件事的背后发生了什么事情呢？动画视频：https://v.qq.com/x/page/n0811lso9ad.html浏览器是如何渲染页面的呢文字解析：输入的网址在通过DNS解析后得到服务器地址...原创 2019-05-31 21:02:59 · 363 阅读 · 0 评论 -
果冻公开课第五课：五分钟理清盒模型的前世今生
果冻公开课第五课：五分钟理清盒模型的前世今生在前端程序员眼中，页面其实可以被视为一个个盒子组成的那么，这些盒子是如何构建起整个页面的呢？动画视频：https://v.qq.com/x/page/j0839rssr9f.html如何理解盒模型？文字解析：在上一节里面我们知道了文档流和网页中的DOM都可以看作是盒子而无论是文档流还是网页状态，要把一些...原创 2019-05-14 14:42:26 · 289 阅读 · 0 评论 -
果冻公开课第六课：5分钟理解浮动布局
果冻公开课第六课：5分钟理解浮动布局果冻公开课已认证的官方帐号4 人赞同了该文章浮动，是如何实现页面布局的呢？它有哪些特质和使用方法？今天，我们就用5分钟的动画短视频来深入浅出地理解浮动~动画视频：https://v.qq.com/x/page/q0842mu4v1d.html果冻公开课：如何理解浮动布局？文字解析：网页儿也能这么图文...原创 2019-05-14 14:45:37 · 311 阅读 · 0 评论 -
果冻公开课第七课：快速理解BFC
为什么会有BFC？BFC是什么？如何触发BFC？BFC可以解决什么问题？这些问题还有其他解决方案吗动画视频：https://v.vzuu.com/video/1090000760237768704?如何快速理解BFC文字解析：前端程序员在布局时经常会遇到各种烦人的问题比如明明说好了每个元素都是一个打包盒那在打包盒外的元素，应...原创 2019-05-21 10:16:10 · 346 阅读 · 0 评论 -
果冻公开课第八课：CSS常见的定位方法
为什么会有 position 定位基于定位的常见需求不同需求的解决方案动画视频如何定位文字解析：我们知道每一个元素都是盒子期望布局像搭积木一样从上往下挨个堆盒子就能完成各式各样的页面然而多实现几个页面就会发现文档流中任意一个元素位置调整都会影响到后面的元素简直是牵一发动全身每每扪心自问敢动吗都只能回答不敢动不敢动...原创 2019-05-22 11:15:54 · 305 阅读 · 0 评论 -
果冻公开课第九课：打破HTML传统布局方式的Flex布局（上）
传统的布局方式都基于盒模型像搭积木一样做出布局这些布局方式的缺点都很明显于是"flex布局"就诞生了彻底改变了布局的方式动画视频：文字解析：传统的布局都基于盒模型需要灵活运用display+postion+float属性像搭积木一样的方式做出布局为了完成一些特殊的需求需要掌握各种奇技淫巧像垂直居中 弹性布局等对于新手来说都是...原创 2019-10-28 11:20:02 · 271 阅读 · 0 评论 -
果冻公开课第十课：打破HTML传统布局方式的Flex布局（下）
写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们发现这样的方式虽然很好理解但不够灵活于是...动画视频：文字解析：其实传统布局方式和人类书写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们发现这样的方式虽然很好理解但不够灵活所以有没有办法让布局既可以从下到上又可以从右到左呢答案是有人引入了轴的概念...原创 2019-10-28 11:51:25 · 267 阅读 · 0 评论 -
果冻公开课第十一课：CSS强大的布局系统 Grid
CSS的布局方式，一直以来都不够完善，无论是table，还是float，还是position或者是inline-block，都更像是在残缺不全的设计基础上的hack方式。 flex已经在某种程度上对布局有所改变，但是只解决了一维布局的问题。 那么有没有更好的方式，来跳出原本CSS布局的限制，用更简单和容易理解的方式完成复杂的布局呢？文字解析：...原创 2019-10-28 14:07:16 · 212 阅读 · 0 评论 -
果冻公开课第十二课：CSS里最基本的长度单位
视频版： CSS里最基本的长度单位 CSS里最基本的长度单位是像素PX,可为什么不是毫米厘米之类的单位呢?让我们先来回顾一下,米是怎么占领地球的。在米出现之前,标准长度单位是五花八门,比如说我国曾经把张开的大拇指尖和中指尖之间的间距作为一尺，把人伸开双臂的长度作为一仞。到...原创 2019-11-05 12:29:22 · 283 阅读 · 0 评论