本文概述

• 卡片HTML布局
• 卡片HTML布局示例
• 卡片列表视图

Framework7卡用于包含单个主题的组织信息, 例如照片, 链接和文本。
卡主要与列表视图一起使用, 以包含和组织你的信息。
有7种类型的framework7卡：

1. 卡片HTML布局：基本的卡片HTML布局使用卡片类来安排其项目。
2. 带卡的列表视图：通过将卡列表类添加到< div class =“ list-block”> , 可以将卡用作列表视图元素。

卡片HTML布局基本的卡片HTML布局：

< div class="card"> < div class="card-header"> Header< /div> < div class="card-content"> < div class="card-content-inner"> Card content< /div> < /div> < div class="card-footer"> Footer< /div> < /div>

这里：
< div class =“ card”> ：卡片容器

• < div class =“ card-header”> ：卡标题。主要用于显示卡标题。可选的。
• < div class =“ card-footer”> ：卡片页脚用于一些其他信息或自定义操作/链接。可选的。
• < div class =“ card-content”> ：卡片内容的主要容器。需要。
=

< div class =“ card-content-inner”> ：附加的内部包装器。用于为卡片内容添加其他填充。可选的。
卡的HTML布局包含几个类：

指数	类	描述
1)	cards	它是卡容器。
2)	card-header	它是可选的卡头, 用于显示卡标题。
3)	card-footer	它是可选的, 用于指定其他信息或自定义链接。
4)	card-content	它是卡片内容的主要容器, 是必需的。
5)	card-content-inner	它是可选的附加内部包装, 用于对内容进行附加填充。

注意：卡片页眉和卡片页脚都具有flexbox布局, 其中项目具有中心垂直对齐。如果要将项目排序到页眉/页脚的顶部或底部, 可以使用valign属性。卡片HTML布局示例

