<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>

        <link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>

        <style type="text/css">

            /*第一：设置头部背景图片*/

            /*.mui-card-header{

                background-image: url(image/2.jpg);

                height: 40vw;

                width: 100%;

                /*能让图片完全显示出来*/

                /*background-size: contain;*/

            /*}*/

            .mui-card-content img{

                height: 40vw;

                width: %;

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title">卡片视图</h1>

        </header>

        <div class="mui-content">

            <!--卡片布局如下

                <div class="mui-card">

                <div class="mui-card-header">卡片头部</div>

                <div class="mui-card-content">主体内容</div>

                <div class="mui-card-footer">卡片底部</div>

            </div>

            -->

            <div class="mui-card">

                <div class="mui-card-header mui-card-media">

                    <!--

                            主体内容部分：

                            媒体卡片自作：mui-card-media

                            右边文字叙述部分：mui-media-body

                        -->

                        <!--<div class="mui-card-media">-->

                            <img src="img/logo.png"/>

                            <div class="mui-media-body">

                            蓝天白云

                            <p>晴空万里</p>

                                <p>--  星期五</p>

                            <!--</div>-->

                        </div>

                    </div>

                <div class="mui-card-content">

                    <!--

                        mui-card-content-inner:能够有一个缩进的效果

                    -->

                    <div class="mui-card-content-inner">

                        <img src="data:image/2.jpg"/>

                        <p class="mui-card-content-inner">

                            、不要过份依赖友谊，或者花很多心思去猜度身边的人对你是否真心，

                                    一个人生活不会死，

                                    体会孤单是成长必修课，谁都要经历。人生路漫长，

                                    如果有一段实在是没人陪你热闹同行，

                                    你要对踽踽独行的自己说，

                                    走过这段就好，前方有更好的风景和更好的人等着。

                        </p>

                    </div>

                </div>

                <div class="mui-card-footer">

                    <!--

                        设置

                    -->

                    <a href="" class="mui-card-link">

                        <span class="mui-content-padded mui-icon mui-icon-extra mui-icon-extra-heart-filled">

                        </span>收藏</a>

                    <a href="" class="mui-card-link">

                        <spand class="mui-content-padded mui-icon mui-icon-eye"></spand>

                        查看</a>

                    <a href="" class="mui-card-link">

                        <spand class="mui-content-padded mui-icon mui-icon-chat"></spand>回复</a>

                    <!--<a href="" class="mui-card-link">评论</a>-->

                </div>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init()

        </script>

    </body>

</html>

效果如下：

mui卡片视图的制作的更多相关文章

  1. mui 卡片视图 遮罩蒙版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. UWP 卡片视图 Card View

    上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多. 卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了. 嗯,我这个可以的额(⊙﹏⊙)... 看下效果 ...

  3. 【Android】10.4 卡片视图

    分类:C#.Android.VS2015: 创建日期:2016-02-19 一.简介 Android 从5.0开始包含了一个全新的卡片视图小部件,这个新的小部件默认就像一张带有圆角和轻微阴影的白色卡片 ...

  4. 使用swipecard实现卡片视图左右滑动监听以及点击监听

     前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...

  5. unity 中UGUI制作滚动条视图效果（按钮）

    1.在unity中创建一个Image作为滚动条视图的背景: 2.在Image下创建一个空物体,在空物体下创建unity自带的Scroll View组件: 3.对滑动条视图的子物体进行调整: 4.添加滚 ...

  6. 【MUI框架】学习笔记整理 Day 1

    MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...

  7. Android 常用布局视图

    常用包 http://square.github.io/ EventBus Scroller 滚动 拖拽 # android.support.design.widget.CollapsingToolb ...

  8. IOS 表视图(UITableVIew)的使用方法(2)名单的分段显示

    我们可以采用名字分段法,名字分段会在之后的小节中显示,这是转而使用球员的角色分段发,以最直接的入手点讲解好UITableView的分段使用方法.本节示例时基于上节的SimpleTableViewCon ...

  9. MUI开发记录

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...

随机推荐

  1. 洛谷P3265 装备购买

    这个大毒瘤题....居然反向卡精度.... 别的题eps要开小,这个毒瘤要开大... 我一开始是1e-12,挂的奇惨无比,50分...... 然后改成1e-7,就70分了... 1e-5 90分 1e ...

  2. A1119. Pre- and Post-order Traversals

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  3. POJ 2553 The Bottom of a Graph (Tarjan）

    The Bottom of a Graph Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 11981   Accepted: ...

  4. ActiveMQ与RabbitMQ的区别

    1. ActiveMQ/ApolloMQ 优点:老牌的消息队列,使用Java语言编写.对JMS支持最好,采用多线程并发,资源消耗比较大.如果你的主语言是Java,可以重点考虑. 缺点:由于历史悠久,历 ...

  5. (数论 最大公约数 最小公倍数) codeVs 1012 最大公约数和最小公倍数问题

    题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件:  1.P,Q是正整 ...

  6. (进制转换 栈)P1143 进制转换 洛谷

    题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 共三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进制数,若n>10n> ...

  7. 关于java文件下载文件名乱码问题解决方案

    JAVA文件下载时乱码有两种情况: 1,下载时中文文件名乱码 2,下载时因为路径中包含中文文件名乱码,提示找不到文件 解决方法见下面部分代码 response.setContentType(" ...

  8. javaweb简单登陆例子

    JSP+Servlet+JavaBean简单程序例子——用户名密码登陆,摘自<Tomcat&JavaWeb 技术手册>,亲测可用. IDE环境:MyEclipse10 1.建立We ...

  9. hibernate关联关系映射之配置文件

    词汇解释 关系:事物之间相互作用.相互联系的状态.范围最大. 联系:在关系数据库中表示实体与实体之间的联系,1:1,1:n,m:n. 关联:表示对象之间的关系,既有数量性,又有方向性:动词:将对象之间 ...

  10. Trap 冷启动与热启动告警

    冷启动: 设备断电重启. 热启动: snmp agent 从未使能到使能的操作会产生此告警.