Sites Web de jour pendant des jours-js tutoriel-php.cn

Sites Web de jour pendant des jours

WBOY

Libérer： 2024-08-08 09:53:32

original

877 Les gens l'ont consulté

Day Websites for Days

Après 5 jours d'apprentissage progressif du HTML, je suis très heureux que nous soyons dans la phase finale de tout cela, la section basée sur des projets de ce cours, où je viens de créer des sites Web. et me mettre au défi...

Une simple page de connexion et d'inscription de l'utilisateur

Lien vers la page utilisateur du projet

HTML pour la page d'inscription-

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

Copier après la connexion

Page HTML pour l'inscription-

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

Copier après la connexion

Styles 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;
}

Copier après la connexion

Site Web interactif simple de connexion et d'inscription des utilisateurs...

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!