css-doodle绘制国际象棋棋盘

马黑黑

代码：

1. <css-doodle grid="6">
   
2.         :doodle {
   
3.                 @grid: 8 / 480px;
   
4.                 border: 2px solid black;
   
5.         }
   
6.         @odd { background: white; }
   
7.         @even { background: black; }
   
8. </css-doodle>

复制代码

通过对 @odd 和 @even 选择器进行奇数和偶数单元格设置背景色，就这么简单。



来这里测试效果：pencil code (freeee.ml)

红影

真的好简单，设置奇偶数，黑白格子就出来了

马黑黑

红影 发表于 2023-4-17 22:10
真的好简单，设置奇偶数，黑白格子就出来了

css-doodle的设计很精妙

起个网名好难

有意思， 学习一下。 :doodle { @size: 40vw; border: 2px solid black; } @odd { background: hsla(@r(0,180), 70%, 70%, @r(.1,1)); } @even {background: hsla(@r(180,360), 30%, 30%, @r(.1,1)); }

马黑黑

起个网名好难 发表于 2023-4-17 23:06
有意思， 学习一下。
   
        :doodle {

document.write() 是个好办法

起个网名好难

马黑黑 发表于 2023-4-17 23:44
document.write() 是个好办法

@grid:8 覆盖了 grid="6"

@grid

This is another way to define the grid value and it has higher priority.

红影

马黑黑 发表于 2023-4-17 22:22
css-doodle的设计很精妙

能熟练使用这个真的是好方便呢

马黑黑

红影 发表于 2023-4-18 14:00
能熟练使用这个真的是好方便呢

现在找到了两种方法，在不动dz文档或设置的情况下，在论坛使用 css-doodle：

一种是 @起个网名好难 的示例，使用 document.write() 方法；
另一种是使用 insertBefore 或 appendChild 方法，可以将 css-doodle 组件追加到 head 或 body 中。

马黑黑

起个网名好难 发表于 2023-4-18 09:17
@grid:8 覆盖了 grid="6"

@grid

对，@grid 权限优于 grid=“x"

红影

马黑黑 发表于 2023-4-18 17:19
现在找到了两种方法，在不动dz文档或设置的情况下，在论坛使用 css-doodle：

一种是 @起个网名好难 的 ...

这个对我来说有点难，看得一脸懵

马黑黑

红影 发表于 2023-4-18 22:21
这个对我来说有点难，看得一脸懵

会用就好

红影

马黑黑 发表于 2023-4-18 23:03
会用就好

暂时还不会

马黑黑

红影 发表于 2023-4-19 10:38
暂时还不会

总会会的

红影

马黑黑 发表于 2023-4-19 13:24
总会会的

看到你的帖子的具体实例，明白点了

马黑黑

红影 发表于 2023-4-20 19:19
看到你的帖子的具体实例，明白点了

慢慢都会明白

红影

马黑黑 发表于 2023-4-20 19:52
慢慢都会明白

嗯嗯，这更要有个过程，现在太生疏了

马黑黑

红影 发表于 2023-4-20 21:34
嗯嗯，这更要有个过程，现在太生疏了

都是有生的才有熟的

红影

马黑黑 发表于 2023-4-20 21:35
都是有生的才有熟的

我争取早点把它们炒熟

马黑黑

红影 发表于 2023-4-20 22:53
我争取早点把它们炒熟

加大火力

红影

马黑黑 发表于 2023-4-20 23:12
加大火力

那就炒焦了