html、scss、js实现登录与注册功能实例代码

最新推荐文章于 2025-03-31 11:28:57 发布

长大的小蚂蚁

最新推荐文章于 2025-03-31 11:28:57 发布

阅读量769

点赞数 1

分类专栏： Django-python从入门到精通336

本文链接：https://blog.csdn.net/zjy123078_zjy/article/details/105014107

版权

本文展示了如何使用HTML、SCSS和JavaScript实现登录与注册功能的前端界面。提供了代码示例，包括HTML结构、SCSS样式（auth.scss, init.scss, constants.scss）以及auth.js脚本。同时，提到了在不同浏览器下初始化样式的问题，并给出了jquery-3.3.1.min.js的下载链接和提取码。" 106239103,9167053,腾讯前端面试题解析,"['CSS', 'HTML', 'JavaScript']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看一下效果图，登录界面，后面的背景图片可以替换成任意喜欢的图片，当然也可以设置为纯色背景：

在这里插入图片描述

之后点击“立即注册”就可以来到注册页面：

在这里插入图片描述

接下来就直接上代码了，只设计前端界面部分：

1. html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/注册</title>
    <link rel="stylesheet" href="../../dist/css/common/auth.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1347266_1120imkhssrc.css">
    <script src="../../dist/js/jquery-3.3.1.min.js"></script>
    <script src="../../dist/js/auth.js"></script>
</head>
<body>
<button id="btn">登录/注册</button>
<div class="mask-wrapper">
    <div class="auth-group">
        <div class="close-group">
            <span class="close-btn icon-baseline-close-px iconfont"></span>
        </div>
        <div class="auth-scroll-wrapper">
            <div class="scroll-wrapper">
                <div class="auth-group signin-group">
                    <div class="auth-info">
                        <div class="title-group&#