Laman Web Hari untuk Hari-tutorial js-php.cn

Laman Web Hari untuk Hari

WBOY

Lepaskan： 2024-08-08 09:53:32

asal

895 orang telah melayarinya

Day Websites for Days

Selepas 5 hari pembelajaran HTML progresif, saya sangat gembira kerana kita berada di fasa akhir semua ini, bahagian berasaskan projek kursus ini, di mana saya hanya membina tapak web dan cabar diri saya...

Halaman log masuk & Pendaftaran pengguna yang ringkas

Pautan ke Halaman Pengguna projek

HTMl untuk halaman Daftar-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Login Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Login Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Don't Have An Account? <a href="signup.html">Sign Up</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

Salin selepas log masuk

HTML untuk halaman Daftar-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Signup Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Signup Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="fname"> First Name </label><br/> 
      <input type="text" id="fname" name="fname"><br/>  
      <br/> 
      <b> <label for="lname"> Last Name </label> <br/>   
      <input type="text" id="lname" name="lname"> <br/>
      <br/> 
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Already Have An Account? <a href="index.html">Sign In</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

Salin selepas log masuk

Gaya CSS-

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Body styles */
body {
  background-color: antiquewhite;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  flex-direction: column;
}

/* Header styles */
header {
  text-align: center;
  margin-bottom: 20px; /* Add some space between the header and the content */
}

/* Article styles */
article {
  border: 1px solid black;
  padding: 20px; /* Add some padding inside the border */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Tahoma, sans-serif;
  background-color: antiquewhite; /* Add background color for better visibility */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for better look */
}

/* h3 styles */
h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
}

Salin selepas log masuk

Log masuk pengguna interaktif mudah & tapak web pendaftaran...

Atas ialah kandungan terperinci Laman Web Hari untuk Hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!