以下是 jQuery仿win10桌面QQ登录界面效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta charset="utf-8">
<title>jQuery仿win10桌面QQ登录界面效果</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<script src="js/superslide.2.1.js"></script>
<script src="js/nicescroll.js"></script>
</head>
<body>
<div class="qq-exe"><img src="images/QQ-ICON.png"><input type="text" value="腾讯QQ" placeholder="腾讯QQ"></div>
<div class="win-bg"><img src="images/win-bg.png"></div>
<div class="qq-login">
<div class="login-menu">
<span></span><span></span><span class="login-close"></span>
</div>
<div class="login-ner">
<div class="login-left">
<div class="login-head"><img src="images/login/head.jpg"></div>
</div>
<div class="login-on">
<div class="login-txt"><input type="text" placeholder="QQ号码/手机/邮箱"><input type="password" placeholder="密码"></div>
<div class="login-xuan"><span class="fl"><input type="checkbox"><i>记住密码</i></span><span class="fr"><input type="checkbox"><i>自动登录</i></span></div>
<div class="login-but">安全登录</div>
</div>
<div class="login-right">
<a href="#/chs/index.html" target="_blank">注册账号</a><a href="#/findpsw/pc/pc_find_pwd_input_account?pw_type=0&aquin=" target="_blank">找回密码</a>
</div>
</div>
</div>
<div class="qq">
<div class="qq-top">
<div class="qq-top-icon">
<i><img src="images/qq-top.png"></i>
<span class="qq-top-02 close"><img src="images/qq-top-02.png"></span>
<span class="qq-top-01 min"><img src="images/qq-top-01.png"></span>
</div>
<div class="qq-top-name">
<span>程序员设计师联盟淘宝店</span>
<dl><dd><img src="images/zai.png"></dd><dt><img src="images/lv.png"></dt><dt><img src="images/svip.png"></dt></dl>
</div>
<div class="qq-top-shuo"><input type="text" value="这两天空间被各种婚礼刷屏了"></div>
<div class="qq-top-menu">
<ul>
<li></li><li></li><li></li><li></li>
</ul>
<span class="qq-top-001"></span>
<span class="qq-top-002"></span>
</div>
<div class="qq-serch">搜索：联系人、讨论组、群、企业</div>
</div>
<div class="qq-xuan">
<ul>
<li class="qq-xuan-li"><span></span><i></i></li>
<li><span></span><i></i></li>
<li><span></span><i></i></li>
<li><span></span><i></i></li>
</ul>
</div>
<div class="qq-hui">
<ul>
<li>
<div class="qq-hui-img"><img src="images/head/01.jpg"><i></i></div>
<div class="qq-hui-name"><span>室外摄影大师</span><i>16:30</i></div>
<div class="qq-hui-txt" title="">下次我们去公园拍摄吧~[图片]</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/02.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">尛伊_6th空白</span><i>16:29</i></div>
<div class="qq-hui-txt" title="">后天上午十点钟有漫展哦~我有门票你去么[图片]</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/03.jpg"><i></i></div>
<div class="qq-hui-name"><span>一粒沙~白</span><i>16:29</i></div>
<div class="qq-hui-txt" title="">[图片]怎么样看起来好吃吧</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/04.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">彡分钟丶热°</span><i>16:26</i></div>
<div class="qq-hui-txt" title="">恩 拜~</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/05.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">二次元灬小埋酱</span><i>16:24</i></div>
<div class="qq-hui-txt" title="">欧尼酱 >~< 下次带我去吃好吃的好不好嘛</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/06.jpg"><i></i></div>
<div class="qq-hui-name"><span>爱思考的逗比</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">[图片]这个公式我算了一天终于算出来了</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/07.jpg"><i></i></div>
<div class="qq-hui-name"><span>二货青年欢乐多</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">今天我踢了我前面的同学一脚、被他狠狠地</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/08.jpg"><i></i></div>
<div class="qq-hui-name"><span>喵喵喵喵~喵星人</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">屁颠屁颠卖萌喵星人驾到、愚蠢的地球人</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/01.jpg"><i></i></div>
<div class="qq-hui-name"><span>室外摄影大师</span><i>16:30</i></div>
<div class="qq-hui-txt" title="">下次我们去公园拍摄吧~[图片]</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/02.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">尛伊_6th空白</span><i>16:29</i></div>
<div class="qq-hui-txt" title="">后天上午十点钟有漫展哦~我有门票你去么[图片]</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/03.jpg"><i></i></div>
<div class="qq-hui-name"><span>一粒沙~白</span><i>16:29</i></div>
<div class="qq-hui-txt" title="">[图片]怎么样看起来好吃吧</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/04.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">彡分钟丶热°</span><i>16:26</i></div>
<div class="qq-hui-txt" title="">恩 拜~</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/05.jpg"><i></i></div>
<div class="qq-hui-name"><span class="red">二次元灬小埋酱</span><i>16:24</i></div>
<div class="qq-hui-txt" title="">欧尼酱 >~< 下次带我去吃好吃的好不好嘛</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/06.jpg"><i></i></div>
<div class="qq-hui-name"><span>爱思考的逗比</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">[图片]这个公式我算了一天终于算出来了</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/07.jpg"><i></i></div>
<div class="qq-hui-name"><span>二货青年欢乐多</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">今天我踢了我前面的同学一脚、被他狠狠地</div>
</li>
<li>
<div class="qq-hui-img"><img src="images/head/08.jpg"><i></i></div>
<div class="qq-hui-name"><span>喵喵喵喵~喵星人</span><i>16:21</i></div>
<div class="qq-hui-txt" title="">屁颠屁颠卖萌喵星人驾到、愚蠢的地球人</div>
</li>
</ul>
</div>
<div class="qq-bot">
<div class="qq-menu">
<ul>
<li><img src="images/bot-menu/01.png"></li>
<li><img src="images/bot-menu/02.png"></li>
<li><img src="images/bot-menu/03.png"></li>
<li><img src="images/bot-menu/04.png"></li>
<li><img src="images/bot-menu/05.png"></li>
<li><img src="images/bot-menu/06.png"></li>
<li><img src="images/bot-menu/07.png"></li>
<li><img src="images/bot-menu/08.png"></li>
<li><img src="images/bot-menu/09.png"></li>
<li><img src="images/bot-menu/10.png"></li>
</ul>
</div>
<div class="qq-bou-she">
<ul>
<li><img src="images/bot-menu/11.png"></li>
<li><img src="images/bot-menu/12.png"></li>
<li><img src="images/bot-menu/13.png"></li>
<li><img src="images/bot-menu/14.png"></li>
<li><img src="images/bot-menu/15.png"></li>
<li><img src="images/bot-menu/16.png"><span>查找</span></li>
<li><img src="images/bot-menu/05.png"><span>应用宝</span></li>
</ul>
</div>
</div>
</div>
<div class="qq-chat">
<div class="qq-chat-win">
<ul>
<li class="she"></li><li class="min"></li><li class="max"></li><li class="close"></li>
</ul>
</div>
<div class="qq-chat-top">
<div class="qq-chat-tops">
<div class="qq-chat-t-head"><img src=""></div>
<div class="qq-chat-t-name"></div>
<div class="qq-chat-t-shuo">站在别人的雨季，淋湿自己空弹一出戏.....</div>
</div>
<div class="qq-chat-menu">
<ul>
<li><span><img src="images/chat/icon-01.png"></span></li>
<li><span><img src="images/chat/icon-02.png"></span></li>
<li><span><img src="images/chat/icon-03.png"></span><i></i></li>
<li><span><img src="images/chat/icon-04.png"></span><i></i></li>
<li><span><img src="images/chat/icon-05.png"></span><i></i></li>
<li><span><img src="images/chat/icon-06.png"></span></li>
<li><span><img src="images/chat/icon-07.png"></span><i></i></li>
</ul>
</div>
</div>
<div class="qq-chat-bot">
<div class="qq-chat-txt">
<ul>
<li>
<div class="qq-chat-you blue"><span></span><i></i></div>
<div class="qq-chat-ner">在么？找你有点事</div>
</li>
</ul>
</div>
<div class="qq-chat-text">
<ul>
<li><span><img src="images/chat/menu-01.png"></span></li>
<li><span><img src="images/chat/menu-02.png"></span></li>
<li><span><img src="images/chat/menu-03.png"></span></li>
<li><span><img src="images/chat/menu-04.png"></span></li>
<li><span><img src="images/chat/menu-05.png"></span><i></i></li>
<li><span><img src="images/chat/menu-06.png"></span></li>
<li><span><img src="images/chat/menu-07.png"></span><i></i></li>
<li><span><img src="images/chat/menu-08.png"></span></li>
<li><span><img src="images/chat/menu-09.png"></span><i></i></li>
<li class="fr" style="margin-right:5px;"><span><img src="images/chat/menu-10.png"></span><p>消息记录</p><i></i></li>
</ul>
<textarea id="qq-chat-text"></textarea>
<div class="qq-chat-but">
<span class="fasong">发送(S)</span>
<span class="close-chat">关闭(C)</span>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(index.js):
$(document).ready(function(){
$('.qq-xuan li').click(function(){
$(this).addClass('qq-xuan-li').siblings().removeClass('qq-xuan-li')}
) $('.qq-hui-txt').hover(function(){
var aa = $(this).html() $('.qq-hui-txt').attr('title',aa)}
) $('.login-close').click(function(){
$(this).parent().parent().css('display','none')}
) $('.qq-hui li').dblclick(function(){
$('.qq-chat').css('display','block').removeClass('mins')$('.qq-chat-t-name').html($(this).find('span').html())$('.qq-chat-t-head img').attr('src',$(this).find('img').attr('src'))$('.qq-chat-you span').html($(this).find('span').html())$('.qq-chat-you i').html($(this).find('.qq-hui-name i').html())$('.qq-chat-ner').html($(this).find('.qq-hui-txt').html())$("#qq-chat-text").trigger("focus")$('.my').remove()}
) $('.qq-exe img').dblclick(function(){
$('.qq-login').css('display','block').removeClass('mins')}
) $('.login-but').click(function(){
if($('.login-txt').find('input').val() == ''){
alert('请输入账号或者密码')}
else if($('login-txt input').val() != ''){
$('.qq').css('display','block').removeClass('mins') $('.qq-login').css('display','none')}
}
) $('.login-txt input').keydown(function(e){
if(e.keyCode == 13){
if($('.login-txt').find('input').val() == ''){
alert('请输入账号或者密码')}
else if($('login-txt input').val() != ''){
$('.qq').css('display','block').removeClass('mins') $('.qq-login').css('display','none')}
}
}
) $('.close').click(function(){
$(this).parent().parent().parent().css('display','none')}
) $('.min').click(function(){
$(this).parent().parent().parent().addClass('mins')}
) $('.qq .close').click(function(){
$('.qq-chat').css('display','none')}
) $('#qq-chat-text').keydown(function(e){
if(e.keyCode == 27){
$('.qq-chat').css('display','none')}
}
) $('.fasong').click(function(){
if($('#qq-chat-text').val()==''){
alert("发送内容不能为空,请输入内容")}
else if($('#qq-chat-text').val()!=''){
var name = $('.qq-top-name span').html() var ner = $('#qq-chat-text').val() var ners = ner.replace(/\n/g,'<br>') var now=new Date() var t_div = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+' '+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
$('.qq-chat-txt ul').append('<li class="my"><div class="qq-chat-my"><span>'+name+'</span><i>'+t_div+'</i></div><div class="qq-chat-ner">'+ners+'</div></li>') $(".qq-chat-txt").scrollTop($(".qq-chat-txt")[0].scrollHeight);
$('#qq-chat-text').val('').trigger("focus")}
}
) $('.close-chat').click(function(){
$('.qq-chat').css('display','none')}
) $(".qq-hui").niceScroll({
touchbehavior:false,cursorcolor:"#ccc",cursoropacitymax:1,cursorwidth:6,horizrailenabled:true,cursorborderradius:3,autohidemode:true,background:'none',cursorborder:'none'}
);
}
);
CSS代码(style.css):
@charset "utf-8";/* margin and padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,img,form,applet,fieldset,legend,button,input,textarea,th,table,tr,td{margin:0;padding:0;border:none;}
/* bady */
body{font-family:"微软雅黑";font-size:12px;color:#333;width:100%;height:100%;position:relative;background:#2b3d51;}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}
input::-ms-clear{display:none;}
/*清楚文本框X*/
html{height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
input,select,textarea{outline:none;cursor:pointer;}
/* img */
img{padding:0;margin:0;vertical-align:top;border:none}
i{font-style:normal;}
/* float */
.fl{float:left!important;}
.fr{float:right!important;}
.auto{margin:0 auto;}
.block{display:block!important;}
.none{display:none;}
.red{color:#ea4848!important;}
.blue{color:#0034fa!important;}
.mins{height:0px!important;}
/* div */
li,ul{list-style:none;outside:none;}
.clear{clear:both;height:0;width:100%;}
a,b,i,span,input,select{-webkit-transition:all 0.5s;-ms-transition:all 0.5s;font-family:"微软雅黑";}
/* font */
a{color:#ffffff;text-decoration:none;-webkit-transition:all 0.5s;}
a:hover,a:active,a:focus{text-decoration:none;}
.win-bg{width:600px;height:218px;position:fixed;top:50%;left:50%;margin:-109px 0 0 -300px;}
.qq-exe{width:60px;height:90px;float:left;margin:20px;}
.qq-exe img{width:60px;height:60px;float:left;cursor:pointer;}
.qq-exe input{float:left;text-align:center;height:20px;color:#fff;width:60px;margin:5px 0;background:none;}
.qq-login{width:430px;height:330px;margin:0 0 -165px -215px;bottom:50%;left:50%;position:fixed;z-index:9999;border-radius:3px;overflow:hidden;box-shadow:0 0 5px #333;background:#ebf2f9 url(../images/login/qq-login-bg.jpg) center top no-repeat;display:none;}
.login-menu{width:90px;height:30px;top:0;right:0;position:absolute;}
.login-menu span{float:left;width:30px;height:30px;background-image:url(../images/chat/wins.png);}
.login-menu span:hover{background-color:#3a95de;}
.login-menu span:nth-child(1){background-position:left center;}
.login-menu span:nth-child(2){background-position:-30px center;}
.login-menu span:nth-child(3){background-position:-90px center;}
.login-menu span:nth-child(3):hover{background-color:#ea4848;}
.login-ner{margin-top:182px;float:left;width:100%;height:148px;}
.login-left{float:left;width:133px;height:148px;}
.login-head{float:left;width:80px;height:80px;border-radius:4px;border:1px solid #ccc;overflow:hidden;margin:12px 11px 0 40px;}
.login-head img{width:80px;height:80px;}
.login-on{width:194px;height:148px;float:left;}
.login-txt{float:left;margin-top:12px;height:60px;width:100%;}
.login-txt input{border:1px solid #d1d1d1;float:left;height:30px;padding:0 7px;font-size:12px;width:100%;}
.login-txt input:nth-child(1){border-radius:4px 4px 0 0;}
.login-txt input:nth-child(2){border-radius:0 0 4px 4px;margin-top:-1px;}
.login-xuan{width:100%;float:left;height:14px;line-height:14px;margin-top:8px;}
.login-xuan input{width:14px;height:14px;float:left;}
.login-xuan i{float:left;padding-left:4px;}
.login-right{width:103px;height:60px;float:left;margin-top:12px;}
.login-right a{float:left;width:100%;color:#2786e4;line-height:30px;text-indent:10px;}
.login-but{width:100%;height:30px;margin:13px 0;float:left;background:#09a3dc;color:#fff;text-align:center;line-height:30px;border-radius:4px;font-size:14px;cursor:context-menu;}
.qq{width:280px;height:700px;box-shadow:0 0 3px #fff;background:#fff;border-radius:4px;position:fixed;top:50%;right:30px;margin-top:-350px;overflow:hidden;-webkit-transition:all 0.5s;display:none;}
.qq-top{width:100%;height:165px;float:left;background:url(../images/qq-bg.jpg) left top no-repeat;border-radius:4px 4px 0 0;overflow:hidden;}
.qq-top-icon{float:left;width:100%;height:28px;}
.qq-top-icon i{width:50px;height:18px;margin:6px 6px;float:left;}
.qq-top-icon span{width:28px;height:28px;float:right;cursor:pointer;}
.qq-serch{width:260px;float:left;height:30px;padding:0 10px;background:url(../images/serch.png) no-repeat 258px center rgba(0,0,0,.1);color:#555;line-height:30px;}
.qq-top-01:hover{background:rgba(0,0,0,.1);}
.qq-top-02:hover{background:rgba(234,72,72,.8);}
.qq-top-name{margin-top:26px;float:left;width:100%;height:36px;}
.qq-top-name span{font-size:20px;text-indent:10px;max-width:140px;line-height:36px;float:left;cursor:pointer;}
.qq-top-name dl{float:left;height:36px;}
.qq-top-name dd{float:left;width:12px;height:12px;padding:4px;margin:8px 0px 8px 8px;}
.qq-top-name dd:hover,.qq-top-name dt:hover{box-shadow:0 0 2px #000;}
.qq-top-name dt{float:left;height:10px;margin:11px 0;padding:2px 2px;}
.qq-top-shuo{width:260px;margin:0 10px;float:left;height:17px;}
.qq-top-shuo input{width:100%;float:left;height:17px;background:none;line-height:12px;color:#333;font-size:10px;text-shadow:0 0 2px #fff;}
.qq-top-menu{width:264px;margin:4px 8px;float:left;height:20px;}
.qq-top-menu li{float:left;width:20px;height:20px;background-image:url(../images/top-menu.png);cursor:pointer;margin-right:5px;}
.qq-top-menu span{float:right;width:20px;height:20px;background-image:url(../images/top-menu.png);cursor:pointer;margin-left:5px;}
.qq-top-menu li:nth-child(1){background-position:left center;}
.qq-top-menu li:nth-child(2){background-position:-20px center;}
.qq-top-menu li:nth-child(3){background-position:-40px center;}
.qq-top-menu li:nth-child(4){background-position:-60px center;}
.qq-top-001{background-position:-100px center;}
.qq-top-002{background-position:-80px center;}
.qq-top-menu li:hover,.qq-top-menu span:hover{box-shadow:0 0 2px #000;}
.qq-xuan{width:100%;float:left;height:36px;border-bottom:1px solid #ccc;}
.qq-xuan li{width:25%;float:left;height:36px;position:relative;cursor:pointer;}
.qq-xuan span{float:left;width:20px;height:20px;margin:8px 25px;}
.qq-xuan li i{width:12px;height:6px;position:absolute;bottom:-1px;left:50%;margin-left:-6px;}
.qq-xuan li:nth-child(1) span{background-image:url(../images/icon-02-01.png);background-position:center top;}
.qq-xuan li:nth-child(2) span{background-image:url(../images/icon-02-02.png);background-position:center top;}
.qq-xuan li:nth-child(3) span{background-image:url(../images/icon-02-03.png);background-position:center top;}
.qq-xuan li:nth-child(4) span{background-image:url(../images/icon-02-04.png);background-position:center top;}
.qq-xuan li:hover span{background-position:center center;}
.qq-xuan-li span{background-position:center bottom!important;}
.qq-xuan-li i{background:url(../images/qq-xuan-jiao.png)}
.qq-hui{width:100%;float:left;height:439px;border-bottom:1px solid #ccc;overflow-y:scroll;}
.qq-hui ul{margin-top:-1px;float:left;}
.qq-hui li{width:100%;height:54px;border-top:1px solid #ccc;-webkit-transition:all 0.5s;cursor:context-menu;}
.qq-hui-img{width:40px;height:40px;margin:6px;border:1px solid #fff;float:left;border-radius:4px;overflow:hidden;-webkit-transition:all 0.5s;}
.qq-hui-img img{width:100%;height:auto;border-radius:2px;}
.qq-hui li:hover{background:#fdecaa;border-top:1px solid #e8d691;}
.qq-hui li:hover .qq-hui-img{border:1px solid #aacec4;}
.qq-hui-name{width:226px;float:left;height:40px;margin-top:7px;height:20px;line-height:20px;}
.qq-hui-name span{font-size:14px;float:left;}
.qq-hui-name i{float:right;font-size:10px;color:#999;margin-right:8px;}
.qq-hui-txt{float:left;width:216px;height:27px;line-height:27px;color:#999;overflow:hidden;}
.qq-bot{width:100%;height:58px;border-radius:0 0 4px 4px;float:left;background:#f0f3f5;}
.qq-menu{width:100%;float:left;height:20px;margin:7px 0 6px 0;}
.qq-menu li{width:20px;height:20px;float:left;margin:0 4px;cursor:pointer;}
.qq-menu li img{width:100%;height:auto;}
.qq-menu li:hover{box-shadow:0 0 2px #000;}
.qq-bou-she{float:left;width:100%;height:20px;}
.qq-bou-she li{height:20px;float:left;margin:0 5px;}
.qq-bou-she li img{width:20px;height:20px;float:left;}
.qq-bou-she li span{line-height:20px;float:left;padding-left:5px;}
.qq-chat{width:440px;height:510px;position:fixed;bottom:50%;left:50%;margin:0 0 -255px -220px;background:#fbeede url(../images/box-bg.jpg) right top no-repeat;box-shadow:0 0 5px #666;border-radius:4px;overflow:hidden;display:none;-webkit-transition:all 0.5s;}
.qq-chat-win{position:absolute;width:120px;height:27px;right:0px;top:0px;}
.qq-chat-win li{width:30px;height:27px;float:left;cursor:pointer;background-image:url(../images/chat/win.png);-webkit-transition:all 0.5s;}
.qq-chat-win li:hover{background-image:url(../images/chat/wins.png);background-color:#3a95de;}
.qq-chat-win li:nth-child(1){background-position:left center;}
.qq-chat-win li:nth-child(2){background-position:-30px center;}
.qq-chat-win li:nth-child(3){background-position:-60px center;}
.qq-chat-win li:nth-child(4){background-position:-90px center;}
.qq-chat-win li:nth-child(4):hover{background-color:#ea4848!important;}
.qq-chat-top{height:83px;width:100%;float:left;border-bottom:1px solid rgba(180,180,180,.5);}
.qq-chat-tops{width:100%;float:left;height:42px;margin:4px 0;}
.qq-chat-t-head{width:40px;height:40px;border:1px solid #fff;border-radius:3px;margin:0 10px;float:left;overflow:hidden;box-shadow:0 0 3px #999;}
.qq-chat-t-head img{width:100%;height:auto;}
.qq-chat-t-name{width:260px;height:24px;line-height:24px;font-size:18px;float:left;}
.qq-chat-t-shuo{width:260px;height:18px;line-height:18px;font-size:10px;text-shadow:0 0 2px #fff;float:left;}
.qq-chat-menu{width:100%;float:left;height:32px;}
.qq-chat-menu li{float:left;height:26px;margin:2px 5px;}
.qq-chat-menu li:hover{box-shadow:0 0 3px #666;}
.qq-chat-menu span{width:26px;height:26px;float:left;}
.qq-chat-menu img{width:26px;height:26px;}
.qq-chat-menu i{width:8px;height:26px;margin:0px 3px 0px 1px;float:left;background:url(../images/chat/icon-00.png) left center no-repeat;}
.qq-chat-bot{height:426px;width:100%;float:left;background:rgba(255,255,255,.2);}
.qq-chat-txt{float:left;width:100%;color:#008040;height:290px;overflow-y:scroll;line-height:20px;scrollbar-base-color:#fbeede;scrollbar-track-color:#fbeede;}
.qq-chat-txt ul{padding:10px 0;float:left;width:100%;}
.qq-chat-txt li{margin:3px 0;float:left;width:100%;}
.qq-chat-my span,.qq-chat-you span{float:left;margin:0 10px;}
.qq-chat-ner{color:#666;width:400px;margin:0 20px;}
.qq-chat-ner img{max-width:100%;max-heiht:260px;width:auto;height:auto;}
.qq-chat-text{float:left;width:100%;height:135px;border-top:1px solid rgba(180,180,180,.5);}
.qq-chat-text ul{height:28px;float:left;width:100%;}
.qq-chat-text li{float:left;margin:3px 0 3px 5px;height:20px;border:1px solid rgba(0,0,0,0);-webkit-transition:all 0.5s;border-radius:2px;}
.qq-chat-text li:hover{border:1px solid #ccc;}
.qq-chat-text li span{width:20px;height:20px;float:left;}
.qq-chat-text li p{float:left;padding:0 3px;line-height:20px;cursor:context-menu;}
.qq-chat-text li i{background:url(../images/chat/icon-00.png) no-repeat center center;width:8px;height:20px;float:left;margin:0 2px;}
.qq-chat-text textarea{width:420px;height:69px;max-width:420px;max-height:69px;float:left;margin:0 10px;background:none;line-height:20px;color:#999;}
.qq-chat-but span{padding:0 14px;line-height:24px;height:24px;float:right;margin:7px 4px 7px 0;background:#ea4848;border-radius:4px;color:#fff;cursor:pointer;}
.qq-chat-but span:nth-child(1){padding-right:34px;background:#ea4848 url(../images/chat/fa.png) 60px center no-repeat;}
分享到QQ
分享到微博
微信扫一扫
