页面各部分颜色设置及底部选项卡页面布置_网页底部颜色怎么设置-优快云博客

本文详细介绍了如何使用HTML和CSS来设置移动应用界面的各种颜色，包括系统状态栏、整页背景、标题文字及背景色，以及底部选项卡的选中项文字和图标颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>