最近有许多的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. Python编程Day4——if判断、while循环、for循环

    一.if判断 语法一: if条件: 代码块1 代码块2 代码块3 示例: sex='female' age=18 is_beautiful=True if sex =='female'and age& ...

  2. 【云服务器部署】---Linux下安装nginx

    [云服务器部署]---Linux下安装nginx 之前两篇,分别讲了:Linux下安装MySQL  和  springboot项目部署云服务器 nginx安装也是挺简单的.具体步骤如下: 第一步,下载 ...

  3. 如何将云原生工作负载映射到 Kubernetes 中的控制器

    作者:Janakiram MSV 译者:殷龙飞 原文地址:https://thenewstack.io/how-to-map-cloud-native-workloads-to-kubernetes- ...

  4. [MySQL]增加约束键

    增加约束键 ALTER TABLE Persons ADD UNIQUE (P_Id) 创建表时加入约束键 CREATE TABLE Persons ( P_Id int NOT NULL, Last ...

  5. Spring IOC分析

    前言 关于Spring,我想无需做太多的解释了.每个Java程序猿应该都使用过他.Spring的ioc和aop极大的方便了我们的开发,但是Spring又有着不好的一面,为了符合开闭原则,Spring的 ...

  6. leetcode — spiral-matrix-ii

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  7. OSI七层协议模型、TCP/IP四层模型和五层协议体系结构之间的关系

    一.OSI七层模型 OSI七层协议模型主要是:应用层(Application).表示层(Presentation).会话层(Session).传输层(Transport).网络层(Network).数 ...

  8. gradle 自定义插件 下载配置文件

    1.新建Gradle项目: 2.建立src/main/groovy目录,并添加如下代码: ConfigPlugin.groovy package com.wemall.config import or ...

  9. mysql字符串查找(统计客源)

    如客源状态为1:2:3:5:6:9,其中6代表成交状态 如果要统计查询出有6这个状态的客源,可以用函数LOCATE(字符,搜索的字符串)来, 示例:统计每个分组下全部客源数total,成交客源数dea ...

  10. python 闯关之路四(上)(并发编程与数据库理论)

    并发编程重点: 并发编程:线程.进程.队列.IO多路模型 操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号. 事件.join.GIL.进程间通信.管道.队列. 生产者消息者模型.异步模 ...