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=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0