利用前端基础制作html开关图标


本文摘自PHP中文网,作者V,侵删。

我们先来看下效果图:

df7e11f07057c578f309813574250f0.png

(学习视频分享: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 input只输入数字怎么设置

Html中的h1是多大像素

Html keygen标签怎么用

Html中,如何用style添加属性

Html的<thead>标签

Html中的注释怎么写?Html中的注释符号又是什么?(附实例)

怎么在Html页面写css样式表

Html dl标签怎么用

Html中怎么把div居中

Html中水平线标注与代码注释应该如何使用

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...