代码：
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QQ登录ent</title>
</head>
<style>ul > li{list-style: none;
}
a {text-decoration: none;
}ul.qq {background-color: #38acef;width: 650px;height: 45px;border-radius: 3px;
}ul >li.QQ{width: 80px;height: 40px;font-size: 22px;float: left;text-align: center;margin-top: 10px;color: white;border-left: 1px solid white;
}ul > li {width: 60px;height: 18px;font-size: 12px;float: right;text-align: center;margin-top: 18px;color: white;border-left: 1px solid white;
}ul > li:last-child{border: none;
}
ul > li:nth-last-child(2){border: none;
}div.left{width: 360px;height: 340px;text-align: center;
}div.reight{position: absolute;top: 112px;left: 380px;width: 230px;height: 340px;text-align: left;
}.font1{font-size: 16px;}.font2{font-size: 13px;color: rgb(100, 98, 98);}.font3{font-size: 10px;color: rgb(132, 126, 126);}.font4 {font-size: 11px;}.style1 {color: rgba(35, 107, 231, 0.785);font-size: 13px;}.style2 {color: rgb(70, 69, 69);font-size: 11px;}.style3 {color: rgb(46, 46, 46);font-size: 12px;}input {width: 206px;padding: 8px ;border: 1px solid #ddd;border-radius: 2px;margin-bottom: 8px;font-size: 12px;}button {background-color: #84d43e;color: white;border: none;height: 36px;padding: 8px 78px;cursor: pointer;border-radius: 2px;}</style>
<body><div><ul class="qq"><li >申请接入</li><li >授权管理</li><li >QQ登录</li><li class="QQ">QQ登录</li></ul></div><div class="left"><p class="font1">账号密码登录</p><p class="font2" >推荐使用<span class="style1">快速安全登录</span>，防止盗号。</p><form action="#" method="post"><p ><input type="text" name="number" placeholder="支持QQ号/邮箱/手机号登录" ></p><p><input type="password" name="password" placeholder="密码"></p><p><button type="submit">授权并登录</button></p><p align="right" class="font3" style="line-height:38px ;">忘了密码？| 注册新账号 | 意见反馈 </p></form></div><div class="reight"><form action="#" method="post"><p style="border-top: 1px solid rgb(220, 219, 219);"></p><span class="font4"><a href="http:\\www.qq.com" target="_blank" style="color: rgba(80, 193, 254, 0.92);" >腾讯网</a> 将获得以下权限：</span><p style="border-top: 1px solid rgb(220, 219, 219);"></p><p class="style2"><input type="checkbox" name="box" value="全选" style="width: 9px;" checked>全选</p><p style="border-top: 1px solid rgb(220, 219, 219);" ></p><p class="style2"><input type="checkbox" name="box" value="获得您的昵称、头像、性别及会员信息" style="width: 9px;" checked>获得您的昵称、头像、性别及会员信息</p><p class="style3">授权后表明你已同意 <a href="#" target="_blank" style="color: rgba(80, 193, 254, 0.92);">QQ登录服务协议</a></p> </form></div>
</body>
</html>
运行结果：
