从打字游戏学网站开发：CSS篇小白0基础入门【二】

用户3853

2025年7月30日修改

上回书咱们讲了html，在结尾还留了作业，不知道小伙伴完成的怎么样了，没有敲代码的去面壁24小时，学习编程最重要的不是死记硬背，而是多敲多写，熟练即可。​

今天咱们继续通过游戏学css：

游戏玩法：

这个游戏玩法非常简单，就是上面随机出现一些单词，你需要快速的在键盘输入，输入成功单词消失，累计三个单词落地，游戏失败！​

游戏源码：

CSS：

css就是样式，那什么是样式呢？

还记得我们之前说html是一个没穿衣服没化妆的纯天然美女，那么样式就是穿上漂亮衣服，化好妆的睡美人。​

上图是世界上第一个网页，它就是没有样式，看惯了现代网页，我们都不忍直视这个页面，我们可以看到，它在观感上有三大缺点。​

一、排版布局单一，都是从上到下布局。

二、文字段落之间紧凑，没有边界感。

三、文字颜色大小单一，只有三种颜色，两种大小。

好，我为什么要总结这个三点呢，就是因为这是我学习样式的独门不传之秘。​

因为你看着样式花里胡哨千奇百怪，但是他们都逃不出上面的范围。​

样式三大块：

样式一共就学习这三个东西，我用专业的术语就是：

一、标签的排列方式：比如你希望内容是从左往右排列还是从上往下排列。​

二、标签的自身位置：比如你希望其他的标签元素和指定标签的距离长短。​

三、标签自身样式：比如颜色、大小、粗细、背景色等等。

👆

考虑到本文的受众是学点代码快速用AI开发网站，所以这里我只讲最核心学的东西，同种页面效果，有三四个实现方式，我只讲最快最常用的方式，所以内容不全，需要完整学习就业的同学下来自己还要自学。​

一、标签的排列方式

因为我们常用的标签就是【div】，它的特性就是独占一行，因此多个【div】的时候，它们就会从上面叠到下面，​

从打字游戏学网站开发：CSS篇小白0基础入门【二】​