前端代码笔

马黑黑

类似于Code Pen的站点应该不少，code pen应是最好的。它的作用很明确：在线实时运行你的代码，你可以在编辑代码的同时同步看到效果。前端，针对的是HTML，自然还少不了CSS、JS，这三样编辑器依次布排在页面的上方，可以任意编辑。

如果需要在服务器保存代码，则需要登录账号，Sign Up是注册，Longin是登录。支持的注册账号俺们不是人人有，那就不登录使用，也不保存，只查看效果和使用一些需要的功能（比如标准化代码啥的）。网站速度与性能有保障，可以留着备用：

code pen website

上面链接是code pen首页，打开后点击左上角的 Start Coding 进入代码编辑界面，你也可以绕过首页，直接收藏代码编辑页面。

全站英文，但简洁明了，只要不使用太复杂的功能，估摸着用还是0成本，无需捧出牛津英汉词典。

疫情无情，居家玩玩代码，时间过得快，心情不波动。祝大家一切好！

红影

去试了，在代码的下面直接能看到效果呢。真神奇

红影

哦，也可以选择显示模式，把结果显示在左或右。
有几个问题，修改之后不知道怎么刷新显示结果，分析后看到有红色显示有错误的地方，但明明演示还可以啊

红影

这好像不加载底图，可能尺寸太大了？我的是1200px宽度的，试了两个都不加载，但音乐和动图都加载了。

马黑黑

红影 发表于 2022-4-22 12:00
这好像不加载底图，可能尺寸太大了？我的是1200px宽度的，试了两个都不加载，但音乐和动图都加载了。

我之前没有试过加底图。道理上是允许的，请确保底图URL可用（论坛上的就不能用，防盗链的）

马黑黑

红影 发表于 2022-4-22 11:52
哦，也可以选择显示模式，把结果显示在左或右。
有几个问题，修改之后不知道怎么刷新显示结果，分析后看到 ...

修改后很快有效果，无需手动刷新。它有容错性，所以错误不太离谱的话也能有效果

马黑黑

红影 发表于 2022-4-22 11:39
去试了，在代码的下面直接能看到效果呢。真神奇

挺好的，和一些软件集成的实时效果插件差不多

红影

马黑黑 发表于 2022-4-22 12:10
我们试过加底图。道理上是允许的，请确保底图URL可用（论坛上的就不能用，防盗链的）

是可以用的，我传图床的，本地演示也能看到，就是那里看不到。

红影

马黑黑 发表于 2022-4-22 12:11
修改后很快有效果，无需手动刷新。它有容错性，所以错误不太离谱的话也能有效果

哦哦，即使有错误也可以有一定的容错性啊，怪不的。修改后貌似显示里不变呢，我修改了文字颜色，看显示那边没有反应，放入新的代码，还是显示原来的。

红影

马黑黑 发表于 2022-4-22 12:12
挺好的，和一些软件集成的实时效果插件差不多

我把显示调到左边了，更方便看呢

加林森

挺好用的，谢谢老黑。

马黑黑

加林森 发表于 2022-4-22 12:58
挺好用的，谢谢老黑。

马黑黑

红影 发表于 2022-4-22 12:49
我把显示调到左边了，更方便看呢

都可以，喜欢就好

加林森

马黑黑 发表于 2022-4-22 13:11

马黑黑

红影 发表于 2022-4-22 12:46
是可以用的，我传图床的，本地演示也能看到，就是那里看不到。

我去试了一下，马上有效果的。我的代码是：

CSS：

.bg {
  width: 600px;
  height: 400px;
  color: olive;
  background: url(

                               
登录/注册后可看大图

);
}


HTML：

<div class="bg">HELLO </div>

马黑黑

红影 发表于 2022-4-22 12:48
哦哦，即使有错误也可以有一定的容错性啊，怪不的。修改后貌似显示里不变呢，我修改了文字颜色，看显示那 ...

估计与你的代码不全、有问题等有关吧，我试了一下，完全可以，效果是立马出现的

马黑黑

国内 e-mail 可以注册：

maheihei on CodePen