基于Python 优化 MUI标题栏
作者:衡辉 时间:2022-10-31 17:12:49
本文转自微信公众号:"算法与编程之美"
一、前言
三步搭建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,标题栏,优化
0
投稿
猜你喜欢
谈一谈bootstrap响应式布局
2023-08-22 20:17:39
Centos8安装mysql8的详细过程(免安装版/或者二进制包方式安装)
2024-01-27 02:51:17
.img/.hdr格式转.nii格式的操作
2023-08-25 04:56:14
python列表中常见的一些排序方法
2023-08-17 08:48:45
javascript 函数声明与函数表达式的区别介绍
2024-04-23 09:08:50
python 装饰器重要在哪
2023-12-30 12:13:29
Flask 数据库集成的介绍
2023-07-15 09:28:20
div、section、article 的区别
2011-02-26 15:39:00
MSSQL监控数据库的DDL操作(创建,修改,删除存储过程,创建,修改,删除表等)
2024-01-19 07:54:03
python Matplotlib数据可视化(1):简单入门
2022-05-11 19:43:16
Python求两个字符串最长公共子序列代码实例
2021-01-13 20:49:08
c#数据绑定之向查询中添加参数(.Net连接外部数据库)
2024-01-25 00:59:03
python免杀技术shellcode的加载与执行
2021-10-27 16:25:06
Python与C语言分别完成排序流程
2023-04-19 08:26:24
二十八法优化SQL Server数据库查询
2010-07-02 20:56:00
Python实现简单生成验证码功能【基于random模块】
2022-12-10 18:19:58
jasypt 集成SpringBoot 数据库密码加密操作
2024-01-26 03:34:48
pytorch模型的保存和加载、checkpoint操作
2022-07-14 00:36:20
vue.js实现含搜索的多种复选框(附源码)
2024-05-13 09:11:00
python验证身份证信息实例代码
2022-11-19 13:36:24