大家好，我是 Echa。
Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！
2024年12月17日
大家好，我是 Echa。
Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！
2024年12月17日
这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。
但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。
所有示例的完整代码，都可以从 GitHub 的代码仓库[1]下载。
微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。
2024年12月17日
大家好，我是魏大帅，今天教大家一个装[啤酒]的方法。你说你不懂前端，没关系我教你。打开你的电脑，新建一个txt文档，把我文章最后面的完整代码复制到文档里面，然后把txt文档的后缀名改成.html 就ok啦，你可以直接把这个html文件发给你朋友，说这是哥们我做的，[给力]不！
哈哈，前面这段纯属开玩笑的，主要还是给各位前端开发，或者想从事前端开发的帅哥美女们，一个可以借鉴的案例。有大神觉得自己有更厉害的案例，也可以告诉我，我也学习学习，咱们互相学习互相进步。话不多说，上干货！
2024年12月17日
在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。
之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。
OK，下面进入本文正题，
contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。
2024年12月17日
想让页面上的元素完美居中，但写CSS时总是左右为难？别再纠结了！这篇文章教你5种实用方法，无论是小白还是资深程序员，学会了直接提升开发效率，写出干净整洁的代码！
Flexbox是现代CSS布局的神器！只需三行代码，轻松让你的元素居中。
2024年12月17日
CSS 属性被分为不同的类型,如字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。对于初学者来说,需要熟悉并掌握这些属性。前面我们已经了解了30个CSS选择器，但是新的CSS3属性呢？为此小编也特意整理了10个你需要熟悉的CSS3属性，来我们一起了解下吧！
2024年12月17日
Html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转动的风扇</title>
<link rel="stylesheet" href="../css/20241114.css">
</head>
<body>
<div class="main">
<img src="image/20241114/fan-blade.png" alt="" srcset="">
<button onclick="fanOn()">ON </button>
<button onclick="fanOff()">OFF</button>
<button onclick="fanBtn1()">1</button>
<button onclick="fanBtn2()">2</button>
<button onclick="fanBtn3()">3</button>
</div>
<script src="../js/20241114.js"></script>
</body>
</html>2024年12月17日
首先我们先将模块1关闭，模块2使用CSS网格
display: none; .container--2 {
/* STARTER */
font-family: sans-serif;
background-color: black;
font-size: 40px;
margin: 100px;
width: 1000px;
height: 600px;
/* CSS GRID */
display: grid;
}