MUI cardview(卡片视图)

最新推荐文章于 2022-03-26 19:44:47 发布
最新推荐文章于 2022-03-26 19:44:47 发布
阅读量1.7k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40861561/article/details/105217179
版权
本文介绍了MUI中卡片视图的使用方法，适用于展示独立信息，如文章预览、作者详情和点赞数。卡片由页眉、内容区和页脚构成，支持在页眉添加背景图片或更丰富的信息，如头像、主标题和副标题。
摘要由CSDN通过智能技术生成

卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等 使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：

<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header">页眉</div>
    <!--内容区-->
    <div class="mui-card-content">内容区</div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">页脚</div>
</div>

卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：

<div class="mui-card-header mui-card-media" 
    style="height:40vw;background-image:url(url(img/1.jpg)))">学习MUI</div>
最低0.47元/天 解锁文章
秋城落叶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android控件 - CardView卡片视图
⚡
12-20 824
▷ 安卓卡片视图 dependencies dependency depend on implementation 落实n、安装启用nimplement 工具n、使生效/执行Vt <一> 在dependencies中引入当前控件 dependencies { ... implementation 'androi...
十一.MUI - cardview（卡片视图）、mask（遮罩蒙版）
梅某某
04-16 5944
1、cardview（卡片视图） 使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下： class="mui-card"> class="mui-card-header">页眉 class="mui-card-content">内容区 class="mui-card-foot
mui卡片视图的制作
weixin_30347009的博客
02-22 358
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initi...
Mui-卡片视图
weixin_30950237的博客
06-23 264
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use...
mui 卡片视图 遮罩蒙版
04-16 149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale...
MUI-cardview（卡片视图），页眉、内容区、页脚
LzzMandy的博客
12-14 4439
本文主要讲述cardview（卡片视图），页眉（图片+主标题+副标题）、内容区（图片/文字）、页脚（链接）的相关设置。 1、cardview（卡片视图）概述： 卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等； 使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下： &lt;div class="mui-card...
muidemo整理测试
02-16
【MUI技术详解】 "Muidemo整理测试"这个标题揭示了这是一个关于MUI框架的实践与测试项目。MUI是一款专为移动应用开发设计的前端框架，尤其适用于H5页面和微信小程序。它以其轻量级、高效以及高度可定制化的特点，在...
VUE中使用MUI方法
12-08
VUE中如何使用MUI 1、第一步：下载MUI 百度搜索MUI进入其官网点击右上角github地址，下载MUI文件  2、第二步：拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css...
MUI 漫画APP.zip
11-04
《MUI 漫画APP》是一款基于MUI框架开发的简单漫画阅读应用程序。MUI是DCloud（数字天堂）推出的一款轻量级的前端框架，专为移动Web应用设计，旨在提供一套易于上手、功能完备且性能优化的组件库，帮助开发者快速构建...
MUI项目实战源码
05-09
Vue.js是一个用于构建用户界面的渐进式框架，它的核心库专注于视图层，易于学习且与其它库或现有项目集成。Vue.js的响应式数据绑定和组件化特性使得代码结构清晰，维护性高。 在这个项目中，Vue.js作为MUI的补充，...
mui ---- 搜索列表自定义
11-03
1，直接添加引用indexed-list.js和indexed-list.css； 2，修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight 此处的作用是防止你将搜索框去掉，导致的右侧导航不协调 3，修改group && group.length == 1为group 此处是因为你添加的热门等字符串长度大于1而不能触发定位函数 4，禁止self.bindSearchEvent(); 此处是由于我的页面不需要搜索，所以讲搜索的触发事件禁止 5，添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字，但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好，你可以下载直接使用。 特别说明：如果你的页面需要哪个搜索框，只用放开第四步禁止的代码就好，然后将输入框加入进来，依然可以执行！
好看的网页按钮，CSS圆角按钮
04-29
大名鼎鼎的sexybuttons，博客园目前就是用的这个。这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？
MUI手机购物商城源码
01-31
1. **商品展示**：使用MUI的列表、卡片等组件，可以轻松搭建商品展示模块，支持商品图片、价格、描述等信息的展示。 2. **分类导航**：利用MUI的侧滑抽屉或底部导航栏，可以实现商品分类的快速切换。 3. **购物车**...
Hbulider得前端基础_mui框架总结4_卡片视图&&消息框&&复选框
cdc8596的博客
08-14 646
顺便说一下,这段时间主要是把MUI框架的控件关键代码拿出来看一下,并把每个控件主要用到的地方说一下, 并把js也拿出来看一下,控件了解清楚了,然后写个webservice,就能进行数据交互了,后面的话会做一个项目 1.卡片视图主要用于图文详解一些详情     &lt;div class="mui-content"&gt;             &lt;div class="mui-card...
MUI 图文卡片（左布局）仿通讯录
机智的奎哥的博客
04-22 369
<li class="mui-table-view-cell mui-media" > <a class="mui-navigate-right" id="div_list" href="tel:"> <img class="mui-...
mui-card使用方法
youngAda的专栏
10-23 769
<script> import { mapState, mapGetters } from 'vuex' export default { computed: { ...mapState('shopcart', ['buy']), ...mapGetters('shopcart', ['getBuyCount']), }, created() { if (this.$route.params.id) { this.addressId = this.
Web App 开发----卡片视图
m0_58760840的博客
03-26 813
Web App----卡片视图
vue.js三十九—— 项目实战5商品详情页面改造
武汉小喽啰
09-03 1212
1. 首图轮播图 1.1 引入子组件 1.1.1 导入子组件 import swiper from '../subComponents/swiper.vue'; 1.1.2 新建components节点 components:{ swiper } 1.1.3 界面引入组件 在goodsInfo.vue中轮播图区域，class=mui-card-content-inner的div中...
react17.x+MDUI实现todo小案例，react动态添加与删除元素属性
超小少的博客
12-01 800
很长一段时间没有使用react做项目了，一看官网已经更新到17.x版本了，记得今年上班的时候才v13.x，由于平时项目开发用vue的时候居多，对于react长时间不用怕忘了，赶紧写个小案例练练手，使用版本说明： react：v17.0.1 MDUI：v1.0.1 官方描述：MDUI 漂亮、轻量且好用，它能让你更轻松地开发 Material Design 网页应用。官网地址https://www.mdui.org/ 先上效果图： 至于为啥使用MDUI，我也是在头条上刷资讯的时候偶然看见的，因为平时在上面
Dialog MUI
最新发布
03-22
Dialog MUI（Dialog Multi-User Interaction）是一种多用户交互的对话系统。它是基于自然语言处理和人工智能技术的，旨在实现多用户之间的自然对话。Dialog MUI可以同时处理多个用户的输入，并根据上下文和语义理解进行智能回复。 Dialog MUI的主要特点包括： 1. 多用户支持：Dialog MUI可以同时处理多个用户的输入，实现多用户之间的自然对话。 2. 上下文感知：Dialog MUI能够理解对话的上下文，根据之前的对话内容进行回复，使对话更加连贯和准确。 3. 语义理解：Dialog MUI通过自然语言处理技术，能够理解用户的意图和需求，并给出相应的回答或建议。 4. 智能回复：Dialog MUI具备一定的智能能力，可以根据用户的问题或需求给出合理的回答，并提供相关的信息或帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值