一个简单的登录窗口(无交互纯视觉)

feihu233 · 发表于 2021-6-16 16:45:16

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

用了Grid布局来搞文字块的对齐,比table看着舒服,未来可能性也高
但是有个问题,就是为什么#login_main{ form{ display:grid;}}这么设置时grid布局就会失效?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    #login_main{
        position: absolute;
        left: 50%; top: 35%;
        transform: translate(-50%,-50%);
        background-color: white;
    }
    #login_main form{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        justify-items: end;
    }
</style>
<title>泥巴冒险-登录</title>
</head>

<body>
<fieldset id="login_main"><legend>注册/登录</legend>
    <form id="login">
        <label for="userName">用户名: </label><input type="text" name="userName">
        <label for="passWord">密码: </label><input type="password" name="passWord">
    </form>
    <button type="submit" form="#login">登录</button>
    <button type="reset" form="#login">重置密码</button><br />
注册即代表同意<a name="userAgreement" href="javascript:read_userAgreement()">用户协议</a>
</fieldset>
</body>
</html>

18537180361 · 发表于 2021-6-16 16:54:18

不错

账号		自动登录	找回密码
密码			立即注册

[技术交流] 一个简单的登录窗口(无交互纯视觉)

马上注册，结交更多好友，享用更多功能^_^