HTML代码如下:

<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>

引入JS:<script src="../js/mui.min.js"></script>

引入CSS:<link rel="stylesheet" href="../css/mui.min.css">

主要CSS修改说明:

.mui-switch{width:4.6em;height: 1.6em;}
.mui-switch .mui-switch-handle{width:1.3em;height: 1.3em;line-height: 1.6em; }
.mui-switch:before{
font-size: 9pt;
position: absolute;
top: -0.2em;
right: 0.7em;
content: 'Off';
text-transform: uppercase;
color: #999;
}

效果:

MUI学习04-开关按钮的更多相关文章

  1. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  2. JavaScript学习04 对象

    JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...

  3. Java虚拟机JVM学习04 类的初始化

    Java虚拟机JVM学习04 类的初始化 类的初始化 在初始化阶段,Java虚拟机执行类的初始化语句,为类的静态变量赋予初始值. 在程序中,静态变量的初始化有两种途径: 1.在静态变量的声明处进行初始 ...

  4. Thinkphp学习04

    原文:Thinkphp学习04 一.ThinkPHP 3 的输出      (重点) a.通过 echo 等PHP原生的输出方式在页面中输出 b.通过display方法输出   想分配变量可以使用as ...

  5. JVM学习04:类的文件结构

    JVM学习04:类的文件结构 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. 类的文件结构知识要点Xmind梳理

  6. mui学习

      改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...

  7. vue学习04 v-on指令

    vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...

  8. Mybatis学习04

    title: Mybatis学习04 date: 2020-01-20 21:48:00 tags:Mybatis学习的第四篇笔记 这次的笔记主要是mybatis中的注解 <!--more--& ...

  9. mui学习记录

    1.页面间传值 2.mui如何增加自定义icon图标 http://ask.dcloud.net.cn/article/128 3.设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇) h ...

  10. C语言范例学习04

    第三章 算法 前言:许多人对算法的看法是截然不同的,我之前提到过了.不过,我要说的还是那句话:算法体现编程思想,编程思想指引算法. 同时,有许多人认为简单算法都太简单了,应当去学习一些更为实用的复杂算 ...

随机推荐

  1. java运算符-逻辑、三元运算符

    1.逻辑运算符 逻辑运算符,它是用于布尔值进行运算的,运算的最终结果为布尔值true或false. 运算符 运算规则 范例 结果 & 与 false&true False | 或 fa ...

  2. ajax后台输出有红点

    转自 百度了很多,说有utf8的bom头,通过dw,sublime软件,各种清除格式无果. 后来直接在返回结果之前,执行一下ob_clean(); 完美解决问题

  3. 【NOI2017】泳池

    题解: 满分的笛卡尔树以后再学吧.. 40分还是比较好想的 但是状态挺复杂的 直接贴代码了 代码: #include <bits/stdc++.h> using namespace std ...

  4. python2 python3 转换,兼容

    0. 1.参考 https://docs.python.org/3/library/urllib.html urllib is a package that collects several modu ...

  5. C# 之 日常问题积累(一)

    1.响应在此上下文中不可用(Response). 异常:响应在此上下文中不可用 产生异常的过程:在asp.net程序中添加了一个 类.cs ,其中有一段代码如下 : Response.ClearCon ...

  6. 大数据——hbase

    进入hbase hbase shell 部分命令清单 查询服务器状态   status 查询hbase版本   version 1. 创建一个表 create 'table1', 'tab1_id', ...

  7. Echarts官网展示

    1.参考实例 http://echarts.baidu.com/examples/ 点击去的效果: 2.配置项手册 http://echarts.baidu.com/option.html#title ...

  8. IEnumerable 与 IEnumerable<T>

    转自:https://blog.csdn.net/qq_21419015/article/details/80495322 IEnumerable 和IEnumerable<T> 接口在 ...

  9. JAVA项目中常用的异常处理情况

    1.数学运算异常( java.lang.arithmeticexception) 程序中出现了除以零这样的运算就会出这样的异常,对这种异常,大家就要好好检查一下自己程序中涉及到数学运算的地方,公式是不 ...

  10. 记录一个chrome 65渲染的bug

    前段时间发现一个chrome 65+的BUG(chrome已更新到66,BUG仍然存在),一个元素同时使用了以下样式(失去焦点和css3的Z轴平移0deg),渲染异常 /*bug style*/ fi ...