最近有许多的Css 3 demo,因此为了方便查阅,就将demo部分放在jsfiddle ,方便日后翻阅。

这是 JSFIDDLE 的官网文档,都是英文,不过对照看还是可以的:官方文档

HTML区域:

它的HTML区域已经包含 html / meta 标签,因此在它的HTML区域就不要再写文档类型标签了,否则会给出警告;

它的使用方式是直接写你的DOM节构:

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar">主菜单
<ul class="menu">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-pinterest"></a></li>
<li><a href="#" class="fa fa-rss"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-skype"></a></li>
<li><a href="#" class="fa fa-github"></a></li>
</ul>
</div>
</div>
</div>
</div>

CSS 区域:

  1. 本地css 直接手写即可
  2. 加载外部的 css 注意点,jsfiddle 是 htpps 站点,因此,如果需要加载外部的css的话,需要进入https CDN 搜索你需要的外部css,并复制它的 link链接

写好之后 ,点击 RUN 运行即可看到效果

jsfiddle 使用教程的更多相关文章

  1. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  2. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  3. knockout.js简单实用教程1

    第一次接触knockout是在一年多之前吧.当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定.也就开始学习起来knockout.在之后的项目中也多次用到了这个.在第一次开始学 ...

  4. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  5. 【转】Angular学习总结--很详细的教程

    *这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...

  6. 【转】angular中$parse详解教程

    原文: https://yq.aliyun.com/ziliao/40516 ------------------------------------------------------------- ...

  7. 倍福TwinCAT(贝福Beckhoff)应用教程13.3 TwinCAT控制松下伺服 NC配合完整上位

    这是TwinCAT教程的最后一节,简单讲述了以C#为上位,通过ADS控制TwinCAT下位,实现完整控制两轴模组的功能.可以发现,在上位层已经没有了运动控制的代码,不管是要执行哪种运动,无非是把目标参 ...

  8. github上最全的资源教程-前端涉及的所有知识体系【转】

    github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...

  9. 终极教程【zhong】

    just for a better future! 资源教程               aiim                   综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...

随机推荐

  1. MQ(2)---JMS

    JMS 一.理解JMS   1.什么是JMS?         JMS即Java消息服务(Java Message Service)应用程序接口,API是一个消息服务的标准或者说是规范,允许应用程序组 ...

  2. C++版 - 剑指offer 面试题63:二叉搜索树的第k个结点(二叉树中序遍历的应用) 题解

    面试题 63:二叉搜索树的第k个结点 题目:给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 (见下面的图1) 中,按结点数值大小顺序第三个结点的值 ...

  3. Unity中雾效的开启

    原文:https://blog.csdn.net/Rhett_Yuan/article/details/54425236 1.对于雾效的开启在新版的Unity中通过界面菜单Windows->Li ...

  4. 前端测试框架Jest系列教程 -- Mock Functions(模拟器)

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

  5. SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa

    如何整合spring data jpa 1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  6. MySQL索引的概念

    索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. 索引分为聚簇索 ...

  7. JsonBuilder初出茅庐

    互联网这股东风不久前刮到了甘凉国,国王老甘独具慧眼,想赶紧趁着东风未停大力发展移动互联网,因为他笃信布斯雷的理论:“站在风口上,猪都能飞起来”.无奈地方偏僻落后,国内无可用之才啊.老甘一筹莫展的低头凝 ...

  8. zookeeper服务发现实战及原理--spring-cloud-zookeeper源码分析

    1.为什么要服务发现? 服务实例的网络位置都是动态分配的.由于扩展.失败和升级,服务实例会经常动态改变,因此,客户端代码需要使用更加复杂的服务发现机制. 2.常见的服务发现开源组件 etcd—用于共享 ...

  9. 我的IdentityServer目录

    概念部分 理解oauth协议 理解什么是claim 学习Identity Server 4的预备知识 Open ID Connect(OIDC)在 ASP.NET Core中的应用 操作部分 入门: ...

  10. 再谈 C# 对象二进制序列化,序列化并进行 AES 加密

    对象的二进制序列化非常有用,也非常方便. 我们可以把对象序列化为字节数组,也可以把对象序列化到文件,还可以把对象序列化到文件并进行加密. 先引用这些命名空间: using System.IO;usin ...