伪类和伪元素的根本区别在于：它们是否创造了文档树外的新元素。伪类：存在于dom树中元素的某种特定状态。focus的 ...

HTML部分 1.你是怎么理解HTML语义化 Step 1：先举例说明 HTML语义化简单来说就是用正确的标签来做正确的事。 比 ...

最近在教我老婆学习前端，她说想要学习前端，自己在家赚点外快，自己赚点家用。我也拗不过她，而且其实我也挺佩服的。所以就教她了。最近我想考一考她对css中伪类的了解，所以就问了她了解css多少个伪类，伪类是什么？她说css 伪类是用于向某些选择 ...

最近做的项目里涉及到一个视频列表，点击播放视频，有点类似短视频APP个人主页的效果，直接使用了h5自带的video标签，没想到坑一个接一个。 首先展示下效果图： 踩坑记录： 踩坑一：视频列表中直接使用多个video标签无法达到产品的设计效果 ...

伪元素和伪类 说到这个，我们先回顾一下，伪类选择器和伪元素选择器，老版的浏览器没有严格区分下面 2 种写法。 a:after{} a::after{} 在新的标准中，单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，我 ...

轮播图是项目中非常常见的一个效果，平时我们可能都会用别人写好的插件，但是必要的时候也需要自己手写，尤其是需要掌握下其中的实现原理。 一、需求 1.实现渐隐渐显自动轮播效果 2.鼠标移入：显示左右切换箭头，停止自动轮播 3.鼠标离开：隐藏左右 ...

现代浏览器都支持flex布局，而且flex布局用起来非常简单，好用。所以今天我们就详细的记录下平时常用的flex语法。 一、什么是flex布局 flex其实是flexible box的缩写，即为“弹性盒子“，任何一个容器都可以指定为flex ...

这是我第16篇简书。 整体思路： 性能优化是什么? 从用户角度来看，什么才是好的页面？一个是页面加载的很快，另一个是页面使用起来很流畅。 那么对应到前端开发的角度，性能优化可以对应分为两个方向：页面加载时间跟页面运行效率。 从浏览器打开到页 ...

1.:first-of-type p:first-of-type 选择属于其父元素的首个p元素的每个p元素。 2.:last-of-type p:last-of-type 选择属于其父元素的最后p元素的每个p元素。 3.:nth-of-ty ...

HTML5的结构化标签，对搜索引擎更友好 li 标签对不利于搜索引擎的收录，尽量少用 banner图片一般拥有版权，不需要搜索引擎收录，因此可以使用ul + li 可用于浅色副标题 display:inline-b ...