本文概述

• 卡片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卡片】立即测试

推荐阅读

• 

  中国2.4亿单身狗 中国单身
• 

  抖音社区规则是什么？抖音社区规则在哪找？
• 

  黑化的《童话镇》，却叫人听出眼泪
• 

  抖音短视频赚金币怎么拍视频,抖音短视频怎么拍才会火
• 

  2020清明上河图十字绣150万 清明上河图十字绣价格
• 

  切片值数据分析,数据分析中的切片
• 

  iPhoneX|iPhoneX 以上机型进入 DFU 模式方法
• 

  西门子冰箱加电不制冷怎么办
• 

  佳能纽扣记忆电池 佳能纽扣电池生产地
• 

  附预约操作流程 金华全市出入境窗口试行预约办理制度
• 

  redis数据库管理工具 redis管理工具收费
• 

  敷脚膜后多久开始脱皮
• 

  麻糍是浙江哪里的特产 麻糍是哪里的特产
• 

  洋蓟怎么读 怎么读洋蓟
• 

  如何使用亿速云服务器？ 亿速云服务器怎么使用
• 

  第二张水彩
• 

  水果鸡蛋羹——通便美容抗衰健脑
• 

  汇编语言采用什么语言，汇编语言是什么
• 

  冬天吃燕窝好还是夏天吃好
• 

  博世壁挂炉发出蜂鸣声 博世壁挂炉有嗡嗡的声音

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