html写一个登陆页面
时间: 2023-10-24 07:06:24 浏览: 71
html登陆页面
以下是一个简单的 HTML 登录页面示例:
```
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 居中 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type=text],
input[type=password] {
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 3px;
box-shadow: 1px 1px 1px #ddd;
width: 100%;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h2>登录</h2>
<label for="username"><b>用户名</b></label>
<input type="text" placeholder="请输入用户名" name="username" required>
<label for="password"><b>密码</b></label>
<input type="password" placeholder="请输入密码" name="password" required>
<input type="submit" value="登录">
</form>
</body>
</html>
```
以上代码创建了一个基本的登录页面,包括用户名和密码输入框,以及提交按钮。您可以将其复制并粘贴到文本编辑器中,然后将其保存为`.html` 文件,以在浏览器中打开。
阅读全文