苹果春季发布会也可以说是苹果前端发布会，如何写出如此炫酷的产品页面？作者对中间经常用到的方法进行了概括，同时分享了一些相关的文章。

最近关注了油管上的 CSS Animation Effects Tutorial 系列，里面介绍了非常多有意思的 CSS 动效。其中第一个就是很酷炫的霓虹灯效果，这里就实现思路做一个简单的记录和分享。

网格是一个工具，你可以使用它来帮助你的网站创建布局。如果你需要考虑不同元素的位置、层次或大小，它就特别有用。 网格是复杂的，有很多东西要学习。但好消息是，你不需要一下子知道所有的事情。 在本教程中，我们将使用 CSS Grid 构建 5 种不同的布局(下面将解释为 5 个独立的…

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。 定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。 通过top,bottom,…

1. 内联样式（行间样式，行内样式，嵌入式样式、内嵌样式） 内联样式显著的优点是十分的便捷、高效。但是不建议使用,内联样式权重过高,不利于后期维护。可以通常内联 CSS 作为测试使用，可以查找代码中 bug。 2. 外部样式 本质区别：link 属于 html 方式，@impo…

最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。 一栏布局（通栏）头部和底部宽度一…

进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。 作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。 这种方法的核心就是以当前盒子为容器，以 ::before…

<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。 没想到，这些选择器居然跟 input ...…

学习网页的概念和分类，了解静态网页和动态网页的不同；了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念，制作简单的HTML页面的开发。 可以在internet上通过网页浏览信息，如新闻，图片等，还可发布信息，如招聘信息等，网页是在某个地方某一台计算机上的一个文…