<!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. 洛谷P2261 余数求和

    整除分块的小应用. 考虑到 k % x = k - (k / x) * x 所以把 x = 1...n 加起来就是 k * n - (k / i) * i i = 1...k(注意这里是k) 对于这个 ...

  2. Day18--Python--面向对象--类与类之间的关系

    1. 依赖关系 在方法中引入另一个类的对象 (最不紧密的一种关系) 依赖关系都是把另一个对象当做参数 class Elephant: def __init__(self, name): self.na ...

  3. 遍历List过程中同时修改

    public static void Main() { List<int> list = new List<int>(); ,,,,,,,,,}; list.AddRange( ...

  4. Emgu.CV 播放视频-本地文件/RTSP流

    using Emgu.CV; using System; using System.Drawing; using System.Threading; using System.Windows.Form ...

  5. 位掩码(BitMask)的介绍与使用

    一.前言 位运算在我们实际开发中用得很少,主要原因还是它对于我们而言不好读.不好懂.也不好计算,如果不经常实践,很容易就生疏了.但实际上,位运算是一种很好的运算思想,它的优点自然是计算快,代码更少. ...

  6. 2019年 十款Mac上必备的实用软件列表

    2019年 十款Mac上必备的实用软件列表 文章来源:风云社区 (www.scoee.com 两千多款Mac软件下载) 1.Parallels Desktop 如果你还是想在Mac上使用Windows ...

  7. python APScheduler

    简介 APScheduler基于Quartz的一个Python定时任务框架,实现了Quartz的所有功能,使用起来十分方便.提供了基于日期.固定时间间隔以及crontab类型的任务,并且可以持久化任务 ...

  8. linux 配置本地光盘YUM源

    1.挂载光盘到 /media下 [root@localhost ~]# mount /dev/cdrom /media 2.直接配置文件了. [root@localhost ~]# cd /etc/y ...

  9. Java Web之表单重复提交问题

    上篇文章讲了验证码的制作,提及到了一个问题,就是表单重复提交的问题,可能在上次那个验证码中感觉不是那么的重要 现在我新写一个例子,转钱.通过这个例子你就知道表单重复提交有多恐怖了. 先来简单的介绍一下 ...

  10. JAVA核心技术I---JAVA基础知识（格式化相关类）

    一:格式化相关类 (一)java.text包java.text.Format的子类 –NumberFormat:数字格式化,抽象类 DecimalFormat –MessageFormat:字符串格式 ...