如何使用 CSS 创建响应式登录表单?
在一个网页上,登录表单包含用户名和密码字段。此外,还为用户创建了一个登录按钮,用户可以点击该按钮进行登录。还放置了一个忘记密码链接,供忘记帐户密码的用户使用。“记住我”复选框也已设置,因此用户可以选择它并允许浏览器记住密码,以避免反复输入密码。让我们使用 CSS 创建一个响应式登录表单。
设置表单头像图像
我们在开头使用<img>放置了一个头像图片:
<div class="profilePic"> <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" /> </div>
设置头像图像的高度和宽度。将其放置在中心:
.profilePic { text-align: center; margin: 24px 0 12px 0; } img.avatar { width: 200px; height: 200px; border-radius: 50%; }
创建表单
我们在这里创建了一个表单,其中包含用户名和密码输入字段。占位符使用 placeholder 属性设置。还使用<button>元素创建了一个提交按钮:
<div class="formFields"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required /> <label for="pass"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="pass" required /> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember" /> Remember me</label> </div>
输入类型文本和密码字段的样式如下所示。为了定位和显示,我们设置了display属性的inline-block值:
input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-size: 30px; }
设置“记住我”复选框
使用 input type checkbox 创建“记住我”复选框:
<label> <input type="checkbox" checked="checked" name="remember" /> Remember me </label>
设置忘记密码链接
还为忘记密码并希望恢复密码的用户创建了一个忘记密码链接:
<span class="pass">Forgot <a href="#">password?</a></span>
将忘记密码链接浮动到右侧:
span.pass { float: right; padding-top: 16px; }
设置响应式
使用媒体查询来设置响应式。当屏幕尺寸小于 300 像素时,span 的 display 属性设置为 block 值:
@media screen and (max-width: 300px) { span.pass { display: block; float: none; } .cancelbtn { width: 100%; } }
示例
以下是使用 CSS 创建响应式登录表单的代码:
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, Helvetica, sans-serif; background-color: rgb(189, 189, 255); } form { border: 3px solid #f1f1f1; background-color: rgb(228, 228, 228); margin: 20px; } h1 { text-align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-size: 30px; } label { font-size: 30px; } button { font-weight: bold; font-family: monospace, sans-serif, serif; font-size: 25px; background-color: #4caf50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } .profilePic { text-align: center; margin: 24px 0 12px 0; } img.avatar { width: 200px; height: 200px; border-radius: 50%; } .formFields { padding: 16px; } span.pass { float: right; padding-top: 16px; } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.pass { display: block; float: none; } .cancelbtn { width: 100%; } } </style> </head> <body> <h1>Responsive Login Form Example</h1> <form> <div class="profilePic"> <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" /> </div> <div class="formFields"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required /> <label for="pass"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="pass" required /> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember" /> Remember me </label> </div> <div class="formFields" style="background-color:#f1f1f1"> <button type="button" class="cancelbtn">Cancel</button> <span class="pass">Forgot <a href="#">password?</a></span> </div> </form> </body> </html>
广告