ionic框架中有一類控制元件card卡片，卡片會隨著螢幕大小而改變，一般情況下卡片放在頁面頂部。下面利用一個具體例項來說明card卡片具體使用方法，詳細操作如下
工具/原料
ionic
AngularJS
HBuilder
瀏覽器
截圖工具
方法/步驟
第一步，開啟HBuilder設計軟體，建立web專案名為ionic，並在web專案下建立資料夾pages，在pages目錄下新建靜態頁面card.html，如下圖所示：
第二步，在靜態頁面引入ionic和AngularJS相關的JS和CSS檔案，如下圖所示：
第三步，在body標籤元素內插入帶有card的div標籤，並設定其樣式，如下圖所示：
第四步，預覽該頁面，這時會在頁面看到頂部含有卡片字樣的，下面有紅色背景的框框，如下圖所示：
第五步，為了展示不同樣式，在card下方插入多個div標籤並設定不同樣式，如下圖所示：
第六步，再次展示頁面，這時會在頁面看到各種不同顏色的背景色框框，如下圖所示：
注意事項
注意ionic框架卡片card的用法
注意card卡片不同樣式設定