Question

如何利用ionic框架设置卡片控件

Answer 1

第一步，打开HBuilder设计软件，创建web项目名为ionic，并在web项目下创建文件夹pages，在pages目录下新建静态页面card.html，如下图所示：

第二步，在静态页面引入ionic和AngularJS相关的JS和CSS文件，如下图所示：

第三步，在body标签元素内插入带有card的div标签，并设置其样式，如下图所示：

第四步，预览该页面，这时会在页面看到顶部含有卡片字样的，下面有红色背景的框框，如下图所示：

第五步，为了展示不同样式，在card下方插入多个div标签并设置不同样式，如下图所示：

6
第六步，再次展示页面，这时会在页面看到各种不同颜色的背景色框框，如下图所示：