Comment utiliser HTML, CSS et jQuery pour créer une interface de connexion et d'inscription réactive-js tutoriel-php.cn

Comment utiliser HTML, CSS et jQuery pour créer une interface de connexion et d'inscription réactive

WBOY

Libérer： 2023-10-27 19:12:27

original

1346 Les gens l'ont consulté

Comment utiliser HTML, CSS et jQuery pour créer une interface de connexion et dinscription réactive

Comment utiliser HTML, CSS et jQuery pour créer une interface de connexion et d'enregistrement réactive

Introduction :
À l'ère d'Internet d'aujourd'hui, la fonction de connexion et d'enregistrement est l'une des fonctions indispensables pour presque tous les sites Web. Une interface de connexion et d’enregistrement élégante et conviviale peut non seulement améliorer l’expérience utilisateur, mais également accroître le professionnalisme du site Web. Cet article vous apprendra à utiliser HTML, CSS et jQuery pour créer une interface de connexion et d'enregistrement réactive, et fournira des exemples de code spécifiques.

1. Préparation
Avant de démarrer la production, nous devons préparer l'environnement de développement. Vous avez besoin d'un éditeur de code, tel que Sublime Text, Visual Studio Code, etc., et d'un navigateur pour prévisualiser l'effet de page.

2. Mise en page HTML
Concevons d'abord la mise en page HTML de la page d'enregistrement de connexion. Voici un exemple simple :

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>登录注册页面</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="form-container">
      <div class="tab-content">
        <div id="login">
          <h1>登录</h1>
          <form>
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码">
            <input type="submit" value="登录">
          </form>
        </div>

        <div id="register">
          <h1>注册</h1>
          <form>
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码">
            <input type="password" placeholder="确认密码">
            <input type="submit" value="注册">
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Copier après la connexion

3. Styles CSS
Ensuite, nous devons ajouter des styles à la page d'enregistrement de connexion. Voici un exemple simple :

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

Copier après la connexion

4. Interaction jQuery
Enfin, nous utilisons jQuery pour ajouter des effets interactifs à la page d'enregistrement de connexion. Voici un exemple simple :

$(document).ready(function() {
  // 切换到注册页面
  $("#register-link").click(function() {
    $("#login").slideUp("fast", function() {
      $("#register").slideDown("fast");
    });
  });

  // 切换到登录页面
  $("#login-link").click(function() {
    $("#register").slideUp("fast", function() {
      $("#login").slideDown("fast");
    });
  });
});

Copier après la connexion

Conclusion :
Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons créer une page d'enregistrement de connexion réactive. J'espère que l'exemple de code de cet article pourra vous être utile et vous inspirer pour concevoir une meilleure interface de connexion et d'enregistrement. allez!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!