我的阅读记录墙，HTML/Vue代码在线实时编辑、预览

HTML

格式化

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

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9

            
            <div class="note box1">
    <h2>📖《朝花夕拾》</h2>
    <p class="text">"我常想在纷扰中寻出一点闲静来，然而委实不容易。"</p>
</div>
    
<div class="note box2">
    <h2>🔬《昆虫记》</h2>
    <p class="text">"蟋蟀的住宅向阳、干燥、隐蔽，真不愧是伟大的建筑师。"</p>
</div>

</body>

CSS

格式化

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

            
            .note {
  max-width: 300px;
  background: #fff9e6;
  transform: rotate(-5deg);
  padding: 20px;
  margin: 15px;
}
.box1 {
  border: 3px dashed #e67e22;
}
.box2 {
  border: 3px dotted #2980b9;
}
.text {
  color: #8e44ad;
  font-size: 18px;
  line-height: 1.6;
  text-indent: 2em;
}

格式化

            
                1
2

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

预览

控制台

清空