转自https://www.cnblogs.com/Dark-fire-liehuo/p/10429476.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> </head> <body> <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative mui-scroll-wrapper mui-slider-indicator"> <div class="mui-scroll"> <a href="#m1" class="mui-control-item mui-active">新闻</a> <a href="#m2" class="mui-control-item">政治</a> <a href="#m3" class="mui-control-item">娱乐</a> <a href="#m4" class="mui-control-item">推荐</a> <a href="#m5" class="mui-control-item">健身</a> <a href="#m6" class="mui-control-item">文学</a> <a href="#m7" class="mui-control-item">天文</a> <a href="#m8" class="mui-control-item">地理</a> <a href="#m9" class="mui-control-item">数学</a> </div> </div> <div class="mui-control-content mui-active" id="m1"> 你好啊， </div> <div class="mui-control-content" id="m2"> 你在吗， </div> <div class="mui-control-content" id="m3"> 你累吗， </div> <div class="mui-control-content" id="m4"> 你好啊， </div> <div class="mui-control-content" id="m5"> 你在吗， </div> <div class="mui-control-content" id="m6"> 你累吗， </div> <div class="mui-control-content" id="m7"> 你好啊， </div> <div class="mui-control-content" id="m8"> 你在吗， </div> <div class="mui-control-content" id="m9"> 你累吗， </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script> </body> </html>