framework7实现一个手机端移动端web app示例页面效果代码
代码语言:html
所属分类:布局界面
代码描述:framework7实现一个手机端移动端web app示例页面效果代码
代码标签: framework7 app ios 手机端 移动端
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <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>My App</title> <!-- Path to Framework7 Library CSS--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.ios.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/framework7.ios.colors.min.css"> </head> <body class="bg-grey"> <!-- Status bar overlay for fullscreen mode--> <div class="statusbar-overlay"></div> <!-- Panels overlay--> <div class="panel-overlay"></div> <!-- Left panel with reveal effect--> <div class="panel panel-left panel-reveal"> <div class=""> </div> <div class="list-block"> <ul> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu1</div> </div> </div> </a> </li> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu2</div> </div> </div> </a> </li> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu3</div> </div> </div> </a> </li> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu4</div> </div> </div> </a> </li> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu5</div> </div> </div> </a> </li> <li> <a href="exhibitions.html" class="item-link close-panel bg-transparent"> <div class="item-content"> <div class="item-media"><i class="icon app_icon app_icon__menu"></i></div> <div class="item-inner"> <div class="item-title color-yellow">menu6</div> </div> </div> </a> </li> </ul> </div> </div> <!-- Right panel with cover effect--> <div class="panel panel-right panel-cover"> <div class="content-block"> <p>Right panel content goes here</p> </div> </div> <!-- Views--> <div class="views"> <!-- Your main view, should have "view-main" class--> <div class="view view-main"> <div class="navbar bg-black color-yellow"> <div class="navbar-inner"> <div class="center sliding">.Test App.</div> </div> </div> <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes--> <div class="pages navbar-through toolbar-through"> <!-- Page, data-page contains page name--> <div data-page="index" class="page" data-template="index"> <!-- Scrollable page content--> <div class="page-content bg-grey paddingBottom0"> <div class="content-block margin0"> <a href="#" data-template="about" data-context-name="about" class="item-link item-content"> <div class="item-inner"> <div class="item-title">About Me</div> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0