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

来源：互联网发布：美工从基础到高级编辑：程序博客网时间：2024/06/04 18:21

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

plus.navigator.setStatusBarBackground

2. 整页背景色的设置

html文件中：

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>

阅读全文

0 0