使用HBuilder写网页登录页面代码
时间: 2024-05-11 17:19:46 浏览: 7
以下是一个简单的网页登录页面代码示例,使用 HTML、CSS和 JavaScript编写,可以在 HBuilder 中直接创建一个新的 HTML文件并将下面的代码复制粘贴进去即可。
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f2f2f2;
}
.container {
margin: 10% auto;
max-width: 400px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 5px;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #ccc;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-top: 20px;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</div>
</body>
</html>
```
代码中定义了一个登录表单,包括用户名和密码输入框以及一个登录按钮。CSS样式定义了登录表单的样式,包括页面背景颜色、表单容器样式、标题样式、输入框样式和按钮样式等。
请注意,这只是一个简单的演示示例,实际的登录页面可能需要更多的功能和安全性措施。