【代码笔记】Web-ionic-卡片
一，效果图。
二，代码。
<!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 [email protected] "#" class="item item-icon-left">
<i class="icon ion-home"></i> Enter home address
</a>
<a [email protected] "#" class="item item-icon-left">
<i class="icon ion-ios-telephone"></i> Enter phone number
</a>
<a [email protected] "#" 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>