简易入手SUI

最新推荐文章于 2024-11-19 14:03:04 发布

师远鹏

最新推荐文章于 2024-11-19 14:03:04 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： SUI

本文链接：https://blog.youkuaiyun.com/shipeng22022/article/details/49662335

SUI 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            完整页面
        </title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="shortcut icon" href="/favicon.ico">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="//g.alicdn.com/sui-mobile/sm/0.5.0/css/sm.min.css">
        <link rel="stylesheet" href="//g.alicdn.com/sui-mobile/sm/0.5.0/css/sm-extend.min.css">
        <link rel="stylesheet" href="/your-css-file.css">
    </head>
    
    <body>
        <!-- 你的html代码 -->
<div class="page">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="/demos/card"
        data-transition='slide-out'>
            <span class="icon icon-left">
            </span>
            返回
        </a>
        <h1 class="title">
            我的生活
        </h1>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item active" href="#">
            <span class="icon icon-home">
            </span>
            <span class="tab-label">
                首页
            </span>
        </a>
        <a class="tab-item" href="#">
            <span class="icon icon-me">
            </span>
            <span class="tab-label">
                我
            </span>
        </a>
        <a class="tab-item" href="#">
            <span class="icon icon-star">
            </span>
            <span class="tab-label">
                收藏
            </span>
        </a>
        <a class="tab-item" href="#">
            <span class="icon icon-settings">
            </span>
            <span class="tab-label">
                设置
            </span>
        </a>
    </nav>
    <div class="content">
        <!-- 这里是页面内容区 -->
    </div>
</div>

     <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js'
        charset='utf-8'>
        </script>
        <script type='text/javascript' src='//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm.min.js'
        charset='utf-8'>
        </script>
        <script type='text/javascript' src='//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm-extend.min.js'
        charset='utf-8'>
        </script>
        <script src="/your-js-file.js">
        </script>
    </body>

</html>