mui卡片视图的制作
<!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卡片视图的制作的更多相关文章
- mui 卡片视图 遮罩蒙版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- UWP 卡片视图 Card View
上一篇 提到了 UWP 轨道视图Orbit View,这次就说一下卡片视图,毕竟两个差不多. 卡片视图,效果如其名,卡片一样,左右滑动,当然能翻牌最好了. 嗯,我这个可以的额(⊙﹏⊙)... 看下效果 ...
- 【Android】10.4 卡片视图
分类:C#.Android.VS2015: 创建日期:2016-02-19 一.简介 Android 从5.0开始包含了一个全新的卡片视图小部件,这个新的小部件默认就像一张带有圆角和轻微阴影的白色卡片 ...
- 使用swipecard实现卡片视图左右滑动监听以及点击监听
前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但 ...
- unity 中UGUI制作滚动条视图效果(按钮)
1.在unity中创建一个Image作为滚动条视图的背景: 2.在Image下创建一个空物体,在空物体下创建unity自带的Scroll View组件: 3.对滑动条视图的子物体进行调整: 4.添加滚 ...
- 【MUI框架】学习笔记整理 Day 1
MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...
- Android 常用布局视图
常用包 http://square.github.io/ EventBus Scroller 滚动 拖拽 # android.support.design.widget.CollapsingToolb ...
- IOS 表视图(UITableVIew)的使用方法(2)名单的分段显示
我们可以采用名字分段法,名字分段会在之后的小节中显示,这是转而使用球员的角色分段发,以最直接的入手点讲解好UITableView的分段使用方法.本节示例时基于上节的SimpleTableViewCon ...
- MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...
随机推荐
- 洛谷P3810 陌上花开 CDQ分治(三维偏序)
好,这是一道三维偏序的模板题 当然没那么简单..... 首先谴责洛谷一下:可怜的陌上花开的题面被无情的消灭了: 这么好听的名字#(滑稽) 那么我们看了题面后就发现:这就是一个三维偏序.只不过ans不加 ...
- 【洛谷P3810】陌上花开
题目大意:给定一个三维空间点的坐标,求对于任意一个点三维均小于等于这个点的点个数. 题解:学会了简单的 cdq 分治. 首先,先将第一维从小到大排序,再用类似归并排序的操作对第二维进行排序,在第二维合 ...
- Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public xxxxxxxx.
最近在使用 springBoot开发的时候, 使用PostMan访问接口, 返回一个 404 , 后台报一个 warn : Failed to read HTTP message: org.spr ...
- IDEA或Webstorm设置Ctrl+滚轮调整字体大小
按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.
- jquery+ajax无刷新加载数据,新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
- 解决mysql乱码问题
在mysql根目录下创建my.ini文件 my.ini内容为: [mysqld] # 设置默认字符集,只会影响新建数据库的默认字符集 character-set-server=utf8
- 简洁架构的思想,基于go实现
https://manuel.kiessling.net/2012/09/28/applying-the-clean-architecture-to-go-applications/ 从 Clean- ...
- Linux_查找文件
1.查找文件 (1)通过文件名查找 find / -name jdbc.properties (2)根据部分文件名查找 find /etc -name *srm* find /etc -name sr ...
- Hadoop生态圈-使用FreeIPA安装Kerberos和LDAP
Hadoop生态圈-使用FreeIPA安装Kerberos和LDAP 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 有些大数据平台只是简单地通过防火墙来解决他们的网络安全问题.十分 ...
- C# 主动发起请求代码
本文用于写代码是给提示 private string GetHW(string uri) { string returnStr = ""; HttpWebRequest hwReq ...