1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <!-- 适配手机端代码 -->
    6.         <meta name="viewport"
    7.             content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    8.         <title>咨询中心</title>
    9.         <!-- 引入的是mui中的js -->
    10.         <script src="js/mui.min.js"></script>
    11.         <!-- 引入的是mui中的css -->
    12.         <link href="css/mui.min.css" rel="stylesheet" />
    13.         <!-- 项目初始化 -->
    14.         <script type="text/javascript" charset="utf-8">
    15.             mui.init();
    16.         </script>
    17.         <!-- 引入刚才新建的css -->
    18.         <link rel="stylesheet" href="./css/common.css">
    19.         <style>
    20.             .banner img {
    21.                 width: 100%;
    22.             }
    23.             .mui-bar{
    24.                 /* 取消定位 */
    25.                 position: static;
    26.             }
    27.         </style>
    28.     </head>
    29.     <body>
    30.         <!-- header是一个标签，是html5版本中的一个标签，是个块元素 -->
    31.         <header class="mui-bar mui-bar-nav">
    32.             <a href="" class="left-a">
    33.                 <img src="./images/t.png" alt="">
    34.             </a>
    35.             <h1 class="mui-title">信息服务</h1>
    36.             <a href="" class="right-a">
    37.                 <img src="./images/t1.png" alt="">
    38.             </a>
    39.         </header>
    40.         <div class="box-content">
    41.             <div class="banner">
    42.                 <img src="./images/top1.png" alt="">
    43.             </div>
    45.             <!-- 复制tab-bar中的55-239行 ，删除没用的代码 -->
    46.             <!-- 切换按钮 -->
    47.             <nav class="mui-bar mui-bar-tab">
    48.                 <a class="mui-tab-item mui-active" href="#yuzhaoyong">
    49.                     <span class="mui-tab-label">首页</span>
    50.                 </a>
    51.                 <a class="mui-tab-item" href="#jiangjunjie">
    52.                     <span class="mui-tab-label">消息</span>
    53.                 </a>
    54.                 <a class="mui-tab-item" href="#fangliwei">
    55.                     <span class="mui-tab-label">通讯录</span>
    56.                 </a>
    57.                 <a class="mui-tab-item" href="#shihaoran">
    58.                     <span class="mui-tab-label">设置</span>
    59.                 </a>
    60.             </nav>
    61.             <!-- 切换显示的内容 -->
    62.             <div class="mui-content">
    63.                 <div id="yuzhaoyong" class="mui-control-content mui-active">
    64.                     1
    65.                 </div>
    66.                 <div id="jiangjunjie" class="mui-control-content">
    67.                     2
    68.                 </div>
    69.                 <div id="fangliwei" class="mui-control-content">
    70.                     3
    71.                 </div>
    72.                 <div id="shihaoran" class="mui-control-content">
    73.                     4
    74.                 </div>
    75.             </div>
    77.         </div>
    78.         <div class="mui-content">
    79.             <ul class="mui-table-view mui-grid-view mui-grid-9">
    80.                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
    81.                         <img src="./images/dd.png" alt="">
    82.                         <div class="mui-media-body blue">资讯</div>
    83.                     </a></li>
    84.                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
    85.                         <img src="./images/d11.png" alt="">
    86.                         <div class="mui-media-body">服务</div>
    87.                     </a></li>
    88.                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
    89.                         <img src="./images/d2.png" alt="">
    90.                         <div class="mui-media-body">消息</div>
    91.                     </a></li>
    92.                 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
    93.                         <img src="./images/d3.png" alt="">
    94.                         <div class="mui-media-body">我的</div>
    95.                     </a></li>
    96.             </ul>
    97.         </div>
    98.     </body>
    99. </html>