<!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>
简易入手SUI
最新推荐文章于 2024-10-18 10:33:18 发布