本文摘自PHP中文网，作者V，侵删。
我们先来看下效果图：
（学习视频分享：html视频教程）
html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>开关图标</title>
</head>
<body>
<div>
<div>
<input type="checkbox" id="toggle-button" name="switch" οnclick="SwitchClick()" checked>
<label for="toggle-button">
<span></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</div>
</body>
</html>
|
css样式：
阅读剩余部分
相关阅读 >>
Html只读属性是什么
Html font标签是什么？<font>标签的属性的详细介绍
Html文本标签
在Html中如何实现图片排版
Html中如何将文字分三栏
Html<input>标签怎么用
Html如何禁止页面缩放
Html读取不了css样式怎么办
Html怎么改变鼠标形状
Html你一定要知道的优化技巧
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 利用前端基础制作html开关图标
