ionic框架的card卡片，可以结合不同类型的控件或图标生成不同组件。卡片列表类似卡片包一样，有一层一层展示出来，使用样式类card。下面利用一个card和图标结合生成列表的实例说明这个用法，具体操作如下：
工具/原料
- ionic框架
- AngularJS框架
- HBuilder
- CSS3
- HTML5
- 截图工具
- 浏览器
方法/步骤
- 1
第一步，创建静态页面icon.html，引入ionic和AngularJS的相关文件（JS和CSS），修改title标签的文字展示内容，如下图所示：
- 2
第二步，在body中插入div标签元素，并设置样式class为list、card，根据需要设置样式，如下图所示：
- 3
第三步，利用<a></a>标签插入小图标，这里选择ionic框架自带的小图标，结合<i></i>标签元素插入，这样看起来更为美观，如下图所示：
- 4
第四步，编写完毕后，预览该静态页面，这是会在页面上看到含有图标的列表，图标位于右侧，左侧展示字，如下图所示：
- 5
第五步，为了将字样和图标放在同一方向，需要将class="item-icon-right"改为item-icon-left，图标移到左侧，如下图所示：
- 6
第六步，再次预览页面，这时字样和图标都在页面左侧，说明上面样式类设置成功了，如下图所示：
注意事项
- 了解ionic框架自带的样式图标，合理使用样式
- 熟悉card卡片和其他控价结合使用的方法
