zbage/demo

前言

从库的名字就能看出来，这库是用来存放我平时学习时候的小练习用的，这些小demo我会在下面列出来

NEXT学位Demo

这是参加腾讯课堂NEXT学位10天训练营时候建立的项目，最后有一个作业的大项目，还有一些零零碎碎的小demo，可以说这是一个对新手来说挺不错的项目，10天时间对前端大致有一个了解，还做了一个小项目。新手入门推荐

有兴趣的可以去看一下我的笔记：传送门

下面是学习时零零碎碎实验做的小Demo

大作业-滚动简历

很有意思的一个项目，做一个滚动简历。本来想用原生再实现一次的，结果发现jQ动画用原生没法儿弄只好暂时放下。

• Demo
• 代码地址

零碎小Demo

• transition动画
• animation动画direction属性对比
• 一个css动画实现的时钟
• 使用steps()实现打字动画效果
• 简单的loading
• DOM操作
• DocumentFragment加速实验，对比有无Fragment时添加元素效率的区别
• 两个css小效果，掘金学来的

圣杯和双飞翼布局

做IFE的时候遇到的，挺经典的两种布局就整理了一波。两种布局达到效果上基本相同，都是两边两栏宽度固定，中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能（因为这两种布局都比较老，我认为在现代浏览器中这点儿性能优化效果并不是很大），并且兼容性良好。

具体分析看这里：传送门

Demo和代码

• 圣杯布局Demo、代码

• 双飞翼布局Demo、代码

PSD到HTML切图练习

本来看到这个课是想自己直接切的，因为之前也切过几个。后来想想还是跟着视频的思路走吧，果然还是学到了不少，自己之前毕竟是摸索的野路子，很不正规。不过跟着视频来切的真心累，现在想来还是应该先看一遍然后自己照着思路实现可能会更好。总结一下学到的东西吧：

• reset重置样式单独放，不要用通配符

• 要考虑一个页面的公共样式，单独写出来方便以后维护

• 清除浮动和固定块居中这样常用的单独写一个类出来，用的时候直接添加会更方便，减少代码冗余

• 先搭好页面框架再填样式

• Demo

• 代码地址

CSS实现Tab页切换

切图的时候碰到的，想着切图就尽量先不谢js试试能不能实现效果，搜了一些办法之后选择了利用label和radio的绑定关系和radio选中时的:checked来实现效果

2018进度条 地址

突发奇想想要做的一个东西，有空看看也能给自己来点儿紧迫感，实现起来还是很容易的获取当前时间和今年开始的时间算出百分比设置width就好了。

Flexbox演示站 地址

可以通过动态的点击flexbox属性可以实时看到各个属性的效果，有助于理解各个属性。

友好的提示，鼠标放在选项上面悬停显示各个属性效果。