设为首页收藏本站

切换到窄版

鱼C论坛»论坛 › 技术交流 › Web开发 › 一个简单的登录窗口(无交互纯视觉)

发新帖

查看: 3440|回复: 1

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

发表于 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>

复制代码

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com

回复

使用道具举报

发表于 2021-6-16 16:54:18 | 显示全部楼层

不错

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com

回复

使用道具举报

发新帖

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 12:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表