HTML&CSS：领导说这个表单很不错，快来体验吧

这段代码是一个简单的HTML页面，它包含了一些CSS样式来美化两个输入框（用于用户名和密码）

演示效果

HTML&CSS

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端Hardy</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
        }

        .container {
            width: 500px;
            height: 260px;
            background-color: #212121;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .inputGroup {
            font-family: 'Segoe UI', sans-serif;
            margin: 1em 0 1.5em 0;
            max-width: 190px;
            position: relative;
        }

        .inputGroup input {
            font-size: 100%;
            padding: 0.8em;
            outline: none;
            border: 2px solid rgb(200, 200, 200);
            background-color: transparent;
            border-radius: 20px;
            width: 100%;
            color: #fff;
        }

        .inputGroup label {
            font-size: 100%;
            position: absolute;
            left: 0;
            margin-left: 0.5em;
            pointer-events: none;
            transition: all 0.3s ease;
            color: #fff;
        }

        .inputGroup :is(input:focus, input:valid)~label {
            transform: translateY(-200%) scale(.9);
            margin: 0em;
            margin-left: 1.3em;
            padding: 0.4em;
            background-color: #212121;
        }

        .inputGroup :is(input:focus, input:valid) {
            border-color: rgb(150, 150, 200);
        }

        input::placeholder {
            color: #fff;
            font-size: 12px;
            text-align: center;
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inputGroup">
            <input type="text" required="" autocomplete="off" placeholder="输入用户名">
            <label for="name">用户名</label>
        </div>
        <div class="inputGroup">
            <input type="text" required="" autocomplete="off" placeholder="输入密码">
            <label for="name">密码</label>
        </div>
    </div>


</body>

</html>

container: 一个容器，用于居中显示输入框。设置容器的尺寸、背景颜色、圆角和布局。
inputGroup: 包含一个输入框和标签的组。设置输入组的字体、边距和最大宽度。
input type="text": 用户名输入框，设置为必填且不允许浏览器自动填充。
label for="name": 用户名的标签，用于提高可访问性。
inputGroup：包含密码输入框和标签，结构与用户名输入框相同
.inputGroup input: 设置输入框的字体大小、内边距、边框和背景颜色。
.inputGroup label: 设置标签的字体大小、位置和过渡效果。
.inputGroup :is(input:focus, input:valid)~label: 当输入框获得焦点或输入有效时，改变标签的位置、大小和背景颜色。
.inputGroup :is(input:focus, input:valid): 当输入框获得焦点或输入有效时，改变边框颜色。
input::placeholder: 设置占位符文本的颜色、字体大小、文本对齐和透明度。