效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ登录页面</title>
<style>
a{
text-decoration: none;} <!-- 去除超链接的下划线 -->
</style>
</head>
<body>
<table align="center">
<tr>
<th><h1>账号密码登录</h1></th>
</tr>
<tr>
<td>推荐使用,防止盗号。<br><br></td>
</tr>
<tr>
<td><form>
账号:<input type="text" name="账号" style="width:200px; height:30px; font-size:15px;" placeholder="支持QQ号/邮箱/手机号登录" >
<br><br>
密码:<input type="password" name="密码" style="width:200px; height:30px; font-size:15px;" placeholder="密码">
</form></td>
</tr>
<tr>
<td><br>
<a href="https://qzone.qq.com/">
<img loading="lazy" src="1.png" width="200" height="40" />
</a></td>
</tr>
<tr>
<td><br><br>
<a href="https://aq.qq.com/v2/uv_aq/html/reset_pwd/pc_reset_pwd_input_account.html?v=3.0&old_ver_account=" style="height:28px; font-size:12px; line-height:28px;">
忘了密码?</a>
|
<a href="https://ssl.zc.qq.com/v3/index-chs.html" style="height:28px; font-size:12px; line-height:28px;">新账号</a>
|
<a href="https://support.qq.com/products/14800" style="height:28px; font-size:12px; line-height:28px;">意见反馈</a>
<br><td>
</tr>
<tr>
<td><p style="height:28px; font-size:12px; line-height:28px;" >将获得以下权限:</p>
<br>
<input type="checkbox" name="" checked="checked">全选<br>
<input type="checkbox" name="" checked="checked">获得您的昵称、头像、性别
</td>
</tr>
</table>
</body>
</html>