一，效果图。

二，代码。

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

    <!--ionic卡片-->

    <div class="card">

        <div class="item item-text-wrap">

            基本卡片，包含了文本信息

        </div>

    </div>

    <!--卡片的头部与底部-->

    <div class="card">

        <div class="item item-divider">

            卡片头部！

        </div>

        <div class="item item-text-wrap">

            基本卡片，包含了文本信息。

        </div>

        <div class="item item-divider">

            卡片底部！

        </div>

    </div>

    <!--卡片列表-->

    <div class="list card">

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

            <i class="icon ion-home"></i> Enter home address

        </a>

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

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

        </a>

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

            <i class="icon ion-wifi"></i> Enter wireless password

        </a>

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

            <i class="icon ion-card"></i> Enter card information

        </a>

    </div>

    <!--带图片卡片-->

    <div class="list card">

        <div class="item item-avatar">

            <img src="avatar.jpg" <h2>Pretty hate machine</h2>

            <p>Nine inch nails</p>

        </div>

        <div class="item item-image">

            <img src="cover.jpg">

        </div>

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

            <i class="icon ion-music-note"></i> start listening

        </a>

    </div>

    <!--卡片展现-->

    <div class="list card">

        <div class="item item-avatar">

            <img src="mcfly.jpg" <h2>Marty mcfly</h2>

            <p>November 05,1955</p>

        </div>

        <div class="item item-body">

            <img class="full-image" src="delorean.jpg">

            <p>

                11111111111

                <br> 2222222222

                <br> 33333333333

                <br> 44444444444

                <br> 55555555555

            </p>

            <p>

                <a href="#" class="subdued">1 喜欢</a>

                <a href="#" class="subdued">5 评论</a>

            </p>

        </div>

        <div class="item tabs tabs-secondary tabs-icon-left">

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

                <i class="icon ion-thumbsup"></i> 喜欢

            </a>

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

                <i class="icon ion-chatbox"></i> Comment

            </a>

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

                <i class="icon ion-share"></i> 分享

            </a>

        </div>

    </div>

</body>

</html>

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

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

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

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

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

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

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

  4. 【Hadoop代码笔记】目录

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

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

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

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

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

  7. DW网页代码笔记

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

  8. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  9. ionic-CSS：ionic 卡片

    ylbtech-ionic-CSS:ionic 卡片 1.返回顶部 1. ionic 卡片 近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具. 针对移动端的应用,卡片会根据 ...

随机推荐

  1. 剑指offer编程题Java实现——面试题14调整数组顺序使奇数位于偶数之前

    题目: 输入一个整数数组,实现一个函数来调整该数组中数组的顺序,使得所有的奇数位于数组的前半部分,偶数位于数组的后半部分. 解题思路:数组中维护两个指针,第一个指针初始化时候指向数组头部,第二个指针初 ...

  2. 如何正确的使用Ubuntu以及安装常用的渗透工具集.

    文章来源i春秋 入坑Ubuntu半年多了  记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习.   这里主要来 ...

  3. 第六节：详细讲解Java中的装箱与拆箱及其字符串

    前言 大家好,给大家带来详细讲解Java中的装箱与拆箱及其字符串的概述,希望你们喜欢 装箱与拆箱 封装类有:Byte , short , Integer , Character , long , Fl ...

  4. 仿B站项目(3)页面配置

    页面配置 B站有很多页面,比如说首页啊,动画页啊,音乐页啊,舞蹈页啊,那就从首页开始. 通过观察首页,可以看见有很多模块除了内容之外,在布局颜色等方面都是一样的,所以我可以开发一些模板或者插件,到时候 ...

  5. MySQL 组提交（group commit）

    目录 前言 改进 原理 实现 参数 注意 前言 操作系统使用页面缓存来填补内存和磁盘访问的差距 对磁盘文件的写入会先写入道页面缓存中 由操作系统来决定何时将修改过的脏页刷新到磁盘 确保修改已经持久化到 ...

  6. Java 中的伪共享详解及解决方案

    1. 什么是伪共享 CPU 缓存系统中是以缓存行(cache line)为单位存储的.目前主流的 CPU Cache 的 Cache Line 大小都是 64 Bytes.在多线程情况下,如果需要修改 ...

  7. Devops流程规范

    芯盾时代_Devops_Docker操作说明及使用规范 北京芯盾时代科技有限公司 2019年1月 修订记录 版本号 修订人 修订日期 修订描述 v0.1 芯盾 2019/1/15 初次创建 v0.2 ...

  8. web自动化测试(java)---元素定位

    和python类似,java-selenium也提供了很多种元素定位的方法,具体如下: findElement(By.id()) findElement(By.name()) findElement( ...

  9. FTP上传心得

    最近出了一个问题就是在本地上传FTP没有一点问题 可是部署到服务器上.上传的时候总是false.解决办法 ftp.enterLocalPassiveMode();boolean storeFile = ...

  10. localStorage的存储、获取、删除操作

    var store={ // 保存 save:function(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, // 获 ...