在发生重大哀悼事件时候，需要紧急将网站变灰以示哀悼，在此虫虫给大家总结了几种方法，通过简单修改一下站点样式即可实现。

修改源码

另外主要方便快捷的方法是使用CSS样式的grayscale()方法。

块级元素

特点：有自己的宽高、独占一行。

行内元素

特点： 无宽高属性、同用一行。

元素显示模式就是元素（标签）以什么方式进行显示，比如div标签自己占一行，一行可以放多个span标签。

HTML 元素分为块元素、行内元素、行内块元素，它们具体的用法和区别如下：

我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。

作者：YJ

转发链接：https://mp.weixin.qq.com/s/_JFheujWvvB6ffsVQgLMOA

前言

周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。

相信小伙伴们逛B站的时候都见到过B站的字幕可以不遮挡人物的效果。

那么B站到底是如何实现这么神奇的效果的呢？经过一番摸索最终发现了其中的奥秘

主要是通过一行CSS属性mask-image:设置了一张图片为做元素的蒙版，使用人形图片遮挡住了弹幕

实践出真知：上demo

我们在写一个网站或者一个网页界面的时候，需要学习很多东西，对小白来说很困难！比如我要做一个简单的网页交互：

要懂后端，比如Python里面的Django或者Flask，或者是Java里面的SpringBoot

要懂前端，现在都叫大前端了(因为很复杂)，比如前端的框架Vue/React, 然后页面的美化框架Bootstrap ，还有html ,csss 和Javascript 三驾马车.

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。

设置

在本文中，我将继续使用我在第一篇 CSS Grid 布局教程文章