基于Python 优化 MUI标题栏,


目录
  • 一、前言
  • 二、问题描述
  • 三、解决方案
    • 1.  创建一个带返回键标题栏
    • 2.更改标题栏的背景颜色
    • 3.更改标题栏的字体颜色
    • 4.更改标题栏的字体
  • 四、结语

    本文转自微信公众号:"算法与编程之美"

    一、前言

    三步搭建MUI页面主框架法包括新建含muiHTML文件、输入mheader(标题栏)、输入mbody(主体)。一个特色鲜明MUI界面无疑是能够吸引用户的关键之一,这利用cssJavaScript可以很快进行实现,但是同时对于初学者来说也是困难的,这就需要几个简单的小技巧实现页面美化。

    二、问题描述

    在将基本框架搭好以后,如何从一众手机界面中脱颖而出,如何简单快捷的实现页面美化成为一个必须思考的问题。下面小编将以带返回键的标题栏为例,为大家整理了几个优化小方法。

    三、解决方案

    在进行标题栏美化时只需要借助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更改字体颜色以及字体>
    
    

    四、结语

    在对标题栏进行样式设计以后,针对底部选项卡、段落、加载按钮等可以使用相同的方法进行字体和背景颜色的更改。当然这种简单的办法也只能做很小的改变,要真正将自己的软件界面格调提高,cssJavaScript的学习是必须进行的。

    到此这篇关于基于Python 优化 MUI标题栏的文章就介绍到这了,更多相关MUI标题栏优化内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!

    您可能感兴趣的文章:
    • 基于python使MUI登录页面的美化
    • 基于Python实现MUI侧滑菜单a标签跳转
    • 基于python实现MUI区域滚动

    评论关闭