<!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. poj2893 M×N puzzle

    x数码难题有解性判定: 只有必要性证明,没有充分性...... 还记得那个naive至极的八数码难题吗? 它回来了! 主要是借助逆序对这一神奇的手段: 考虑把x数码写成一排时的逆序对的奇偶性: 当你左 ...

  2. 第一篇-Win10打开txt文件出现中文乱码

    如果刚开始安装的是英文的Win10系统,那么打开txt文件时很容易出现乱码问题.包括打开cmd窗口,也是不能显示中文的.当然,麻烦的处理方法是: 在cmd中想要显示中文:先输入chcp 936,之后中 ...

  3. 洛谷 P1879 玉米田(状压DP入门题)

    传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 题解: 相关变量解释: int M,N; int plant[maxn][maxn];/ ...

  4. HDU 1003 Max Sum 求区间最大值 (尺取法）

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  5. Tomcat源码组织结构

    Tomcat 源码组织结构 目录结构 这里所介绍的目录结构,是使用CATALINA-BASE变量定义的路径,如果没有通过配置多个CATALINA-BASE目录来使用多实例,则CATALINA-BASE ...

  6. (map 并查集) codeVs 2639 约会计划

    题目描述 Description cc是个超级帅哥,口才又好,rp极高(这句话似乎降rp),又非常的幽默,所以很多mm都跟他关系不错.然而,最关键的是,cc能够很好的调解各各妹妹间的关系.mm之间的关 ...

  7. Harbor作为Docker的镜像中心

    转载于网络 我们采用Harbor作为Docker的镜像中心. 有几个原因: Harbor采用Docker Compose拉起维护,简单方便. 采用Nginx作为入口网关,各种参数配置相对熟悉. 基于N ...

  8. mysql执行update报错 Err] 1055 - 'information_schema.PROFILING.SEQ' isn't in GROUP BY

    mysql执行update报错 Err] 1055 - 'information_schema.PROFILING.SEQ' isn't in GROUP BY 今天开发的同事发来如下错误信息,最最简 ...

  9. 6、JPA-映射-单向一对多

    一个用户对应多个订单 实体类 Customer package com.jpa.yingshe; import javax.persistence.*; import java.util.HashSe ...

  10. 搭建vscode+vue环境

    转自:https://blog.csdn.net/mao834099514/article/details/79138484 一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 ...