本文轉自微信公眾號："算法與編程之美"

一、前言

三步搭建MUI頁面主框架法包括新建含mui的HTML文件、輸入mheader（標題欄）、輸入mbody（主體）。一個特色鮮明MUI界面無疑是能夠吸引用戶的關鍵之一，這利用css和JavaScript可以很快進行實現，但是同時對于初學者來說也是困難的，這就需要幾個簡單的小技巧實現頁面美化。

二、問題描述

在將基本框架搭好以后，如何從一眾手機界面中脫穎而出，如何簡單快捷的實現頁面美化成為一個必須思考的問題。下面小編將以帶返回鍵的標題欄為例，為大家整理了幾個優化小方法。

三、解決方案

在進行標題欄美化時只需要借助style中的background(背景顏色)、color(字體顏色)、font-family(字體樣式)、font-size(字體大小)即可。下面是進行標題欄美化的具體操作步驟，除第一步以外其他的操作可隨意調換順序。

1. 創建一個帶返回鍵標題欄

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

<a class="mui-action-back  mui-icon mui-icon-left-nav mui-pull-left"></a>

 <h1>算法與編程之美</h1></header>

2.更改標題欄的背景顏色

<headerclass="mui-barmui-bar-nav"style="background:yellowgreen;"  >

<!直接使用style添加頁面背景顏色>   

3.更改標題欄的字體顏色

<a class="mui-action-back mui-icon  mui-icon-left-nav mui-pull-left" style="color: white;"></a>

<h1 style="color:  white;" >算法與編程之美</h1><!style更改字體顏色以及字體>

4.更改標題欄的字體

<h1 style="color:  white;font-family: '楷體';" >算法與編程之美</h1><!style更改字體顏色以及字體>

四、結語

在對標題欄進行樣式設計以后，針對底部選項卡、段落、加載按鈕等可以使用相同的方法進行字體和背景顏色的更改。當然這種簡單的辦法也只能做很小的改變，要真正將自己的軟件界面格調提高，css和JavaScript的學習是必須進行的。

關于基于Python 優化 MUI標題欄的文章就介紹至此，更多相關MUI標題欄優化內容請搜索服務器之家以前的文章，希望大家多多支持服務器之家！