Cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran responsif-tutorial js-php.cn

Cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran responsif

WBOY

Lepaskan： 2023-10-27 19:12:27

asal

1345 orang telah melayarinya

Cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran responsif

Cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran yang responsif

Pengenalan:
Dalam era Internet hari ini, fungsi log masuk dan pendaftaran adalah salah satu fungsi yang mesti ada untuk hampir semua laman web. Antara muka log masuk dan pendaftaran yang tampan dan mesra bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga meningkatkan profesionalisme laman web. Artikel ini akan mengajar anda cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran responsif, dan menyediakan contoh kod khusus.

1. Persediaan
Sebelum memulakan pengeluaran, kita perlu menyediakan persekitaran pembangunan. Anda memerlukan editor kod, seperti Teks Sublime, Kod Visual Studio, dsb., dan penyemak imbas untuk pratonton kesan halaman.

2. Reka Letak HTML
Mari kita reka reka letak HTML halaman pendaftaran log masuk. Berikut ialah contoh mudah:

<!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>

Salin selepas log masuk

3. Gaya CSS
Seterusnya, kita perlu menambah gaya pada halaman pendaftaran log masuk. Berikut ialah contoh mudah:

/* 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;
}

Salin selepas log masuk

4. Interaksi jQuery
Akhirnya, kami menggunakan jQuery untuk menambah kesan interaktif pada halaman pendaftaran log masuk. Berikut ialah contoh mudah:

$(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");
    });
  });
});

Salin selepas log masuk

Kesimpulan:
Melalui gabungan HTML, CSS dan jQuery, kami boleh mencipta halaman pendaftaran log masuk responsif. Saya harap kod sampel dalam artikel ini boleh membantu anda dan memberi inspirasi kepada anda untuk mereka bentuk antara muka log masuk dan pendaftaran yang lebih baik. ayuh!

Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk mencipta antara muka log masuk dan pendaftaran responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!