天天看点

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

平台有那些?

https://codesandbox.io/

https://codepen.io/

http://jsrun.net/ (国内产品)

先给结论

前面两个应该很出名了,因为你或多或少在很多github开源项目的演示网站中看到它们,主要是用来贴测试用例,复现bug,分享自己写的小demo,记录工作中常用的demo片段和效果,以后开发开箱即用。

codepen的基本使用

我自己是比较喜欢用codepen的,这里记录一下它的一些基本操作,学会这几个操作,基本就够用了,如果你从来没有用过,那么你看了本篇博客后也可几分钟上手

注册

可以用 Twitter 、GitHub、Facebook 或者自己的邮箱单独注册,这里就暂且不表

基本操作图解(日期为20211127)

首页

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

注册登录后,你可以回到你的主页,可以看到你所有的代码片段

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

创建项目

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

项目编辑页面的基本认识

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

引入外部css js这里用引入bootstrap3.4.1做演示

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

虽然codepen可以直接搜包,但是比较鸡肋,直接自己引入就好

html+js+css沙箱平台、web在线编辑器、codepen的基本使用

把代码分享到自己的网站进行显示

html+js+css沙箱平台、web在线编辑器、codepen的基本使用