利用sass实现登陆界面
时间: 2024-05-06 15:16:30 浏览: 24
首先,我们需要先创建一个 HTML 文件,并引入相关的 CSS 和 JavaScript 库。在这个示例中,我们使用了 Bootstrap 和 jQuery。代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<!-- 引入 Bootstrap 样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- 引入自定义样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<h2 class="text-center mb-4">Login Form</h2>
<form id="login-form">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入 Bootstrap JS 库 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- 引入自定义 JavaScript 文件 -->
<script src="app.js"></script>
</body>
</html>
```
接下来,我们需要编写一个 Sass 文件,用于定制登录表单的样式。代码如下:
```scss
// 引入 Bootstrap Sass 文件
@import "bootstrap/scss/bootstrap";
// 定义自定义样式
// 登录表单容器
.container {
margin-top: 50px;
}
// 登录表单
#login-form {
background-color: #f7f7f7;
padding: 20px;
border-radius: 5px;
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="password"] {
border-radius: 3px;
border: 1px solid #ccc;
padding: 10px;
width: 100%;
}
button[type="submit"] {
margin-top: 20px;
}
}
```
最后,我们需要编写一个 JavaScript 文件,用于处理登录表单的提交事件。代码如下:
```js
$(function() {
// 监听登录表单的提交事件
$('#login-form').submit(function(event) {
event.preventDefault();
// 获取用户名和密码
var username = $('#username').val();
var password = $('#password').val();
// TODO: 在这里处理登录逻辑
console.log('Username:', username);
console.log('Password:', password);
});
});
```
完成上述步骤后,我们就可以在浏览器中打开 HTML 文件,查看效果了。当用户在登录表单中输入用户名和密码并点击登录按钮时,JavaScript 代码会将用户名和密码打印到控制台上。我们可以在这里添加自己的登录逻辑,例如发送 AJAX 请求进行验证等。