专栏首页HTML5学堂原来“神笔马良”的那根“笔”也可以写代码

原来“神笔马良”的那根“笔”也可以写代码

HTML5学堂:在大家都羡慕“神笔马良”拥有那支无所不能的笔时,在前端开发中,也出现了一支很神奇的“笔”——CodePen,顾名思义,code+pen,即是代码笔。它的出现可以说解决了使用手机查看代码的不方便问题,为技术文章的阅读提供了便利。

为此以后HTML5学堂的文章也会把代码案例放在这个工具中,具体的使用,大家可以去即可进入CodePen(http://codepen.io/majiang/)来查看完整的代码案例。不多说,先介绍工具吧~~~

CodePen是什么呢? 顾名思义就是code+pen = 代码笔。它是一个用来制作与测试页面的网站,可以支持移动端制作哦。

本主要从这几个方面进行CodePen的使用介绍

一、首页页面部分内容介绍

二、新手引导

三、案例展示

那接下来,就来一起开启CodePen吧。

一、首页界面介绍

1、导航栏区域介绍

左边:

  1. pen:笔;
  2. collection:收藏;
  3. posts:帖子;
  4. codevember:是针对11月份()的活动;
  5. jobs:求职区;
  6. blog:博客;
  7. store:商店;
  8. Go(pro):注册一个私人的代码笔。

右边:

  1. new pen :创建一个新的笔(案例);
  2. login in :登录;
  3. sign up :注册。

2、页面主体介绍

页面中间显示的是对CodePen进行了一个简要的描述: CodePen是一个前后端的演练场,在这里,你可以展示你最新的创作并会得到相应的反馈,你可以针对一个烦人的bug进行案例测试,你还可以在这里找到适合你的设计模式和项目灵感。有如下两个功能:

  1. find out more :发现更多;
  2. sign me up :注册。

二、新手引导

1、PC端使用教程

选择页面上的New Pen,进入相应页面,点击绿色按钮“Let's write some code!”,即可在进行代码的编写与演示操作页面,同时会对我们第一次使用进行一个“新手导航”的操作。

此时点击绿色按钮“Let's Go!”,即开启“新手导航”模式。如果你不需要这项指导,点击下面的“I'd rather not take the tour right now”。

点击进入之后,页面提示:页面左边是HTML编辑器部分,这这里不需要进行文档声明以及其他头部head标签的信息,直接将body标签里的具体内容放置进去即可。

如图上例子: 在HTML编辑器里输入了:<h1>Hello World!</h1>

底部白色区域立即显示出了Hello World!

接着点击绿色按钮“Next Step”,进行下一步向导操作,

页面提示:页面的中间是CSS编辑器部分,将需要书写的样式代码写在此区域。

如图上例子:body { background-color: #a3d5d3;},给body设置了一个浅蓝色背景。页面提示:我们可以在底部的展示区域看到页面的背景变成了浅蓝色。点击下一步:

页面提示:页面的右边是JS编辑器部分,在这里编写的JS代码会自动的放置到页面文档的后面,不会影响DOM树的解析,所以也不需要加入script标签。

如图上例子:document.getElementsByTagName("h1")[0].style.fontSize = "80px"; 将h1标签内的文字改成了80px。

点击下一步:

页面提示:点击“Settings”,即可改变CodePen的设置。之后按照页面提示:给这个案例取一个标题。

取完之后,点击下一步,进入对这个案例进行一个描述。

描述书写完毕后,点击下一步,进入“新手导航”的最后一步页面。

根据提示点击最后的“Save & Close”之后,页面出现一个弹窗,结束了“新手导航”的旅程,然后你可以选择:

  1. Create new pen :创建一个新的案例;
  2. Continue with this pen:继续使用这个案例;
  3. Start a new pen from a template:使用模板进行一个新的案例;
  4. Go back to my profile:返回个人主页。

2、移动端使用教程

进入CodePen的移动端页面,点击导航上的Pens Posts即可看到如PC端上一样的导航栏,如下:

但是如果需要新建一个代码笔,只需要点击导航栏右侧的个人小图标,然后再弹出列表上点击New Pen即可。

当点击New Pen之后,即可进入代码编写区域,如下图,可以通过切换不同的选项来编写HTML、CSS与JS的代码。

编写HTML代码如下:

编写CSS代码如下:

最后实现的效果见下图,而如果需要保存当前书写的代码,只需要点击下图中的Save即可。

最后如果需要做设置操作,只需要点击右上角的Actions,再选择Settings即可。

最后进入Settings页面,操作与PC端类似,此处不再赘述。见下图:

三、具体案例演示

1、PC端案例演示

2、移动端案例演示

本文系HTML5学堂独家内容,转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂-码匠

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解页面重构吗?

    了解页面重构吗? 正文 HTML5学堂:在HTML5的职业发展当中,存在着一种职位叫做“页面重构师”,这种职位到底是什么?又和我们的HTML5开发工程师、WEB...

    HTML5学堂
  • 原生JS | 逻辑操作符的短路问题

    HTML5学堂-码匠:短路,并不仅仅存在于物理学当中,JavaScript中的逻辑操作符也有短路问题,这个问题时常作为前端的考点出现哦! 面试真题 var a ...

    HTML5学堂
  • 利用本地存储,记录滚动条的位置

    在一定时间范围内,用手机微信打开之前浏览过的订阅号的文章,文章显示出来的是你上次阅读到的位置,而不是从头开始显示。手机微信是怎么知道你文章阅读的位置?前端工程师...

    HTML5学堂
  • 基于 Hyper-V3.0 搭建 XenDesktop7 之十二 部署 Win8 虚拟桌面之桌面发布

    Win8base加入域后,以与管理员身份登陆,插入XenDesktop7的安装光盘,点击“Setup”安装,在到下面界面的时候,点击“启动”开始安装向导

    SuperDream
  • 微软超融合私有云测试09-SCVMM部署之SCVMM 2016 安装

    本次SCVMM 2016安装部署采用单服务器模式,不涉及集群模块,后续我可能会撰写SCVMM 2016高可用性的文章

    SuperDream
  • 【JAVA WEB教程】jsp环境搭建(eclipse)【详细+图文】

    下载JDK(如果你的系统是64位的,那么就下载64位版本的) ? 然后安装,点击下一步 ? 再点击下一步 安装成功 ? 下载针对JAVA EE的Eclipse...

    liulun
  • pageadmin CMS网站制作教程:实例:如何制作一个报名表?

    pageadmin CMS网站建设教程:实例:如何制作一个报名表? 有时我们根据需求需要制作一些自定义表,该如何去制作呢?

    Almost Lover
  • PDF怎么添加空白页?如何给PDF文件添加页面

    PDF怎么添加空白页?PDF文件大家接触的应该不少,办公时发送文件都会选择PDF格式的,利于传输。

    用户5843321
  • MySQL数据库安装

    首先我们需要登录MySQL官网https://downloads.mysql.com/archives/installer/,下载一个MySQL5.7的...

    菜鸟小白的学习分享
  • 虚拟机Linux Ubuntu安装教程

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工...

    Erwin

扫码关注云+社区

领取腾讯云代金券