一，效果图。

二，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. JavaScript实现页面显示倒计时功能

    下面是用JS中的日期函数和定时器完成的一个倒计时的例子,效果如图: 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  2. mysql升级8.0后项目不能连接问题

    转载简书:https://www.jianshu.com/p/a164d582e5d9 主要是因为驱动配置变了driver中得用com.mysql.cj.jdbc.Driver,多了个cj: url后 ...

  3. vue 自学笔记(5) 列表渲染

    列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON ...

  4. .NET手记－Autofac进阶（传递注册参数 Passing Parameters to Register）

    当你注册组件时,可以为组件服务传入一系列参数,用于服务解析时使用. 可使用的参数类型 Available Parameter Types Autofac提供了集中参数匹配类别: NamedParame ...

  5. javascript中的LHS和RHS

    最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...

  6. code128 C语言实现

    https://blog.csdn.net/walk_ing/article/details/52712641 参考链接 1,具有A.B.C三种不同的编码类型,可提供标准ASCII中128个字元(字元 ...

  7. python学习记录（一）

    1.打印操作 >>> print('hello') hello >>> print(1+2) 3 2.字符串操作 ① ') Traceback (most rece ...

  8. app操作的一些命令

    这里的操作都是在windows下,在android SDK安装好之后就可以连接实体手机或者模拟器操作 1.查看连接的手机或者模拟器 adb devices 结果如下: 2.查看某个app的包名和act ...

  9. vue父子组件传递参数之props

    vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...

  10. .Net RPC框架Thrift的用法

      关于Thrift 下面是来自百度百科关于Thrift的介绍: thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和引擎,以构建在 C++, Java, Go ...