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

2017-09-13 20:45:01来源:CSDN作者:sophiafei_2000人点击

分享

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

plus.navigator.setStatusBarBackground
2. 整页背景色的设置

html文件中:

<body class="own-gray-color"><!--自定义类“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>


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台