您的位置：首页 > 其它

页面各部分颜色设置及底部选项卡页面布置

2017-09-13 15:14 399 查看

1. 设置系统状态栏背景色：

plus.navigator.setStatusBarBackground

2. 整页背景色的设置

html文件中：

<body class="own-gray-color">

css文件中：设置自定义类背景颜色

.own-gray-color {
background-color: #EBEBF1;
}

3.标题文字颜色和标题背景色的设置
html文件中：为背景自定义类own-main-background-color，标题的类为mui-title

<style type="text/css">

.mui-bar-nav .mui-title {
color: white;
}
</style>
<header class="mui-bar mui-bar-nav own-main-background-color">
<h1 id="nav-title" class="mui-title">标题</h1>
</header>

css文件中：设置自定义类own-main-background-colorde 背景颜色

.own-main-background-color {
background-color: #41cea9;
}

4. 底部选项卡页面布置、选中项文字颜色和图标颜色的设置

选中项属于mui-active类，图标属于mui-icon类，文字属于mui-tab-laber类，定义样式时，必须像如下代码这样的写法列出mui-active、mui-icon、mui-tab-laber，否则不能正确设置。

<style type="text/css">
.mui-active .mui-icon,
.mui-active .mui-tab-label {
color: #41cea9;
}
</style>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="baritemHtml/home.html">
<span class="mui-icon iconfont icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="baritemHtml/category.html">
<span class="mui-icon iconfont icon-fenlei"></span>
<span class="mui-tab-label">分类</span>
</a>
<a class="mui-tab-item" href="baritemHtml/xinyuandan.html">
<span class="mui-icon iconfont icon-xinyuandan"></span>
<span class="mui-tab-label">心愿单</span>
</a>
<a class="mui-tab-item" href="baritemHtml/cart.html">
<span class="mui-icon iconfont icon-cart"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item" href="baritemHtml/mine.html">
<span class="mui-icon iconfont icon-wode"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>

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

标签：

相关文章推荐

新的分享

章节导航