css-doodle入门（一）
css-doodle入门（一）八行代码写出 8*8 的表格：
<css-doodle>
:doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
}
background: tan;
:after { content: @index; }
</css-doodle>
运行上述代码，会得到 8*8 的表格，表格的每一个单元格都填充了序号。你可以到下面的页面尝试一下，将上述代码粘贴到代码区，然后点击运行代码按钮查看效果：
http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html
是不是太简单了？先别激动，还是让我们我们来理解上述代码，理解了，就算正式入门十分之一了：
一、css-doodle 标签
前面的代码，头尾两行是 css-doodle 标签，它的位置是在 HTML 代码中，即网页的 <body> 和 </body> 之内任何需要的地方：
<html>
<!--其他代码 -->
<body>
<!--其他代码 -->
<css-doodle>
<!--css-doodle 代码写在这里 -->
</css-doodle>
<!--其他代码 -->
</body>
</html>
<css-doodle>...</css-doodle> 标签表明使用 css-doodle Web组件。这个组件由国人袁川先生开发与维护，组件使用 CSS 的 grid 布局属性生成一个主元素，主元素下可以拥有众多的子元素，这些元素在主元素的约束下可以构成简单的图表或复杂多样的图形图案、动画图表。实现精彩的图形图案效果，需要 css-doodle 代码去完成。
二、css-doodle 主元素代码
:doodle {} 选择器，用来制定主元素：
:doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
}
:doodle{} 里的代码，@grid 属性规范了两个内容，用反斜杠 / 隔开。第一个内容是 8x8，表示在主元素里建立 8*8 的网格（64个单元格），360px 300px 表示主元素的宽高尺寸。grid-gap 属性表示网格的行列间隙。主元素还可以设置很多东西，比如，边框、背景色、阴影等等，和 grid-gap属性一样，都是标准的CSS写法，写边框，border: 1px solid green;，写背景色，background: gray;，写阴影，box-shadow: 2px 2px 4px #000; 等等。
:doodle{} 之外的代码，则是针对子元素——
三、css-doodle 子元素代码
:doodle {
@grid: 8x8 / 360px 300px;
grid-gap: 1px;
}
background: tan;
:after { content: @index; }
background: tan; 这句，设定子元素即各个单元格的背景色。:after{} 则是封装好的单元格的伪元素（注意在 css-doodle 里伪元素的前缀只需要一个小角冒号），它遵循标准的CSS伪元素语法使用 content 属性带出伪元素的内容，代码中的内容用单元格的索引号 @index 填充，@index 索引号从1开始。
【附】
一、如果想在本地运行 css-doodle，请在网页代码中引用 css-doodle 组件，引用方法：
<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"></script>
上行代码可以写在<head> 和 </head> 之间（建议），也可以写在 <body> 和 </body> 之间（一般紧挨着 </body>）。
二、如果想在脱网的状况下使用 css-doodle，请将 css-doodle.min.js 保存为本地文档且引用它，例如放在一个 js 子目录里：
<script src="./js/css-doodle.min.js"></script>
等着你小徒弟们来演示{:4_334:} 樵歌 发表于 2023-4-10 18:15
等着你小徒弟们来演示
这个论坛不支持，需要跑到我那里去试 马黑黑 发表于 2023-4-10 18:20
这个论坛不支持，需要跑到我那里去试
啥啥，你哪里嘛{:4_203:} 樵歌 发表于 2023-4-10 19:11
啥啥，你哪里嘛
一楼有 原来框里的数字是:after { content: @index; }弄出来的。 这个标签的大括号框住的就是主元素，之外的就是子元素，它能做出图标和图形图案，能实现精彩的图形图案效果。看起来很有趣，现在只看到一个表格，等着黑黑带来好玩的{:4_173:} 红影 发表于 2023-4-10 20:04
这个标签的大括号框住的就是主元素，之外的就是子元素，它能做出图标和图形图案，能实现精彩的图形图案效果 ...
先理解好表格 红影 发表于 2023-4-10 19:59
原来框里的数字是:after { content: @index; }弄出来的。
对 神。。。得很。。 看到表格了，黑黑老师辛苦了，俺是如不了门的{:4_173:} 千羽 发表于 2023-4-10 21:22
看到表格了，黑黑老师辛苦了，俺是如不了门的
若有兴趣，可以认真理解一下 马黑黑 发表于 2023-4-10 21:23
若有兴趣，可以认真理解一下
估计我是理解不了的{:4_173:} 千羽 发表于 2023-4-10 21:24
估计我是理解不了的
那就看看就好，另外欣赏一下俺的优美无比的描述 马黑黑 发表于 2023-4-10 21:25
那就看看就好，另外欣赏一下俺的优美无比的描述
哈哈，好的{:4_187:} 千羽 发表于 2023-4-10 21:26
哈哈，好的
谢花 马黑黑 发表于 2023-4-10 20:20
先理解好表格
这个标签感觉好陌生啊{:4_173:} 马黑黑 发表于 2023-4-10 20:20
先理解好表格
我grid 布局都还没理解好呢{:4_173:} 红影 发表于 2023-4-10 22:26
我grid 布局都还没理解好呢
之前很认真地介绍过 红影 发表于 2023-4-10 22:24
这个标签感觉好陌生啊
这是css-doodle自定义的标签