在Django框架下，用HTML编写一个用户登录页面，包括记住我，注册账号，并用css文件控制样式，js文件控制交互效果

以下是使用Django框架，HTML，CSS和JavaScript编写的用户登录页面的示例代码：

login.html

{% extends "base.html" %}

{% block title %}用户登录{% endblock %}

{% block content %}
<div class="login-container">
    <h1>用户登录</h1>
    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" id="password">
        </div>
        <div class="form-group">
            <input type="checkbox" name="remember_me" id="remember_me">
            <label for="remember_me">记住我</label>
        </div>
        <div class="form-group">
            <button type="submit">登录</button>
        </div>
    </form>
    <div class="register-link">
        <p>还没有账号？<a href="{% url 'register' %}">注册账号</a></p>
    </div>
</div>
{% endblock %}

在这个页面中，我们先通过继承“base.html”模板来添加一些共同的HTML头和尾。接着在“content”块中，我们创建了一个登录容器，其中包含一个登录表单和一个注册账号链接。登录表单中包括用户名输入框，密码输入框和一个记住我复选框。注册链接直接指向了一个名为“register”的URL。

login.css

.login-container {
    width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px #ccc;
    text-align: center;
}

h1 {
    margin: 0;
    padding: 0;
}

form {
    margin-top: 20px;
    text-align: left;
}

.form-group {
    margin: 10px 0;
}

label {
    display: inline-block;
    width: 120px;
    font-weight: bold;
}

input[type="text"],
input[type="password"] {
    width: 200px;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
}

input[type="checkbox"] {
    margin-right: 5px;
}

button[type="submit"] {
    padding: 5px 10px;
    background-color: #009688;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.register-link {
    margin-top: 20px;
}

在CSS文件中，我们为登录容器、标题、表单和链接设置了一些样式。我们还设置了输入框、复选框和提交按钮的样式。

login.js

$(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        var username = $('#username').val();
        var password = $('#password').val();
        if (!username) {
            alert('请输入用户名');
            return;
        }
        if (!password) {
            alert('请输入密码');
            return;
        }
        $(this).unbind().submit();
    });
});

在JavaScript文件中，我们使用jQuery库来绑定登录表单的提交事件。在提交事件中，我们先阻止表单的默认行为，然后检查用户名和密码输入框是否为空。如果输入框为空，则弹出警告提示。如果全部都不为空，则提交表单。我们还使用unbind()方法来避免表单被多次提交的问题。

这就是一个简单的用户登录页面示例，其中包含记住我，注册账号，并用CSS和JavaScript控制样式和交互效果。