<!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. 【CF600E】Lomsat gelral

    题目大意:给定一棵 N 个节点的有根树,1 号节点是树的根节点,每个节点有一个颜色.求对于每个节点来说,能够支配整棵子树的颜色之和是多少.支配的定义为对于以 i 为根的子树,该颜色出现的次数不小于任何 ...

  2. linux系统调用之网络管理2

    socketcall socket系统调用 socket 建立socket bind 绑定socket到端口 connect 连接远程主机 accept 响应socket连接请求 send 通过soc ...

  3. python爬虫获取图片

    import re import os import urllib #根据给定的网址来获取网页详细信息,得到的html就是网页的源代码 def getHtml(url): page = urllib. ...

  4. mac 切换用户

    sh-3.2# su - houzhibinhouzhibindeMacBook-Pro:~ houzhibin$

  5. opencv: 排序

    opencv提供了排序函数:  sort和sorIdx , 其中sortIdx可以获取排序后的序号,比较方便: sortIdx原型: C++: void sortIdx(InputArray src, ...

  6. Centos 6.8编译安装LNMP环境

    Centos 6.8编译安装LNMP环境 参考资料: http://www.jb51.net/article/107429.htm https://phperzh.com/articles/1360 ...

  7. IDEA常用快捷键整理（Mac OS X版本）

    最近eclipse把我弄疯了!各种提示没有!烦,果断用了IDEA. 一.前提 IDEA版本:IntelliJ IDEA 15.0.3 Keymaps:Mac OS X 二.视图切换快捷键 1.cmd ...

  8. ResourceBundle读取properties配置文件

    package cn.rocker.readProperties; import java.util.ResourceBundle; import org.junit.Test; /** * @Cla ...

  9. C#设计模式（10）——桥接模式

    1.桥接模式介绍 桥接模式用于将抽象化和实现化解耦,使得两者可以独立变化.在面向对象中用通俗的话说明:一个类可以通过多角度来分类,每一种分类都可能变化,那么就把多角度分离出来让各个角度都能独立变化,降 ...

  10. 163邮箱SMTP设置

    如题要设置系统邮件自动发送 首先注册的网易邮箱要去开通SMTP服务,然后就是端口的设置 授权码 端口