< !DOCTYPE html> < html class="with-statusbar-overlay"> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Card HTML Layout< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < link rel = "stylesheet" href = "http://www.srcmini.com/custom.css" /> < /head> < body> < style> .demo-card-header-pic .card-header {height:40vw; background-size:cover; background-position:center; }.facebook-card .card-header {display:block; padding:10px; }.facebook-card .facebook-avatar {float:left; }.facebook-card .facebook-name {margin-left:44px; font-size:14px; font-weight:500; }.facebook-card .facebook-date {margin-left:44px; font-size:13px; color:#8e8e93; }.facebook-card .card-footer {background:#fafafa; }.facebook-card .card-footer a {color:#81848b; font-weight:500; }.facebook-card .card-content img {display:block; }.facebook-card .card-content-inner {padding:15px 10px; }< /style> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Card HTML Layout< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Simple Cards< /div> < div class = "card"> < div class = "card-content"> < div class = "card-content-inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /div> < /div> < /div> < div class = "card"> < div class = "card-header"> Card header< /div> < div class = "card-content"> < div class = "card-content-inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /div> < /div> < div class = "card-footer"> Card Footer< /div> < /div> < div class = "card"> < div class = "card-content"> < div class = "card-content-inner"> Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. < /div> < /div> < /div> < div class = "content-block-title"> Styled Cards< /div> < div class = "card demo-card-header-pic"> < div style = "background-image:url(/framework7/images/nature.jpg)" valign = "bottom" class = "card-header color-white no-border"> Beautiful Mountains< /div> < div class = "card-content"> < div class = "card-content-inner"> < p class = "color-gray"> Posted on May 20, 2015< /p> < p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /p> < /div> < /div> < div class = "card-footer"> < a href = "http://www.srcmini.com/#" class = "link"> Like< /a> < a href = "http://www.srcmini.com/#" class = "link"> Comment< /a> < /div> < /div> < div class = "card facebook-card"> < div class = "card-header"> < div class = "facebook-avatar"> < img src = "http://www.srcmini.com/framework7/images/cat.jpg" width = "34" height = "34"> < /div> < div class = "facebook-name"> John Doe< /div> < div class = "facebook-date"> Monday at 2:15 PM< /div> < /div> < div class = "card-content"> < div class = "card-content-inner"> < p> What a nice view!!< /p> < img src = "http://www.srcmini.com/framework7/images/blue_hills1.jpg" width = "100%"> < p class = "color-gray"> Likes: 112Comments: 43< /p> < /div> < /div> < div class = "card-footer"> < a href = "http://www.srcmini.com/#" class = "link"> Like< /a> < a href = "http://www.srcmini.com/#" class = "link"> Comment< /a> < a href = "http://www.srcmini.com/#" class = "link"> Share< /a> < /div> < /div> < div class = "content-block-title"> Cards with List View< /div> < div class = "card"> < div class = "card-content"> < div class = "list-block"> < ul> < li> < a href = "http://www.srcmini.com/#" class = "item-link item-content"> < div class = "item-media"> < iclass = "icon icon-form-name"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Link 1< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link item-content"> < div class = "item-media"> < i class = "icon icon-form-name"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Link 2< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link item-content"> < div class = "item-media"> < i class = "icon icon-form-name"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Link 3< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link item-content"> < div class = "item-media"> < i class = "icon icon-form-name"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Link 4< /div> < /div> < /a> < /li> < li> < a href = "http://www.srcmini.com/#" class = "item-link item-content"> < div class = "item-media"> < i class = "icon icon-form-name"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Link 5< /div> < /div> < /a> < /li> < /ul> < /div> < /div> < /div> < div class = "card"> < div class = "card-header"> Tutorials:< /div> < div class = "card-content"> < div class = "list-block media-list"> < ul> < li class = "item-content"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic.jpg" width = "44"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Java< /div> < /div> < div class = "item-subtitle"> Sonoo Jaiswal< /div> < /div> < /li> < li class = "item-content"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic3.jpg" width = "44"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Oracle< /div> < /div> < div class = "item-subtitle"> Ajeet Kumar< /div> < /div> < /li> < li class = "item-content"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic2.jpg" width = "44"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Go< /div> < /div> < div class = "item-subtitle"> Nippun Kumar< /div> < /div> < /li> < /ul> < /div> < /div> < div class = "card-footer"> < span> May 1, 2016< /span> < span> 45 comments< /span> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
卡片列表视图通过将cards-list类添加到< div class =“ list-block”> , 可以将卡用作列表视图元素。
例

< !DOCTYPE html> < html class = "with-statusbar-overlay"> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> List View With Cards< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < link rel = "stylesheet" href = "http://www.srcmini.com/custom.css" /> < /head> < body> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> List View With Cards< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "list-block cards-list"> < ul> < li class = "card"> < div class = "card-header"> Card Header< /div> < div class = "card-content"> < div class = "card-content-inner"> Content< /div> < /div> < div class = "card-footer"> Card footer< /div> < /li> < li class = "card"> < div class = "card-header"> Card Header< /div> < div class = "card-content"> < div class = "card-content-inner"> Content< /div> < /div> < div class = "card-footer"> Card footer< /div> < /li> < li class = "card"> < div class = "card-header"> Card Header< /div> < div class = "card-content"> < div class = "card-content-inner"> Content< /div> < /div> < div class = "card-footer"> Card footer< /div> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /body> < /html>

【Framework7卡片】立即测试

推荐阅读

• 

  巴尔扎克的20句经典句子 巴尔扎克名言！
• 

  快手直播打游戏软件，快手直播打游戏软件有哪些
• 

  L850清零后，你的手机还剩下什么？
• 

  路由器怎么设置网页认证，路由器设置网页认证怎么设置
• 

  鲫鱼怎么养不活 养鲫鱼怎么养才不死
• 

  西南风是由什么方向吹向什么方向
• 

  西部假期旅行社的目标市场策略 西部假期旅行社官网
• 

  恶霸幼犬怎么看品相图解
• 

  赵奢是谁的儿子 赵括的父亲
• 

  摄影笔记（三）---日系风（52）
• 

  女性吃白萝卜皮肤好吗
• 

  阿里云高性能云盘 阿里云高性能mysql
• 

  工时计算软件,小时工记账
• 

  母猪喂养方法
• 

  王者荣耀怎样容易抽到王者水晶,为什么凌晨打王者容易输
• 

  电视机免费的影视软件
• 

  降压药|吃沙坦类降压药到底是伤肾还是护肾？本文一文说清
• 

  安卓计步传感器不灵敏,手机放置位置不同会影响传感器检测步骤
• 

  越晚越清晰
• 

  spss 显著性分析 字母,用spss做显著性差异字母

• Framework7 chip布局
• Framework7列表视图
• Framework7进度栏
• Framework7预加载器
• Framework7叠加层
• Framework7网格布局
• Framework7侧面板
• Framework7内容块
• Framework7工具栏