html仿QQ快速登录界面样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html仿QQ快速登录界面样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html仿QQ快速登录界面样式代码</title>
<style type="text/css">
html,body,div,p,form,label,ul,li,img,em,h3{margin:0;padding:0;border:0;list-style:none;font-style:normal;font-weight:normal;}
a{text-decoration:none;}
body{font-family:Microsoft YaHei,Verdana,Arial,SimSun;color:#666;font-size:14px;background:#fff; overflow:hidden}
.block, #block{display:block;}
.none, #none{display:none;}

.login{width:100%;}
.login .headerTop{width:100%;height: 80px;background:#52b7ed;}
.login .headerTop .logo{width:1000px;margin:0 auto;}
.login .headerTop .logo img{margin-top:20px;width: 150px;}

.main{width:1000px;margin:0 auto;overflow: hidden;height: auto;clear: both;}
.main .mainLeft{float: left;width:50%;border-right:1px dotted #ccc;margin-top:30px;padding-bottom:100px;}
.main .mainLeft h3{width:70%;border-bottom:2px solid #ccc;padding:0 10%;font-family: 600;}
.main .mainLeft h3 span{display:inline-block;width:6.5em;font-size:18px;color: #333;line-height:50px;border-bottom:4px solid #666;margin-bottom: -2px;font-family: 600;text-align: center;}
.main .mainLeft input{width:50%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius: 3px;margin:20px 0 0 50px;}
.main .mainLeft input[type="text"]{margin-top:60px;}
.main .mainLeft .a{display: block;padding:10px 15px;width:20%;text-align:center;font-size:18px;color:#fff;background: #88ce2f;border-radius: 3px;margin:20px 0 0 50px;}
.main .mainRight{float: right;width:45%;margin-top:30px;}
.mainRight p, .mainRight ul li{width:100%;padding: 10px 0;border-bottom: 1px dotted #ccc;font-size:14px;color: #666; }
.mainRight p a{color:#52b7ed;}
.mainRight p a:hover{text-decoration:underline;}
.mainRight p input, .mainRight ul li input{margin-right:10px;cursor:not-allowed;}
.mainRight ul li{border:none;}
.mainRight .agreement{margin-top:10px;border:none;}
.mainRight .code{text-align: center;}
.mainRight img{margin:10px auto;width: 150px;}
.delete  { display: none; position: absolute; width: 16px; height: 16px; margin: 73px 0 0 -25px; background: url(images/delete.jpg) no-repeat;background-size:100%; cursor: pointer;}
.mainLeft input[type="text"]::-ms-delete { display: none; }
.main .mainLeft input[type="text"]:valid + .delete  { display: inline; }
</style>
</head>

<body>
	<div class="login">
		<div class="headerTop">
			<div class="logo">
				<img src="images/logo.png" />
			</div>
		</div>
		<div class="main">
			<div class="mainLeft">
				<h3><span>账号密码登录</span></h3>
				<form>
					<input class="text" type="text" placeholder="支持QQ号/邮箱/手机号登录" required value="">
					<a class="delete" id="delete" href="#"></a>
					<input type="password" name="" placeholder="密码">
					<a class="a" href="#">授权并登录</a>
				</form>
			</div>
			<div class="mainRight">
				<p>该网站已有超过1千万用户使用QQ登录</p>
				<p><a href="#">爱奇艺PPS</a>讲获得以下权限</p>
				<p><input type="checkbox" checked="checked" disabled="disabled">全选</p>
				<ul>
					<li><input type="checkbox" checked="checked" disabled="disabled" >获得您的昵称，头像，性别</li>
					<li><input type="checkbox" checked="checked" disabled="disabled">分享内容到QQ空间</li>
					<li><input type="checkbox" checked="checked" disabled="disabled">读取，达标腾讯微博信息</li>
				</ul>
				<p class="agreement">授权后表明你已同意<a href="#">QQ登录服务协议</a></p>
				<div class="code">
					<img src="images/code.jpg">
				</div>
			</div>
		</div>
	</div>
<script src="jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function(){
  $("#delete").click(function(){
    $('.text').val('');
  });
});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)