<div class="login-panel"> <h2>QQ登录</h2> <form> <div class="form-group"> <label>QQ号码/邮箱号码/手机号码</label> <input type="text" name="qq-number" required> </div> <div class="form-group"> <label>密码</label> <input type="password" name="password" required> </div> <div class="form-group"> <input type="checkbox" name="remember-me"> <label>记住偶</label> </div> <div class="form-group"> <button type="submit">登录</button> </div> </form> <div class="login-social"> <p>使用社交账号登录</p> <a href="#" class="wechat"><i class="fab fa-weixin"></i>微信登录</a> <a href="#" class="weibo"><i class="fab fa-weibo"></i>微博登录</a> </div> </div>
在这个示例代码中,大家使用了一个div标签作为父标签,该标签具有一个类名login-panel
。大家在div内部创建了一组表单元素,包括一个标题、用户名和密码输入框、一个复选框以及一个登陆按钮。在这个示例中,大家还添加了一个社交账号登录部分,可通过微信或微博进行登录。
通过这个QQ登录面板的示例代码,可以看到使用CSS,大家可以创建出一个美观、实用、易于操作的登陆面板。这为创建网站或应用程序提供了方便和效率。