一个简单的登录窗口(无交互纯视觉)
用了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>
不错
页:
[1]