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. 2018软工实践作业八之UML设计

    1. 团队信息 队名:小白吃队 成员: 后敬甲 031602409 卢泽明 031602328 蔡文斌 031602301 葛亮 031602617 刘浩 031602423 黄泽 031602317 ...

  2. python之 可迭代 迭代器 生成器

    0. 1.总结 (1) (a)iterable 可迭代(对象) 能力属性 指一个对象能够一次返回它的一个成员,for i in a_list 而不需要通过下标完成迭代. 例子包括所有序列类型(list ...

  3. JMeter非GUI模式下日志介绍

    Creating summariser <summary> Created the tree successfully using /opt/JMeter/TestPlan/test.jm ...

  4. 关于java中的伪共享的认识和解决

    在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素: CPU缓存 网页浏览器为了加快速度,会在本机存缓存以前浏览过 ...

  5. 12px以下字体显示问题

    刚接到广告公司出的设计稿,里面很多内容均是12px以下得字体,现在来总结一下解决办法,方便以后使用 1.使用png图片 但是会影响页面响应速度 2.使用transform: scale(0.x); 注 ...

  6. BZOJ2480 Spoj3105 Mod 数论 扩展BSGS

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2480.html 题目传送门 - BZOJ2480 题意 已知数 $a,p,b$ ,求满足 $a^x≡b ...

  7. 065 updateStateByKey的函数API

    一:使用场景 1.应用场景 数据的累加 一段时间内的数据的累加 2.说明 每个批次都输出自己批次的数据, 这个时候,可以使用这个API,使得他们之间产生联系. 3.说明2 在累加器的时候,起到的效果和 ...

  8. CodeForces - 893C Rumor【并查集】

    <题目链接> 题目大意: 有n个人,其中有m对朋友,现在你有一个秘密你想告诉所有人,第i个人愿意出价a[i]买你的秘密,获得秘密的人会免费告诉它的所有朋友(他朋友的朋友也会免费知道),现在 ...

  9. 004.Ceph块设备基础使用

    一 基础准备 参考<002.Ceph安装部署>文档部署一个基础集群: 新增节点主机名及IP在deploy节点添加解析: [root@deploy ~]# echo "172.24 ...

  10. mybatis查询语句的背后之参数解析

    转载请注明出处... 一.前言 通过前面我们也知道,通过getMapper方式来进行查询,最后会通过mapperMehod类,对接口中传来的参数也会在这个类里面进行一个解析,随后就传到对应位置,与sq ...