本文概述

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

推荐阅读

• 

  手机电话录音怎么设置
• 

  无限极的护肤品怎么样？
• 

  赣州客家情精品旅游线路2023 赣州客家情精品旅游线路2023年
• 

  东莞市国税局电话 东莞市国税局官网
• 

  毛栗怎么储存方法 毛栗怎么保存方法
• 

  大姨妈不能吃什么水果与饮品 大姨妈不能吃什么水果与饮品有关
• 

  可以自己给自己寄快递吗
• 

  “吃得越饱，死得越早”，有没有科学依据？权威机构研究出来了
• 

  春困抵挡不住？5款花茶帮你提提神
• 

  2 春天每日梳头一百下可明目健脑
• 

  8th怎么读 1st怎么读
• 

  山羊一年下几个宰 「山羊的屠宰方法」
• 

  焙烧过程中加煤粉的主要作用 焙烧过程中加煤粉的主要作用是
• 

  乐播少儿动漫怎样取消 乐看儿童动画 如何关闭续订，乐看儿童动画 如何关闭续订功能
• 

  哈尔滨加油站事件，哈尔滨加油站招聘
• 

  出国留学需要的条件
• 

  中国银行理财产品收益率_中国银行 理财
• 

  曲阜饭店家常菜哪家好
• 

  不思议迷宫撒旦王组合怎么玩 撒旦王稳100层打法攻略
• 

  电脑怎么添加打印机

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