一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

</head>

<body>

    <ul class="list color-list-demo">

        <li class="item dark">

            light

            <span class="color-demo light-bg light-border"></span>

        </li>

        <li class="item stable-dark">

            stable

            <span class="color-demo stable-bg stable-border"></span>

        </li>

        <li class="item positive">

            positive

            <spa class="color-demo positive-bg positive-border">

                </span>

        </li>

        <li class="item calm">

            calm

            <span class="color-demo calm-bg calm-border"></span>

        </li>

        <li class="item balanced">

            balanced

            <span class="color-demo balanced-bg balanced-border"></span>

        </li>

        <li class="item energized">

            energized

            <span class="color-demo energized-bg energized-border"></span>

        </li>

        <li class="item assertive">

            assertive

            <span class="color-demo assertive-bg assertive-border"></span>

        </li>

        <li class="item royal">

            royal

            <span class="color-demo royal-bg royal-border"></span>

        </li>

        <li class="item dark">

            dark

            <span class="color-demo dark-bg dark-border"></span>

        </li>

    </ul>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-颜色的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  3. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  4. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  5. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  6. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  7. web 常用颜色

    1. 推荐链接 RGB颜色值与十六进制颜色码转换工具 Web上16种基本颜色名称 WEB标准颜色 2. 个人常用 除了三原色,还有 #daf1ef#4DBCB0#ccc

  8. Web安全颜色

    Web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...

  9. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  10. 216种Web安全颜色

    216种Web安全颜色 全部 JavaScript HTML5 jQuery CSS EXT Ajax Web综合 界面设计 DWR   锁定老帖子 主题:216种Web安全颜色 精华帖 (0) :: ...

随机推荐

  1. Python大法之告别脚本小子系列—信息资产收集类脚本编写(下)

    作者:阿甫哥哥 原文来自:https://bbs.ichunqiu.com/article-1618-1.html 系列文章专辑:Python大法之告别脚本小子系列目录: 0×05 高精度字典生成脚本 ...

  2. 使用docker redis-cluster集群搭建

    参考https://www.cnblogs.com/cxbhakim/p/9151720.html此文 主要搭建过程参考上文,此处讲下主要过程和遇到的坑 首先是镜像的基础搭建,我不知道是否是作者编写时 ...

  3. iOS-微信支付商户支付下单id非法

    最近在APP中WKWebView中调用微信支付的时候,一直报商户支付下单id非法.看了n边微信文档,度娘了n次-----仍未解决.因为安卓的支付是没有问题的所以就跟安卓兄弟要了最终调用微信的字符串: ...

  4. jsp-静态包含和动态包含的区别

    include指令是静态包含.静态包含的意思就是:把文件的代码内容都包含进来,再编译! include指令是静态包含,include行为是动态包含.其实include行为就是封装了request.ge ...

  5. Python模块练习题

    练习题: 1.logging模块有几个日志级别? #INFO,WARNING,DEBUG,CRITICAL,ERROR 2.请配置logging模块,使其在屏幕和文件里同时打印以下格式的日志 2017 ...

  6. Java架构技术进阶之：从分布式到微服务，深挖Service Mesh

    自从几十年前第一次引入分布式系统这个概念以来,出现了很多原来根本想象不到的分布式系统使用案例,但同时也引入了各种各样的新问题. 当这些系统还是比较少比较简单的时候,工程师可以通过减少远程交互的次数来解 ...

  7. 转载：https原理：证书传递、验证和数据加密、解密过程解析

    写的太好了,就是我一直想找的内容,看了这个对https立马明白多了 http://www.cnblogs.com/zhuqil/archive/2012/07/23/2604572.html 我们都知 ...

  8. Intellij-插件安装-JRebel热部署插件安装

    环境介绍: Win7.JDK1.8.maven+jetty插件.SpringMVC.Intellij IDEA 2018.1.2 安装插件: 在线安装: Settings --> Plugins ...

  9. maven snapshot和release版本的区别

    Maven的Snapshot版本与Release版本 1. Snapshot版本代表不稳定.尚处于开发中的版本 2. Release版本则代表稳定的版本 3. 什么情况下该用SNAPSHOT? 协同开 ...

  10. 高可用Hadoop平台－Ganglia安装部署

    1.概述 最近,有朋友私密我,Hadoop有什么好的监控工具,其实,Hadoop的监控工具还是蛮多的.今天给大家分享一个老牌监控工具Ganglia,这个在企业用的也算是比较多的,Hadoop对它的兼容 ...