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