初心Yearth

本篇是张鑫旭老师的 CSS 基础测试10 的阅后笔记。(首先感谢 XboxYan 同学终于坐下了，给了别的同学一个展示自我的机会，其中 liyongleihf2006 同学实现小图标定位的手段非常巧妙) 两栏自适应布局在之前提过很多次了，这里就不再赘述，主要从题目需求入手分析一…

本篇是张鑫旭老师的 CSS 基础测试10 的阅后笔记。(MVP 依然是 XboxYan 同学，用张老师的话说，这位同学的回答，一开始就是大结局了) 先来看看题目。 不考虑兼容性的话（chrome 12+，Firefox 49+，Opera 15+，Safari 6+，不支持 I…

本篇是张鑫旭老师的 CSS 基础测试9 的阅后笔记。(XboxYan 依然是秀的我脑壳痛) 先来看看题目。 这题看上去和 CSS 小测 - 01 非常相似。 下面分别来看看。 先看看最简单的 flex，虽然不兼容 IE8，不过 flex 布局在单行自适应上非常具有优势。 需要注…

本篇是张鑫旭老师的 CSS 基础测试8 的阅后笔记。 先来看看题目。 请实现一个按钮相关的单行布局效果。 左右安全距离为 1rem。 这道题没有什么难度，我们就横向分析一下。 首先简单把效果实现一下。题目要求的单行布局，自适应，通常有以下几种方案： 在不考虑兼容性（IE9+）的…

很明显提交的请求就会多次被发送到后端，占用资源，这显然是我们不想见到的。 而防抖，节流就是为了应付这样的场景出现的，只是各自效果有一些细微的差别罢了。 可以看到，当我们点击按钮的时候，并不会立即触发效果，而是在一定的延迟之后才触发效果，并且如果不停的点击按钮，只有在最后一次点击…

本篇是张鑫旭老师的 CSS 基础测试7 的阅后笔记。（Seasonley 同学的表格布局兼容性较强，ziying 同学的 margig:auto 很有深度） 先来看看题目。 请实现以下效果：如果 .content 高度较小，则 .footer 定位在窗口底部；如果 .conte…

本篇是张鑫旭老师的 CSS基础测试6 的阅后笔记。（Wing Meng、XboxYan、Seasonley 同学的回答都很优雅） 先来看看题目。 下图是 chrome 浏览器下 <audio> 播放器效果，请尝试使用纯 CSS 完成样式与布局效果（切换状态无需实现）。 说实话，…

本篇是张鑫旭老师的 CSS基础测试5 的阅后笔记。（感谢 33 同学的解答，使用 radio 的思路非常清奇。） 先来看看题目。 想要实现这样的网格效果，不考虑兼容性的话，其实最好的办法是 grid，即栅格系统，索性这里就简单介绍一下。 所谓栅格系统，就是把一个块分成一定的份数…

本篇是张鑫旭老师的 CSS基础测试4 的阅后笔记。（感谢 XboxYan 的解答，堪称模板。另外还有几位同学的解答也各有亮点：yaeSakuras，maomao1996） 先来看看题目。 还是老规矩，先实现最基础的，再谈优化。 那么先来看看这个气泡小尾巴的实现。 在我上期的 c…