vue登录注册页面样式
时间: 2025-02-11 08:05:01 浏览: 46
Vue登录注册页面通常包含几个关键组件,如头部导航、用户名/密码输入框、登录/注册按钮以及可能的验证码区域。以下是创建这类页面的一些基本样式指导:
1. **布局**:登录/注册表单可以采用卡片式或全屏模式设计。卡片式的风格可以让界面看起来简洁清爽,全屏则能吸引用户注意力。
```html
<div class="login-form-container">
<div class="form-card">
<!-- 内容 -->
</div>
</div>
```
2. **标题和按钮**:标题通常居中显示,按钮可以使用扁平化设计,颜色鲜明并与背景形成对比。
```css
.form-card {
background-color: #f0f0f0;
padding: 20px;
display: flex;
justify-content: center;
}
.login-title {
text-align: center;
margin-bottom: 1rem;
}
.btn-login, .btn-register {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
}
```
3. **输入框**:文本框可以设置圆角、阴影效果,并且添加清晰的提示信息。
```css
.input-field {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
box-sizing: border-box;
}
.input-label {
display: block;
margin-bottom: 5px;
}
```
阅读全文
相关推荐


















