输入框,单选框,按钮程序案例1测试(一看就懂)

 样式的加入,类似设计了。

   效果:

 

代码

 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: red;
        }

        a:visited {
            color: green;
        }

        input {
            margin: 30px 10px;
        }

        input[type=text]:focus {
            box-shadow: inset 0px 0px 10px green;
        }

        input:disabled {
            opacity: 0.5;

        }

        input:checked {
            background: hotpink;
            color: black;
            box-shadow: inset 0px 0px 10px hotpink;
        }
    </style>



</head>

<body>

    <a href="https://www.cnblogs.com/tianma3798/p/15022761.html">伪类整理</a>

    <form action="">

        <!-- 这是2个输入框 -->
        <input type="text">
        <br>
        <input type="text">
        <br>

        <!-- 按钮 -->
        <input type="button" value="被禁用的按钮" disabled>
        <br>

        <!-- 单选框 -->
        <input type="checkbox" value="选项a" checked>选项A
        <input type="checkbox" value="选项b"> 选项B
    </form>

</body>

</html>
 

 

posted @ 2021-07-18 11:39  优敏行  阅读(110)  评论(0)    收藏  举报