效果图：
<!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>
#head{
background-color: skyblue;
border-collapse: collapse;
}
#id,#password{
height: 30px;
width: 58%;
}
#header{
width: 800px;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="#" method="get">
<table id="header">
<tr id="head">
<td style="width: 450px;">
<img src="./img/QQ登录.png" alt="QQ登录">
QQ登录
</td>
<td>
<table>
<tr>
<td><img src="./img/？.png"></td>
<td style="border-right: 1px;">QQ登录</td>
<td style="border-right: 1px;">授权管理</td>
<td>申请接入</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-right: 1px solid black;" >
<span> </span>
<table style="width: 450px;text-align: center;height: 300px;">
<th>账号密码登录</th>
<tr>
<td>推荐使用<a href="#">快速安全登录</a>，防止盗号。</td>
</tr>
<tr>
<td>
<input type="text" name="id" id="id" placeholder="支持QQ号/邮箱/手机号登录">
</td>
</tr>
<tr>
<td>
<input type="password" name="password" id="password" placeholder="密码">
</td>
</tr>
<tr>
<td>
<input type="image" src="./img/授权并登录.png" alt="授权并登录">
</td>
</tr>
</table>
</td>
<td>
<table style="margin-left: 30px;">
<tr style="height: 50px;">
<td style="border-top: 1px solid black; " >
<a href="#">腾讯网</a> 将获得一下权限：
</td>
</tr>
<tr style="height: 50px;">
<td style="border-top: 1px solid black;">
<input type="checkbox" name="全选" id="全选" checked><label for="全选">全选</label>
</td>
</tr>
<tr style="height: 50px;">
<td style="border-top: 1px solid black;">
<input type="checkbox" name="子选项" id="子选项" checked><label for="子选项">获得您的昵称、头像、性别及会员信息</label>
</td>
</tr>
<tr>
<td>
授权后表明你已同意<a href="#">QQ登录服务协议</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: right;border-right: 1px solid black;">
<table style="width: 400px;text-align: right;">
<tr>
<td style="border-right: 1px solid black;">忘记密码？</td>
<td style="border-right: 1px solid black;">注册新帐号</td>
<td>意见反馈</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/web/1754995006a5225020.html
![uniapp [全端兼容] - 详细实现全局修改设置字体大小功能效果，统一修改页面字号字体大小，一键改变字号整个项目立即生效，大中小字号预设、老年人大字模式场景，uniApp全平台兼容控制页面字号大小](/view/template/justnews/img/lazy-480x300.png)
评论列表（0条）