CodePen的使用教程 codepen如何存放自己的代码 codepen存放的代码如何引入到网站里 codepen引入博客页面
首先,我们先打开codepen,注册/登陆
codepen官网 https://codepen.io/
注册或登陆时候,你可以选择 facebook、github或Twitter进行直接登陆。
邮箱验证
首次使用codepen,需要做一次邮箱验证,会有提示,大家点击验证,会有邮箱消息,进入邮箱点击认证链接认证。
创建
在左侧导航栏,选择 Pen→Pen 即可创建一个空白的代码模板, From Template是自定义一个模板,后期每次都可以选择使用。当然,你也可以选择vue之类模板。
使用
也可以修改模板的展示效果,如下图所示
也可以设置一些其他功能,如 自动保存,格式化,实时预览等
保存-分享链接
如何引入到网页
点击右下角 插入 ,复制弹窗的插入代码即可
最终引入的效果展示
这是我从我的博客截图的效果 http://sharedblog.cn/post/183.html
查看自己的代码列表
如何引入外部js或css
特别注意
用户名,注册时候,就一次安排到位,不建议在二次修改,二次修改之后,你之前分享的demo链接就可能会失效,404页面。
这是编辑资料页面
个人博客
前端共享博客 http://sharedblog.cn
前端软件下载 http://iqzhan.com
CodePen的使用教程 codepen如何存放自己的代码 codepen存放的代码如何引入到网站里 codepen引入博客页面相关推荐
- 教你从零开始搭建私有网盘及个人博客(云服务器基础使用教程)
云服务器选择 首先,你必须购买一个的服务器,不过你可以到阿里云的"高校学生"在家实践"计划"( http://suo.im/5sMWSq )中免费领取6个月的云 ...
- 怎样成为php高手,怎么成为php高手?如何自学成为php高手?优秀的PHP开发者是怎样炼成的?-PHP教程-基础篇-php语法基础--创业的风,吹向了年轻之长藤个人博客网站...
怎么成为php高手?如何自学成为php高手?优秀的PHP开发者是怎样炼成的?要炼成php高手绝非一日之功劳,必须是通过系统的,高效的方法才能达到巅峰!何为巅峰呢? 很多年前,也许我们还学着原生的php ...
- CakePHP 2.x十分钟博客教程
1. CakePHP2十分钟博客教程(一):安装与配置 Cakephp 2.0依然保持着Cakephp框架的各种优良传统,其中之一就是非常易于新手入门,几乎不做任何复杂的配置即可使用.非常可惜的是,C ...
- 使用Hexo搭建个人博客-保姆级教程
使用Hexo搭建个人博客-保姆级教材 首先我们看一下最终效果,按照以下步骤最后就可以完成和我一样的博客 https://chen-mingxuan.gitee.io/blog-test/ PS:CSD ...
- 教程:纯小白如何搭建自己的Github博客并写第一篇博文
文章目录 1 搭建Github博客 1.1 确认github上创建的repository名称 1.2 用系统命令行安装hexo并初始化本地博客文件夹 1.3 下载并安装hexo NexT主题 1.4 ...
- hexo高阶教程:想让你的博客被更多的人在搜索引擎中搜到吗?
本文首发在我的个人博客:http://cherryblog.site/,欢迎大家前去参观,顺便求fork,么么哒~ 上一次在掘金上发表的hexo高阶教程:hexo高阶教程next主题优化之加入网易云音 ...
- 使用Pelican和Github Pages搭建个人博客详细教程
操作系统:Mac OS / Linux 工具集: 1.Pelican--基于Python的静态网页生成器 2.马克飞象--Evernote出的Markdown文本编辑器 3.GoDaddy--域名供应 ...
- 博客园增加Live2D看板娘教程,超级简单,一看就懂
目录 一.前言 二.效果图 三.资源准备 1.相关的资源,可以点击下面的网盘链接直接下载 2.也可以通过下面的地址到Gitbuh中下载 四.实现教程 1.个人小站实现教程 2.博客园实现教程 一.前言 ...
- 从购买服务器到搭建WordPress博客详细教程
我的博客原文链接:从购买服务器到搭建WordPress博客详细教程 - Hoyerの小站 〇. 引言 你是否想过搭建一个自己的网站?是否想过随心所欲地设计网站的界面风格?是否想过用自己建的网站赚钱?这 ...
最新文章
- 分隔符怎么打出来_男孩地铁上打奶奶,踹爷爷:熊孩子都是怎么培养出来的?...
- JAVA程序员面试必知32个知识点
- Eclipse集成svn后出现Failed to load JavaHL Library的解决办法
- 采用keepalived施工可用性MySQL-HA
- hdu5334(2015多校4)--Virtual Participation(构造)
- [Java2 入门经典]第6章 类的扩展与继承
- 深度学习Caffe 入门理解使用教程
- AndroidStudio安卓原生开发_UI高级_自定义主题和样式---Android原生开发工作笔记129
- iOS开发 - 动画实践系列
- Maven插件:versions-maven-plugin
- iconv字符编码转换
- Studio3T安装
- 考研英语语法_Day02_并列句
- 2017年10米分辨率全球土地覆盖产品(FROM-GLC10)Python下载爬虫
- el-radio-button 设置默认选中问题
- [Minecraft][Mod开发]如何做一个告示牌点赞mod
- 把hao123网页用html写出来,hao123改版之用户体验
- 液压器大数据分析 需求调研计划
- Python股票盯盘助手
- Mysql 8的四种隔离级别以及对应不同类型的锁