html+css登陆注册页面 简约
时间: 2023-08-30 11:00:58 浏览: 59
HTML和CSS是前端开发中的两种基本技术,可以用来创建简约的登录注册页面。
登录页面一般包括一个登录表单,其中包含用户名和密码的输入框,以及一个登录按钮。
注册页面一般包括一个注册表单,其中包含用户名、密码和确认密码的输入框,以及一个注册按钮。
在HTML中,可以使用```<form>```标签创建表单,用```<input>```标签创建输入框,用```<button>```标签创建按钮。使用CSS可以设置表单和输入框的样式,例如设置宽度、边框样式、背景颜色等。
以下是一个使用HTML和CSS创建简约登录注册页面的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录注册页面</title>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<h2>登录</h2>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<form>
<h2>注册</h2>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="password" placeholder="确认密码">
<button type="submit">注册</button>
</form>
</body>
</html>
```
以上示例中,使用了```<form>```标签创建了两个表单,使用了```<input>```标签创建输入框,使用了```<button>```标签创建登录和注册按钮。通过CSS的样式设置,达到了简约的登录注册页面效果。