您的位置：首页 > 产品设计 > UI/UE

HBuilder 如何模仿微信：标题栏是黑底白字，底部选项卡也是

2016-07-25 15:36 447 查看

如何模仿微信：顶部是黑底白字，底部选项卡也是

→

1：添加顶部mh和底部mt代码

<body>
   <header class="mui-bar mui-bar-nav">

       <h1
class="mui-title">追风筝的人</h1>
   </header>

   <nav class="mui-barmui-bar-tab"
>
       <a
class="mui-tab-itemmui-active"
href="sub1.html">
           <span
class="mui-iconmui-icon-weixin"></span>
           <span
class="mui-tab-label">主页</span>
       </a>
       <a
class="mui-tab-item"href="sub2.html">
           <span
class="mui-iconmui-icon-contact"></span>
           <span
class="mui-tab-label">通讯录</span>
       </a>
       <a
class="mui-tab-item"href="sub3.html"
>
           <span
class="mui-iconmui-icon-paperplane"></span>
           <span
class="mui-tab-label">发现</span>
       </a>
       <a
class="mui-tab-item"href="sub4.html">
           <span
class="mui-iconmui-icon-person"></span>
           <span
class="mui-tab-label">我的</span>
       </a>
       <a
class="mui-tab-item"href="http://baidu.com">
           <span
class="mui-iconmui-icon-qq"></span>
           <span
class="mui-tab-label">QQ</span>
       </a>


   </nav>

</body>

2：在CSS文件夹中新建一个main的css，然后在index.html主页面添加代码
<link
rel="stylesheet"
type="text/css"href="css/mian.css"/>

3: xxx.CSS中添加代码

.mui-bar-nav{
    background-color:
#000000;      /*顶部背景色设置黑色*/
}
.mui-title{
    color: white;
/*顶部字体为白色*/
}
.mui-active.mui-tab-label,.mui-active.mui-icon{
/*.mui-active.mui-tab-label与mui-tab-label之间要加个空格*/
    color:
#2AC845;
/*.mui-active为活动的*/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航