游戏角色技能卡设计，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5

            
            <ul>
  <li class="skill fire">火焰攻击🔥</li>
  <li class="skill ice">冰冻防御❄</li>
  <li class="skill fire important">超级火焰⚡</li>
</ul>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

            
            .skill {
  padding: 10px;
  border: 3px solid red;
  border-radius: 5px;
  margin: 10px;
}
.fire{
  color: white;
  background-color: red;
}
.ice {
  color: white;
  background-color: blue;
}
.important {
  border: 5px solid gold; 
}

格式化

            
                1
2

            
            // 示例代码
console.log(["Hello 笔.COOL 控制台"])

预览

控制台

清空