【代码笔记】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 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>
posted @ 2018-07-19 09:11  花儿迎风笑  阅读(439)  评论(0)  编辑  收藏  举报