马黑黑 发表于 2023-4-17 21:31

css-doodle绘制国际象棋棋盘

代码：<css-doodle grid="6">
        :doodle {
                @grid: 8 / 480px;
                border: 2px solid black;
        }
        @odd { background: white; }
        @even { background: black; }
</css-doodle>通过对 @odd 和 @even 选择器进行奇数和偶数单元格设置背景色，就这么简单。



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

红影 发表于 2023-4-17 22:10

真的好简单，设置奇偶数，黑白格子就出来了{:4_204:}

马黑黑 发表于 2023-4-17 22:22

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

css-doodle的设计很精妙

起个网名好难 发表于 2023-4-17 23:06


有意思， 学习一下。
   <css-doodle grid="10">
        :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)); }
    </css-doodle>
<script type="text/javascript">
document.write('<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js" type="text/javascript"><\/script>');
</script>

马黑黑 发表于 2023-4-17 23:44

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


document.write() 是个好办法

起个网名好难 发表于 2023-4-18 09:17

本帖最后由 起个网名好难 于 2023-4-18 09:50 编辑

马黑黑 发表于 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-18 14:00

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

能熟练使用这个真的是好方便呢{:4_187:}

马黑黑 发表于 2023-4-18 17:19

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

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

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

马黑黑 发表于 2023-4-18 17:21

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

@grid


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

红影 发表于 2023-4-18 22:21

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

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

这个对我来说有点难，看得一脸懵{:4_173:}

马黑黑 发表于 2023-4-18 23:03

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

会用就好

红影 发表于 2023-4-19 10:38

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

暂时还不会{:4_173:}

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

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

总会会的

红影 发表于 2023-4-20 19:19

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

看到你的帖子的具体实例，明白点了{:4_204:}

马黑黑 发表于 2023-4-20 19:52

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

慢慢都会明白

红影 发表于 2023-4-20 21:34

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

嗯嗯，这更要有个过程，现在太生疏了{:4_173:}

马黑黑 发表于 2023-4-20 21:35

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

都是有生的才有熟的

红影 发表于 2023-4-20 22:53

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

我争取早点把它们炒熟{:4_189:}

马黑黑 发表于 2023-4-20 23:12

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

加大火力

红影 发表于 2023-4-21 20:54

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

那就炒焦了{:4_189:}
页: [1] 2
查看完整版本: css-doodle绘制国际象棋棋盘