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. mysql-索引-日志

    索引:基于元数据之上的在某个字段或多个字段取出来,索引是加速读操作的,但对写操作时有副作用的 BTree 索引:抽取出来重新排序,是左前缀索引每一个叶子结点到根结点的距离相同: 哈希索引:基于键查找值 ...

  2. 普林斯顿微积分读本 大纲与重点 (by zzd)

    普林斯顿微积分读本 大纲重点 由于博客园太菜,所以我用图片上传. 当前更新状态:未完待续,挖坑暂时不填了. UPD(2018-07-08): 稍微更一下,加一个本书的某一版本下载链接:https:// ...

  3. SVM:随机产生100个点,建立模型,找出超平面方程——Jaosn niu

    import numpy as np import pylab as pl from sklearn import svm # we create 40 separable points #np.ra ...

  4. P1168 中位数

    P1168 中位数树状数组+二分答案.树状数组就是起一个高效查询比二分出来的数小的有几个. #include<iostream> #include<cstdio> #inclu ...

  5. RabbitMQ实战经验分享

    前言 最近在忙一个高考项目,看着系统顺利完成了这次高考,终于可以松口气了.看到那些即将参加高考的学生,也想起当年高三的自己. 下面分享下RabbitMQ实战经验,希望对大家有所帮助: 一.生产消息 关 ...

  6. linux下安装node踩坑总结

    1.在node官网下载linux二进制文件(确定文件的类型)本文以二进制文件为例 2.放入linux的对应目录下之后: tar -xvf node-v10.15.3-linux-x64.tar.xz ...

  7. 真正“搞”懂http协议01—背景故事

    去年读了<图解HTTP>.<图解TCP/IP>以及<图解网络硬件>但是读了之后并没有什么深刻的印象,只是有了一层模糊的脉络,刚好最近又接触了一些有关http的相关内 ...

  8. ES6+javaScript原型

    Symbol 属性私有化,数据保护 let _gender = Symbol('gender') function Person(name, gender) { this.name = name; t ...

  9. XamarinAndroid组件教程RecylerView动画组件使用动画(2)

    XamarinAndroid组件教程RecylerView动画组件使用动画(2) 如果开发者要为RecylerView的子元素添加动画效果,需要使用RecyclerView类中的SetItemAnim ...

  10. bootstrap图片轮播

    <div class="carousel slide" id="myCarsousel" style="width:790px;"&g ...