如何创建：菜单中的登录表单

如何在导航栏中添加登录表单

第一步 - 添加 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 {
  ফ্লোট: ডানদিক;
  ডিসপ্লে: ব্লক;
  কালি: সাদা;
  টেক্সট-অ্যালাইন: মধ্য;
  প্যাডিং: ১৪পিক্সেল ১৬পিক্সেল;
  টেক্সট-ডেকোরেশন: নোন;
  ফন্ট-সাইজ: ১৭পিক্সেল;
}
/* মাউস হভ লিঙ্কের উপর থাকাকালীন স্টাইল */
.topnav a:hover {
  ব্যাকগ্রাউন্ড-কালি: #ddd;
  কালি: সাদা;
}
/* বর্তমান/সক্রিয় লিঙ্কের স্টাইল */
.topnav a.active {
  ব্যাকগ্রাউন্ড-কালি: #2196F3;
  কালি: সাদা;
}
/* ইনপুট কনটেনারের স্টাইল সেট করো */
.topnav .login-container {
  ফ্লোট: রাইট;
}
/* নেভিগেশনের মধ্যে ইনপুট স্টাইল সেট করো */
.topnav input[type=text] {
  প্যাডিং: ৬পিক্সেল;
  মার্গিন-টপ: ৮পিক্সেল;
  ফন্ট-সাইজ: ১৭পিক্সেল;
  বর্ডার: নোন;
  প্রস্থ: ১৫০পিক্সেল; /* প্রয়োজনীয়তা অনুযায়ী সংযোজন (কিন্তু টপ নেভিগেশনকে ক্ষতিগ্রস্ত করবে না) */
}
/* ইনপুট কনটেনারের বুটনের স্টাইল সেট করো */
.topnav .login-container button {
  ফ্লোট: রাইট;
  প্যাডিং: ৬পিক্সেল;
  মার্গিন-টপ: ৮পিক্সেল;
  মার্গিন-রাইট: ১৬পিক্সেল;
  ব্যাকগ্রাউন্ড: #ddd;
  ফন্ট-সাইজ: ১৭পিক্সেল;
  বর্ডার: নোন;
  কার্সর: পোইন্টার;
}
.topnav .login-container button:hover {
  ব্যাকগ্রাউন্ড: #ccc;
}
/* প্রতিক্রিয়াশীলতা যোগ করো - ছোট স্ক্রিনে, নেভিগেশন বার বরাবর নয়, উঁচুতে দেখানো হবে */
@মিডিয়া স্ক্রিন এন্ড (মাক্স-ওয়াইডথ: ৬০০পিক্সেল) {
  .topnav .login-container {
    ফ্লোট: নোন;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    ফ্লোট: নোন;
    ডিসপ্লে: ব্লক;
    টেক্সট-অ্যালাইন: ডানদিক;
    প্রস্থ: ১০০%;
    মার্গিন: ০;
    প্যাডিং: ১৪পিক্সেল;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

亲自试一试