给我一段代码用html和css实现整体布局,颜色搭配,动效,视觉效果都优秀美观的登录注册网页
时间: 2024-05-07 12:17:09 浏览: 9
好的,以下是一个简单的登录注册网页的HTML和CSS代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login/Register Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container">
<form>
<h2>Login</h2>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<form>
<h2>Register</h2>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</div>
</div>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #292929;
background-image: linear-gradient(to bottom right, #292929, #404040);
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.form-container {
background-color: #f2f2f2;
border-radius: 5px;
padding: 40px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
input[type=text], input[type=email], input[type=password] {
display: block;
width: 100%;
padding: 10px 15px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
background-color: #e8e8e8;
font-size: 16px;
}
button[type=submit] {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type=submit]:hover {
background-color: #3e8e41;
}
```
这个示例中的网页具有以下特性:
- 整体布局简单,且充分利用了屏幕宽度,使页面看起来宽敞;
- 采用了灰色和绿色的色调,搭配简洁明了,符合登录注册页面的风格;
- 所有输入框和按钮都使用了圆角,并且添加了鼠标悬停效果,使页面看起来更加美观和动感;
- 使用了简单的渐变背景和阴影效果,增强了整体视觉效果。