چگونه ایجاد کنید: فرم ورود در منو

چگونه فرم ورود را در نوار ابزار اضافه کنید

مرحله اول - 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 اضافه کردن:

* {box-sizing: border-box;}
/* تنظیمات استایل ناوبری */
.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] {
    بوردر: 1 پیکس سولڈ #ccc;
  }
}

خود کا تجربہ کریں