效果 效果图如下 实现思路 使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起 after伪元素写投影样式 彩虹和投影都有动画 dom结构 用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。 <div c ...

效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示 ...

对于前端来说，最重要的莫过于用户体验了，这次我们聊一聊骨架屏 - Skeleton Screen 我们平常对于需要请求加载的内容，可能用的比较多的是loading动画，比如在内容区域放一个菊花图，当请求结束，并且render tree构造完 ...

本篇则主要介绍CSS的语法与CSS是如何工作的。 CSS语法 1. 基本规则 CSS规则主要由两部分组成：选择器(selector)与声明(declarations)。 选择器(selector)是开发者希望改变样式的HTML元素。 声明( ...

首先开篇之前先提个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 先不要急着往下翻，大家先思考一下。 这个问题的答案，鱼头会在文章中给出，欢 ...

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个 ...

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() ...

counter基本用法 在CSS里头，counter是个很有意思的功能，最常见得就是如果我们使用list清单，样式选择decimal十进制，当清单变多的时候数字也会跟着增加，底层貌似就是使用counter来做的，也因为counter所产生的 ...

html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figcaption 定义figure元素的标题 ...

今日内容： 1、认识盒子模型 2、盒子模型的组成部分 3、学习盒子模型的相关元素 margin padding 4、文本溢出相关的属性 一、css属性和属性值的定义 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。cs ...