如何创建:菜单中的登录表单
学习如何创建其中包含登录表单的响应式导航菜单。
如何在导航栏中添加登录表单
第一步 - 添加 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 { overflow: hidden; background-color: #e9e9e9; } /* 设置导航链接的样式 */ .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* 鼠标悬停在导航链接上时的样式 */ .topnav a:hover { background-color: #ddd; color: black; } /* 当前/激活链接的样式 */ .topnav a.active { background-color: #2196F3; color: white; } /* 设置输入框容器的样式 */ .topnav .login-container { float: right; } /* 设置导航栏内的输入框样式 */ .topnav input[type=text] { padding: 6px; margin-top: 8px; font-size: 17px; border: none; width: 150px; /* 根据需要调整(只要不破坏顶部导航) */ } /* 设置输入框容器内的按钮样式 */ .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; } /* 添加响应能力 - 在小屏幕上,垂直而不是水平显示导航栏 */ @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; } }