一，效果图。

二，index.html代码。

<!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>

</head>

<body>

    <!--列表分隔符-->

    <div class="list">

        <div class="item item-divider">Candy Bars</div>

        <a class="item" href="#">Butterfinger</a>

    </div>

    <!--带图标列表-->

    <div class="list">

        <a class="item item-icon-left" href="#">

            <i class="icon ion-email"></i> Checkmail

        </a>

        <a class="item item-icon-left item-icon-right" href="#">

            <i class="icon ion-chatbubble-working"></i> Call Ma

            <i class="icon ion-ios-telephone-outline"></i>

        </a>

        <a class="item item-icon-left" href="#">

            <i class="icon ion-mic-a"></i> Record album

            <span class="item-note">Grammy</span>

        </a>

        <a class="item item-icon-left" href="#">

            <i class="icon ion-person-stalker"></i> Friends

            <span class="badge badge-assertive"></span>

        </a>

    </div>

    <!--按钮表表-->

    <div class="list">

        <div class="item item-button-right">

            call Ma

            <button class="button button-positive">

                <i class="icon ion-ios-telephone"></i>

            </button>

        </div>

    </div>

    <!--带头像列表-->

    <div class="list">

        <a class="item item-avatar" href="#">

            <img src="venkman.jpg"></img>

            <h2>Venkman</h2>

            <p>Back off,man.i'm a scientist.</p>

        </a>

    </div>

    <!---缩略图列表-->

    <div class="list">

        <a class="item item-thumbnail-left" href="#">

            <img src="cover.jpg">

            <h2>Pretty hate machine</h2>

            <p>Nine inch nails</p>

        </a>

     </div>

     <!--内嵌列表-->

     <div class="list list-inset">

        <div class="item">

            Raiders of the lost Ark

        </div>

     </div>

</body>

</html>

参考资料：《菜鸟教程》

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

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

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

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

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

  3. DW网页代码笔记

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

  4. LoadRunner中的Web 函数列表

    LoadRunner中的Web 函数列表 web test LoadRunner fuction_list D:\Program Files (x86)\Mercury Interactive\Mer ...

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

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

  6. 【Hadoop代码笔记】目录

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

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

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

  8. Fiddler Web Session 列表（1）

    Web Session 列表 位置: Web Session 列表 位于Fiddler界面的左侧 ,是Fiddler所抓取到的所有Session会话的列表集合. Web Session 列表 栏名词解 ...

  9. KVM虚拟化学习笔记系列文章列表（转）

    Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...

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

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

随机推荐

  1. Django _VIEW视图_源码分析

    Django _VIEW视图: 1. 点击as_view方法. 第二步: as_view () 为VIEW 类里定义的,到时候我们定义业务逻辑的类就继承这个VIEW类. view方法内返回的是disp ...

  2. javascript-浏览器消息提醒

    如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来 ...

  3. video设置autoplay 不起作用

    video 标签上添加 muted https://blog.csdn.net/taiyangmiaomiao/article/details/80266625

  4. 第32节：Java中-构造函数，静态方法，继承，封装，多态，包

    构造函数实例 class Cat{ // 设置私有的属性 name private String name; // 设置name的方法 public void setName(String Name) ...

  5. gitlab 一键 merge request(III)

    已经有两位同学写过类似的 wiki 了,值得一看: gitlab一键提交request merge & assign 为啥我又来凑热闹呢?基于下面两个原由: 我的机子是 Win10,上面脚本的 ...

  6. 使用Qt开发绘制多个设备的流量曲线图(附带项目图)

    一.说明: 在实际项目中,主要是使用Qt开发CS程序,当然主要是客户端.公司项目中有这个需求是实时显示多个设备的流量曲线图,设备将流量信息发给服务端,服务端再将信息通过Socket发给Qt客户端,Qt ...

  7. 哥们，你真以为你会做这道JVM面试题？

    有关Java虚拟机类加载机制相关的文章一搜一大把,笔者这里也不必再赘述一遍了. 笔者这里捞出一道code题要各位大佬来把玩把玩,如果你一眼就看出了端倪,那么恭喜你,你可以下山了: public cla ...

  8. day 75vue 脚手架学习 脚手架的使用

    前情提要: vue 自定化开发工具  (vue-cli的使用) 一:安装脚手架,以及准备 1: 下载地址, https://nodejs.org/en/download/ 2:如果下载成功,在cmd ...

  9. Hadoop社区版搭建

    1.环境准备 1.1 硬件配置 设备名 参数 数量 6台 系统 centos6.5 内存 64G 硬盘 32T/台 CPU 16核/台 1.2 软件版本 Hadoop-2.x 下载地址 JDK1.7  ...

  10. Docker两种方式进入后台运行的容器

    1.在启动容器的时候,有时候我们加了参数-d,这时容器自动进入后台运行.如果我们要进入容器,该怎么办?通常使用docker attach命令和nsenter工具. 2.docker attach是Do ...