本文轉(zhuǎn)自微信公眾號(hào)："算法與編程之美"

一、

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

二、問題描述

在將基本框架搭好以后，如何從一眾手機(jī)界面中脫穎而出，如何簡單快捷的實(shí)現(xiàn)頁面美化成為一個(gè)必須思考的問題。下面小編將以帶返回鍵的標(biāo)題欄為例，為大家整理了幾個(gè)優(yōu)化小方法。

三、解決方案

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

1. 創(chuàng)建一個(gè)帶返回鍵標(biāo)題欄

<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.更改標(biāo)題欄的背景顏色

<headerclass="mui-barmui-bar-nav"style="background:yellowgreen;"  >
<!直接使用style添加頁面背景顏色>

3.更改標(biāo)題欄的字體顏色

<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.更改標(biāo)題欄的字體

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

四、結(jié)語

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

到此這篇關(guān)于基于Python 優(yōu)化 MUI標(biāo)題欄的文章就介紹到這了,更多相關(guān)MUI標(biāo)題欄優(yōu)化內(nèi)容請(qǐng)搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站！

版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。