كيفية إنشاء: نموذج تسجيل الدخول في القائمة

كيفية إضافة نموذج تسجيل الدخول في قائمة التصفح

الخطوة الأولى - إضافة HTML:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Username" name="username">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

* {حجم الصندوق: الحجم الكامل;}
/* تعيين نمط النافذة التوجيهية */
.topnav {
  التمدد: لا شيء;
  لون الخلفية: #e9e9e9;
}
/* تعيين نمط الرابط التوجيهي */
.topnav a {
  التموضع: يسار;
  العرض: كتلة;
  اللون: أسود;
  التوجيه النصي: وسط;
  السماح: 14كس 16كس;
  تزيين النص: لا شيء;
  حجم الخط: 17كس;
}
/* نمط الرابط عند مرور الفأرة فوقه */
.topnav a:hover {
  لون الخلفية: #ddd;
  اللون: أسود;
}
/* نمط الرابط الحالي / النشط */
.topnav a.active {
  لون الخلفية: #2196F3;
  اللون: أبيض;
}
/* تعيين نمط وحدة الإدخال */
.topnav .login-container {
  التموضع: يمين;
}
/* تعيين نمط وحدة الإدخال داخل النافذة التوجيهية */
.topnav input[type=text] {
  السماح: 6كس;
  الحدود العلوية: 8كس;
  حجم الخط: 17كس;
  الحدود: لا شيء;
  العرض: 150كس; /* تعديل حسب الحاجة (لا ت破坏 النافذة التوجيهية العلوية) */
}
/* تعيين نمط الزر داخل وحدة الإدخال */
.topnav .login-container button {
  التموضع: يمين;
  السماح: 6كس;
  الحدود العلوية: 8كس;
  الحدود اليمنى: 16كس;
  الخلفية: #ddd;
  حجم الخط: 17كس;
  الحدود: لا شيء;
  المؤشر: نقر;
}
.topnav .login-container button:hover {
  الخلفية: #ccc;
}
/* إضافة استجابة للشاشة - في الشاشات الصغيرة، العرض العمودي بدلاً من الأفقية للنافذة التوجيهية */
@media screen and (max-width: 600px) {
  .topnav .login-container {
    التموضع: لا شيء;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    التموضع: لا شيء;
    العرض: كتلة;
    التوجيه النصي: اليسار;
    العرض: 100%;
    الحدود: 0;
    السماح: 14كس;
  }
  .topnav input[type=text] {
    حافة: 1px خط مائل #ccc;
  }
}

جربها بنفسك