如何创建:菜单中的登录表单
- Forrige side Søkefelt i navigasjonslinjen
- Neste side Tilpassede avkrysningsfelt/kryssfelt
学习如何创建其中包含登录表单的响应式导航菜单。
如何在导航栏中添加登录表单
第一步 - 添加 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;} /* Indstil stil for navigationsfeltet */ .topnav { overflow: hidden; background-color: #e9e9e9; } /* Indstil stil for navigationslinks */ .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Stil, når musen hæves over navigationslink */ .topnav a:hover { background-color: #ddd; color: black; } /* Stil for den nuværende/aktive link */ .topnav a.active { background-color: #2196F3; color: white; } /* Indstil stil for inputbokse */ .topnav .login-container { float: right; } /* Indstil stil for inputfeltet inden i navigationsfeltet */ .topnav input[type=text] { padding: 6px; margin-top: 8px; font-size: 17px; border: none; width: 150px; /* Juster efter behov (sørg for, at det ikke ødelægger topnavigationsfeltet) */ } /* Indstil stil for knapper inden i inputboksen */ .topnav .login-container button { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .topnav .login-container button:hover { background: #ccc; } /* Tilføj responsivitet - på små skærme vises navigationsfeltet lodret i stedet for vandret */ @media screen and (max-width: 600px) { .topnav .login-container { float: none; } .topnav a, .topnav input[type=text], .topnav .login-container button { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } .topnav input[type=text] { border: 1px solid #ccc; } }
- Forrige side Søkefelt i navigasjonslinjen
- Neste side Tilpassede avkrysningsfelt/kryssfelt