<!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. ubuntu 百度云

    下载链接:https://pan.baidu.com/s/1HBu5T3PZ8JsS93PgOKnUYw提取密码:6J1A 在终端中输入命令: sudo dpkg -i bcloud_3..1_all ...

  2. vue学习（1）

    前置的准备学习: ES6简单语法: 1.let和const 2.模板字符串 3.箭头函数 4.对象的单体模式 5.es6的面向对象 6.模块化 1.let和const <script type= ...

  3. django模板中使用JQ代码实现瀑布流显示效果

    settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...

  4. 计算基因上外显子碱基覆盖度（exon coverage depth）：Samtool工具使用

    假设想要计算ATP1A4基因上的外显子碱基覆盖度 首先查询这个基因所有exon的起始和终止位置,查询链接:http://grch37.ensembl.org/Homo_sapiens/Transcri ...

  5. increment/decrement/dereference操作符

    标题以上分别对于++/--/* #include <iostream> #include <cstddef> using namespace std; class INT { ...

  6. Tomcat 用 startup.bat 启动时，加载信息之后又关闭服务器（差不多一闪而过）问题

    Tomcat 用 startup.bat 启动时,加载信息之后又关闭服务器(差不多一闪而过)问题 以前是正常的,后来在 server.xml 文件的 <Host> </Host> ...

  7. JS学习笔记Day6

    一.数组 1.数组就是个容器,里面可以存放任意类型的数 2.定义数组:1)var arr = []: 2)var arr = new Array():构造函数定义方式,如果括号中有一个整数,该正数代表 ...

  8. asp.net 获得伪静态网址解决微信sdk签名问题

    手机网站是asp.net c#编写的,前几天因为要使用微信SDK在手机网站页面使用分享功能,但是程序使用了伪静态功能.如果原地址是:http://ww.xx.com/news/show.aspx?id ...

  9. （分治法 快速幂）51nod1046 A^B Mod C

    1046 A^B Mod C   给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. 收起   输入 3个正整数A B C,中间用空格分隔.(1 < ...

  10. Hibernate的入门(增删改查):

    注意:本次的记录是在上一篇Hibernate入门的基础上应用的 1.目录 2.实体类修改 package com.itheima.domain; /* * 客户的javaBean * @author ...