一、
<!DOCTYPE html> <html> <head> <!-- 所需的Meta标签--> <meta charset="utf-8"> <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>My App</title> <!-- IOS主题样式 --> <link href="https://cdn.bootcss.com/framework7/1.7.1/css/framework7.ios.min.css" rel="stylesheet"> <!-- IOS皮肤颜色样式 --> <link href="https://cdn.bootcss.com/framework7/1.7.1/css/framework7.ios.colors.min.css" rel="stylesheet"> <!-- 自定义应用样式--> <link rel="stylesheet" href="path/to/my-app.css"> </head> <body> <!-- 全屏幕模式的状态栏(PhoneGap) --> <div class="statusbar-overlay"></div> <!-- 视图--> <div class="views"> <!-- 主视图，必须有 "view-main" 类名 --> <div class="view view-main"> <!-- 顶部导航栏--> <div class="navbar"> <div class="navbar-inner"> <!-- 标题内元素如果需要移入移出的动画效果，添加"sliding"类，通常情况下，返回箭头无需添加动画，标题可以选择性添加，如不添加效果为淡入淡出。--> <div class="center sliding">标题</div> </div> </div> <!-- 页面的容器，因为我们使用固定的导航栏和工具栏，需要添加"navbar-through"、"toolbar-through"类--> <div class="pages navbar-through toolbar-through"> <!-- 页面, "data-page"包含了页面名，属性值里不能带横线"-"。--> <div data-page="index" class="page"> <!-- 滚动页面内容 --> <div class="page-content"> <p>Page content goes here</p> <!-- 链接到其他页，这里需要注意的是，framework7里面的a标签经过了特殊处理，如果是链接到外部页面，下载文件，或触发JS函数等，需要添加“external”类，已脱离框架默认设置--> <a href="about.html">About app</a> </div> </div> </div> <!-- 底部工具栏--> <div class="toolbar"> <div class="toolbar-inner"> <!-- 工具栏链接 --> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> </div> </div> <!-- Path to Framework7 Library JS--> <script src="https://cdn.bootcss.com/framework7/5.0.0-beta.12/js/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>