[MUI专题] 优化标题栏

Posted 2021-08-31 算法与编程之美

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

前言

三步搭建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>